Honesty Rocks! truth rules.

Enlarge Image Script

HOME      >>       Programming

TavoxPeru

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.

eliments

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


TavoxPeru

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

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


TavoxPeru

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

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


TavoxPeru

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

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

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

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

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:

TavoxPeru

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,

polarysekt

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

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


Quatrux

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


TavoxPeru

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

Yes, this technique is different than the first post i made, but it is interesting also, i just test it and works fine with Internet Explorer 6 and Firefox 2.

One thing i like of that this technique is that it is very small comparing with the Hoverbox technique posted before.

Best regards,

iGuest

Enlarge Image Script

Enlarge Image Script

 

Hi,

I have been implementing the same type of code to enlarge a picture.

My problem is that the second action is not taken onto account, only the first. In your example, the onclick will work and the ondblclick will not...

 

Do you have any idea why is that?

 

Many thanks

A

 

-Alex


iGuest

Enlarge Image Script

Enlarge Image Script

 

Hi,

 

I found why your code is not working, you miss a ' on the second src

 

<img src="yourimage.Jpg" width="150" height="200" onclick="this.src='http://forums.xisto.com/no_longer_exists/404.png; ondblclick="this.Src=yourimage.Jpg';this.Height=200;this.Width=150">

 

Many thanks

 

A

 

-Alex


TavoxPeru

Enlarge Image Script

 

Enlarge Image Script

Hi,

 

I found why your code is not working, you miss a ' on the second src

 

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

 

Many thanks

 

A

 

-Alex

Oopps, thanks a lot, i gonna edit the code right now.

 

Best regards,


iGuest

Enlarge Image script

Enlarge Image Script

 

Replying to Feedbacker

 

Another useful tip is you can do incremental zooming by altering the code slightly ...

 

<img src="yourimage.Jpg" width="150" height="200" onclick="this.src='http://forums.xisto.com/no_longer_exists/404.png; ondblclick="this.Src=yourimage.Jpg';this.Height=200;this.Width=150">

 

 

-Bruv



Pages :-

Page 1Page 2