[ACCEPTED]-how to zoom in an image using jquery-zooming

Accepted answer
Score: 19

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

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

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


Sorry took a while but here it 4 is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
                var fullWidth = 864; // Width in pixels of full-sized image
                var fullHeight = 648; // Height in pixels of full-sized image
                var thumbnailWidth = 389;  // Width in pixels of thumbnail image
                var thumbnailHeight = 292;  // Height in pixels of thumbnail image

                // Set size of div
                        'width': thumbnailWidth+'px',
                        'height': thumbnailHeight+'px'

                // Hide the full-sized picture

                // Toggle pictures on click
                $('#picture').click(function() {

                // Do some calculations
                $('#picture').mousemove(function(e) {
                        var mouseX = e.pageX - $(this).attr('offsetLeft'); 
                        var mouseY = e.pageY - $(this).attr('offsetTop'); 

                        var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
                        var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

                                'left': '-' + posX + 'px',
                                'top': '-' + posY + 'px'

    <style type="text/css">
        #picture {
                overflow: hidden;
                position: relative;
                border: 1px solid #000000;

        #thumbnail {
                cursor: pointer;

        #full {
                position: relative;
                cursor: crosshair;

    <div id="picture">
        <img alt="" id="thumbnail" src="http://img202.imageshack.us/img202/8403/93629325.jpg" />
        <img alt="" id="full" src="http://img111.imageshack.us/img111/4734/tbmecsekyellowflower.jpg" />

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

Score: 3

The gzoom, miniZoomPan, WarpZoom, and Image 5 Detail plugins all make this sort of thing 4 easy. You can find them all here:


There are 3 probably others too.

Hope that helps!

EDIT: There 2 are several more listed on a previous question 1 called What’s the best jQuery product zoom plugin?

Score: 1

What you need is not just plain zooming. But 5 a zoom and pan function within a fixed viewport. The 4 website you gave probably code it from scratch. I 3 found one for you which is not exactly the 2 same, but you might want totake a look here.

Meanwhile, I'm 1 eager to see what Sbm007's example.

Score: 0

Asos.com coded theirs from scratch, see 1 how with Firebug: http://www.asos.com/assets/asosCom/js/libs/asos.js.utils.productpage.js

Score: 0

Hey amir I am adding one tutorial link and 5 it's proper solution for your search, try 4 tutorial from following link, it will also 3 help you for zoom in image in 3 other different 2 ways...


i had tried this and it's working 1 fine.

More Related questions