Jump to content
xisto Community
TavoxPeru

Enlarge Image Script

Recommended Posts

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 by TavoxPeru (see edit history)

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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 B)

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. :rolleyes:

Share this post


Link to post
Share on other sites

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 B)
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. :rolleyes:

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,

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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 ;]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.