Menu
Community /Pin to ProfileBookmark
@PeterPan_321Sep 09.2016 — #This is what I've come up with so far (could be simplified I'm sure). I activate it by putting the main call (expansion()) in the onclick event of each image. The problems so far are that (1) as it expands or shrinks an image, a little at a time, all the text is re-formatted. Kind of looks stupid and obviously slows down the transition. and (2) while it works fine for any image aligned either left or right, expanding an image in a group of images stored horizontally in the middle of the screen (as in a table), causes it to expand beyond the right edge, and forcing the whole document to re-size. Just a mess.
[SIZE=4][FONT=fixedsys]<script language="JavaScript">[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var expanded = false;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var origImgWidth =0;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var origHeight =0;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var chgWidth = 1;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var change =1;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var origAlign = "";[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var availScrWidth= 1; // dummy initializer[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var transitions = 40;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var transSpeed =10;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]var curImg;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]
[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]
[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]function sizeChg() {[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] var finalSize = (change > 0) ? availScrWidth : origImgWidth;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] var done = false;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] [/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] curImg.width = chgWidth;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] chgWidth += change;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] if ( change > 0 && chgWidth >= availScrWidth) done = true;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] if ( change < 0 && chgWidth <= origImgWidth ) done = true;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] if (!done) setTimeout( sizeChg, 10 );[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] else [/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] {[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] curImg.width = finalSize;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] if (change < 0) curItm.height = origHeight;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] curImg.align = origAlign;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] }[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] }[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]
[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]function expansion(itm)[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]{[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] curImg = itm;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] availScrWidth = document.getElementById('container').offsetWidth;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] [/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] if (expanded == false) [/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] {[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] expanded = true;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] origImgWidth = itm.width;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] origHeight = itm.height[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] origAlign = itm.align;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] [/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] change= (availScrWidth - origImgWidth) / transitions;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] chgWidth = origImgWidth;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] [/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] setTimeout( sizeChg, 400 );[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys]
[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] }[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] else [/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] {[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] expanded = false;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] change = -change;[/FONT][/SIZE]
[SIZE=4][FONT=fixedsys] setTimeo @PeterPan_321Sep 12.2016 — #Don't know if anyone is interested, but I believe I have created a pretty decent solution now, for adding simple zoom/closeup capability to the images on your page. I guess I can't make sense of this editor though, and I'm pretty frustrated, because I'd like to have shared the code here. I guess my code and comments are over 10000 characters and that's not allowed, and there is no CODE format button in the editor either, so it just looks like a mess in this font. If anyone is interested in my solution, please contact me and I'll get you a copy. This page (below) is still in progress, but you can get an idea how my script works by clicking (or tapping) some of the images. Sorry I can't seem to post the code. If someone can explain a better way to do so let me know and I will. Right now only the first couple of images are enabled, but more will be working every day.http://elfintechnologies.com/LineArray.html @PeterPan_321Sep 15.2016 — #
Not sure what that response is about. That page was just posted as part of my description of what I wanted to do. No matter though. Not much interest in the thread apparently. But if you revisit that page (not with an error analyzer, but just a browser), and click on any of the images, You'll see that I did add the capability I want, with the script I finally developed (not the one I posted). It works well in everything but IE-8, and since IE-8 doesn't have a build in javascript console I know of, I'll likely never get to troubleshoot it. I would have posted my whole final commented script here, but I doubt the forum would allow such a large post. And like I said, the interest seems to be zero anyway. :-(@PeterPan_321Sep 16.2016 — #OK thanks, and yes those pages did need to be cleaned up, so thanks. (In fact I hadn't even considered the language attribute being important before, so thanks for that). Still, you can understand my surprise here. To post a thread about developing a javascript based ZOOM utility, on a JAVASCRIPT forum, and on a DEVELOPER site, I was kind of surprised that the only relevant post was a suggestion that I find some already canned product, and no other interest.
At this point I do have a well documented script I wrote which I'm calling SimpleZoom.JS, and its up and working on both the original page, and another one I just finished,[URL]http://elfintechnologies.com/LineArray.html[/URL] . Seems to work in everything, hell it even works on IE-8. You can't see the code in the source though, because its in a separate JS file at this point. You're a 'super moderator', so if you think It could be posted anywhere where someone might benefit, I will. Probably can't, because of the size of the script with all comments included, but I'm just offering. Hell, people have helped me a lot here in the past. But maybe the age has passed where people care to write their own code to get the behavior they want. Seems sad but true. I can't tell you how many times on various coding forums I've asked for advise on "how to" do something in JS, PHP, or whatever, only to get answers like Just use Joomla" or "Just use Wordpress". I don't know. Guess I'm just old school. Like learning to actually build things. :-)@PeterPan_321Sep 17.2016 — #Well, I'm not sure someone could always access my simpleZoom.js directly just by linking. Its possible I did it wrong, but I generally set up .htaccess files to prevent most hot linking. Its a little misleading because if you visit the site with a browser, and the site is in your recent history, then you probably can see the file directly, and of course copy it. But if you try to link it into a web page on some other domain, and someone visits your site with their browser, they may get nothing. But like I said, I may not have done the .htaccess right.
But anyway, I'd still like to get others to test my page so at least I know what browsers my ZOOM utility works in, and which ones it won't. I only have so many to test with. Do you know of any other forums dealing with pure javascript that are maybe a little more active as far as response? Or maybe it wouldn't be inappropriate for me to re-post as a "please help test my script" kind of thread? @PeterPan_321Sep 17.2016 — #Naw... Mostly comments truth be told. Run a comment stripper on it and it won't be so much. I also use very old school formatting. Like...
doThis()
{
// stuff
}
instead of...
doThis() {
// some stuff }
Need a javascript for expanding images
I’m preparing pages describing various electronic products I’ve developed. These pages typically have simple graphics embedded within the text. To make the pages responsive, I’ll usually specify each image size as a percent of the available ‘container’ (for example, I may post images with a width of “25%”, and an “auto” height). Here’s an example of such a page, for my SOUNDMAN product….
[url]http://elfintechnologies.com/SoundManIntro.html
Scroll down past the big “introduction” image and you’ll see lots of the simple images I’m describing. So now I’d like to add a feature allowing the visitor to click on (or tap) any of the small graphics and have it gracefully morph into a full page image, and then return to its original position and size when the visitor clicks again.
I’d rather use javascript the CSS for this if possible. Any suggestions?
Sign in
to post a comment12 Comments(s) ↴
0
@PeterPan_321Sep 09.2016 — #This is what I've come up with so far (could be simplified I'm sure). I activate it by putting the main call (expansion()) in the onclick event of each image. The problems so far are that (1) as it expands or shrinks an image, a little at a time, all the text is re-formatted. Kind of looks stupid and obviously slows down the transition. and (2) while it works fine for any image aligned either left or right, expanding an image in a group of images stored horizontally in the middle of the screen (as in a table), causes it to expand beyond the right edge, and forcing the whole document to re-size. Just a mess.[/FONT][/SIZE]
[/FONT][/SIZE]
[/FONT][/SIZE]
[/FONT][/SIZE]
0
@PeterPan_321Sep 12.2016 — #Don't know if anyone is interested, but I believe I have created a pretty decent solution now, for adding simple zoom/closeup capability to the images on your page. I guess I can't make sense of this editor though, and I'm pretty frustrated, because I'd like to have shared the code here. I guess my code and comments are over 10000 characters and that's not allowed, and there is no CODE format button in the editor either, so it just looks like a mess in this font. If anyone is interested in my solution, please contact me and I'll get you a copy. This page (below) is still in progress, but you can get an idea how my script works by clicking (or tapping) some of the images. Sorry I can't seem to post the code. If someone can explain a better way to do so let me know and I will. Right now only the first couple of images are enabled, but more will be working every day.0
@PeterPan_321Sep 15.2016 — #Validator found 144 errors
[URL]https://validator.w3.org/nu/?doc=http%3A%2F%2Felfintechnologies.com%2FSoundManIntro.html[/URL]
CSS validator
[URL]https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Felfintechnologies.com%2FSoundManIntro.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en[/URL] [/QUOTE]
Not sure what that response is about. That page was just posted as part of my description of what I wanted to do. No matter though. Not much interest in the thread apparently. But if you revisit that page (not with an error analyzer, but just a browser), and click on any of the images, You'll see that I did add the capability I want, with the script I finally developed (not the one I posted). It works well in everything but IE-8, and since IE-8 doesn't have a build in javascript console I know of, I'll likely never get to troubleshoot it. I would have posted my whole final commented script here, but I doubt the forum would allow such a large post. And like I said, the interest seems to be zero anyway. :-(
0
@PeterPan_321Sep 16.2016 — #OK thanks, and yes those pages did need to be cleaned up, so thanks. (In fact I hadn't even considered the language attribute being important before, so thanks for that). Still, you can understand my surprise here. To post a thread about developing a javascript based ZOOM utility, on a JAVASCRIPT forum, and on a DEVELOPER site, I was kind of surprised that the only relevant post was a suggestion that I find some already canned product, and no other interest. At this point I do have a well documented script I wrote which I'm calling SimpleZoom.JS, and its up and working on both the original page, and another one I just finished,
0
@PeterPan_321Sep 17.2016 — #But anyway, I'd still like to get others to test my page so at least I know what browsers my ZOOM utility works in, and which ones it won't. I only have so many to test with. Do you know of any other forums dealing with pure javascript that are maybe a little more active as far as response? Or maybe it wouldn't be inappropriate for me to re-post as a "please help test my script" kind of thread?
0
@PeterPan_321Sep 17.2016 — #doThis()
{
// stuff
}
instead of...
doThis() {
// some stuff }