how to zoom in an image using jquery -

I was wondering how it is possible to zoom in a photo,

Like the site,

When you click on the big image, it will zoom in and you can move your cursor and while zooming in, the other parts of the picture I can appreciate it,

I appreciate it if someone can show me a link or put me in the right direction.

Thanks

They do not zoom in, what is actually happening This is that when you click on the zoom text, the image inside the div is replaced by a larger version of that image. And overflow is hidden.

As you move your cursor to deal with some clever javascript and dom, the image is moved accordingly, so that you are actually zooming in the picture.

I will try to make a simple example for you. Sorry it took a while but here it is:

     
 / W3C / DTD XHTML 1.0 strict // n" "http://www.w3.org/TR/xhtml1/ DTD / xhtml1-strict.dtd "& gt; & Lt; Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" & gt; & Lt; Top & gt; & Lt; Title & gt; Example & lt; / Title & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Function () {var fullWidth = 864; // Full width image width in pixels full = 648; // Height in pixels of full size image thumbnailWidth = 389; // Thumbnail image width in pixels ThumbnailHeight = Set the size of the height // div $ ('# image') in pixels of the thumbnail image. ({'Width': thumbnailWidth + 'px', 'height': thumbnailHeight + 'px'}); / / Full-size picture $ ('#full') Hide. (); // Click Toggle Images $ ('# Picture') (function () {$ ('# thumbnail'). (); $ ('# Full') Toggle ();}); // Some calculations $ ('# image'). Mausomov (function (e) {var mousex = e.pagex - $ (this) .attr ('OffsetLeft'); Var Mouse Y = E. Pagwai - $ (this) .attr ('offsetTop'); var posX = (Math ((Mousex / Thumbnail Wide) * 100) / 100) * (fullwidth-thumbnail Wide); Var Pozzy = (Math Field ((Mouse / ThumbnailHight) * 100) / 100) * (Full Hight-ThumbnailHight); $ ('# Full'). CSS ({'left': '-' + posx + 'Px', 'top': '-' + posy + 'px'});});}); & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; #Photos {Overflow: Hidden; Status: Relative; Limit: 1px solid # 000000; } #thumbnail {cursor: indicator; } #full {status: relative; Cursor: crosshairs; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "picture" & gt; & Lt; Img alt = "" id = "thumbnail" src = "http://img202.imageshack.us/img202/8403/93629325.jpg" /> & Lt; Img alt = "" id = "full" src = "http://img111.imageshack.us/img111/4734/tbmecsekyellowflower.jpg" /> & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

You will need to adjust the thumbnail and full size image width and height accordingly. But to see an example of the image hosted on the image shot, just paste it above.