how to zoom in an image using jquery

Question

I was just wondering how it\'s possible to zoom in a pic using jquery,

something like this web site,

link text

when you click on the big image it\'ll zoo

Answer 1

They don't zoom in, what is really happening is that when you click the Zoom text, the image inside the div is replaced by a larger version of that image. And overflow is set to hidden.

As you move your cursor, using some clever JavaScript and DOM handling, the image is simply moved relatively accordingly, creating the effect you are actually zooming in the picture.

I'll try to create up a simple example for you.

EDIT

Sorry took a while but here it is:

You will need to adjust the thumbnail and full-sized image width and height accordingly. But simply copy paste the above to see an example of an image hosted on imageshack.