Enlarge Image Script

[TavoxPeru 0]

Hi, this simple one line script changes the image size and source on your thumbnail picture without reloading the page or using popups, just paste this code into the BODY section of your HTML document:

<img src="yourimage.jpg" width="150" height="200" onclick="this.src='yourimage.jpg';this.height=400;this.width=300" ondblclick="this.src='yourimage.jpg';this.height=200;this.width=150">

Best regards,

edit: adding the missing ' of the src on the ondblclick event.
Edited January 17, 2008 by TavoxPeru (see edit history)

[eliments 0]

Once again... very nifty stuff here.... jeez man... where you learn all of this stuff....Thanks ^^;

[TavoxPeru 0]

Once again... very nifty stuff here.... jeez man... where you learn all of this stuff....Thanks ^^;

You are welcome, and where do i learn all of this stuff???? well, honestly, i learn all of this stuff by investigating forced in some way by my clients and of course because i love my work, and other times because i dont have any thing better to do .

BTW, this code is really good, i forgot it and a few days ago i have to do something similar, thanks to refresh my mind .

Best regards,

[iGuest 3]

Nice code,Where do you guys achually learn all these codes? Websites? Books? come on, give me ur hints

[TavoxPeru 0]

Nice code,
Where do you guys achually learn all these codes? Websites? Books? come on, give me ur hints

As i said in my previous post, by investigating, web searching, in websites like dynamic drive, javascript.com, etc. Books???? may be you dont beleive me but practically i dont read any technical book for a long time.

best regards,

[toby 0]

How do you make it go back to normal, like onhoveroff?

[TavoxPeru 0]

How do you make it go back to normal, like onhoveroff?

To make the image go back to normal state simply double click over it.
Best regards,

[iGuest 3]

Thanks very much for sharing this code, it's really great. But there's one question that I have been wondering about. How do you keep the image looking good even after it is being enlarged? What I have seen so far is that only dimensions of the original image size will look good.-Domoto Rima

[iGuest 3]

I have a question too. I am creating a site and I need to make a picture that will enlarge when it is clicked. I could use javascript for that or simply <img src="myimg.jpg" onClick="window.location=src"> something like this, I can't remember the sintax exactly, but my problem is that I need to make the pic enlarge without using onClick, or onSubmit or other things like that. I am using a program (typo3) wich will map it and by doing that the picture will lose the onClick part. I also need to use the same code for many pictures. if you have any idea about this pls let me know... and I hope I explained it right cuz I'm not to good in explaining my thoughts.thanks-cami

[TavoxPeru 0]

Thanks very much for sharing this code, it's really great.
But there's one question that I have been wondering about. How do you keep the image looking good even after it is being enlarged? What I have seen so far is that only dimensions of the original image size will look good.
-Domoto Rima

In that case you must calculate the new dimensions of the image by using an aspect ratio factor i guess.

Best regards,

[Quatrux 4]

But there's one question that I have been wondering about. How do you keep the image looking good even after it is being enlarged? What I have seen so far is that only dimensions of the original image size will look good.-Domoto Rima

Well, there can be some ways to do it, the enlargement can really be done with Opera for example by pressing + key, it will zoom and if you only want to zoom the image and not the content, just use Open image and then use the zoom key

Also, you can do it with javascript by having two pictures, a thumbnail and a normal picture, but here you can zoom one picture, I mean by using this script, if you want the enlargement to be better quality, you just need the image dimensions to be the same as the enlarged image and then the image is small, it is scaled by the browser to a small size The bad thing is that if there are a lot of images, they will take more to load, due to big image filesize, so it is a waste of bandwidth if nobody will enlarge them.. and also I never liked how browsers scale images to smaller dimensions..

I always prefer to use two images, a thumbnail and a normal image for this kind of things, even though it can be done with imagemagick or gd library every time, but why waste the resources of a server? it will need to scale it every time, unless it will do some checking, will save the thumbnails and if they exist, it won't scale, but show it, this wouldn't be the most logic decision.

[TavoxPeru 0]

Well, there can be some ways to do it, the enlargement can really be done with Opera for example by pressing + key, it will zoom and if you only want to zoom the image and not the content, just use Open image and then use the zoom key
Also, you can do it with javascript by having two pictures, a thumbnail and a normal picture, but here you can zoom one picture, I mean by using this script, if you want the enlargement to be better quality, you just need the image dimensions to be the same as the enlarged image and then the image is small, it is scaled by the browser to a small size The bad thing is that if there are a lot of images, they will take more to load, due to big image filesize, so it is a waste of bandwidth if nobody will enlarge them.. and also I never liked how browsers scale images to smaller dimensions..

I always prefer to use two images, a thumbnail and a normal image for this kind of things, even though it can be done with imagemagick or gd library every time, but why waste the resources of a server? it will need to scale it every time, unless it will do some checking, will save the thumbnails and if they exist, it won't scale, but show it, this wouldn't be the most logic decision.

As you, i don't like that the browser scales automatically bigger images, of course there are sometimes that it is useful but not every time. This script is useful only when you have few images on your page, when we talk about lots of them i do exactly the same thing, use two images, a thumbnail and the original.

Best regards,

[polarysekt 0]

How do you make it go back to normal, like onhoveroff?

I would use... OnMouseOver and OnMouseExit if you're looking for a hover-only effect...


funny thing is i think i came across the stretching feature on accident one of the first few times I used an IDE... They love to stick the dimensions of the images in there for you (as it somewhat preallocates the space, especially on slow connections)... and i think i plugged in a different image manually... like with notepad or kate... and it stretched....

lots of things just come out of nowhere...

[iGuest 3]

Google hoverbox to find a CSS method to increase the size of a picture on-hover. No javascript required.

[Quatrux 4]

Yeah, it can be done with CSS, even though the technique is a bit different then in the first post, take this example:

http://forums.xisto.com/no_longer_exists/ - it is css only as I understand.

if you just change the width and height, you'll get a bigger picture or a smaller, depends on the dimensions you chosen ;]