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

EDIT

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">
<head>
    <title>Example</title>

    <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
                $('#picture').css({
                        'width': thumbnailWidth+'px',
                        'height': thumbnailHeight+'px'
                });

                // Hide the full-sized picture
                $('#full').hide();

                // Toggle pictures on click
                $('#picture').click(function() {
                        $('#thumbnail').toggle();
                        $('#full').toggle();
                });

                // 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);

                        $('#full').css({
                                'left': '-' + posX + 'px',
                                'top': '-' + posY + 'px'
                        });
                });
        });
    </script>

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

        #thumbnail {
                cursor: pointer;
        }

        #full {
                position: relative;
                cursor: crosshair;
        }
    </style>
</head>

<body>
    <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" />
    </div>
</body>
</html>

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:

http://plugins.jquery.com/taxonomy/term/1848

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

http://www.jacklmoore.com/zoom/

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

Source: stackoverflow.com

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

Is there a way to zoom into a D3 force layout graph?

Zoom to the centre of canvas using Fabric

Zoom and pan HTML5 canvas - library

How can I get zoom functionality for images?

How to enable the (two finger) zoom in/out feature for an image in android

How to find absolute position of click while zoomed in

Zooming on Chrome causes CSS positioning issues

MapView to show all annotations and zoom in as much as possible of the map

Turn off Zooming in UIScrollView

Move camera to fit 3D scene