How to zoom in and zoom out image using jquery?

Question

Hi Friends!

I have following code

<div class="c1">
    <div class="d1">
         <img />
         <img />
         <img />
    </div>
</div>

1.There are GIF images included in tag. These images are transparent and some portion of them are highlighted with transparent yellow patch. 2. css class is applied to inner div class and there is a background image of type jpeg is assigned to inner div class with the help of css class. 3. The outside div is made scrollable with the help of css class applied to it.

I want to do zoom in and out on the image image inside div with the help of jquery.

so is it possible to zoom in and out the image with the help of jquery? what is the simple code for it?

waiting for your replies friends!

Thank You!

Answer 1

something like this http://plugins.jquery.com/project/miniZoomPan or
http://www.eyecon.ro/zoomimage/

Answer 2

I think you should go for the jquery zoom plugin.

Answer 3

Backgrounds cannot be scaled, only <img> tags can.

You could put an image in a div, where the div has overflow:hidden;, and then scale the image.

You can see an quick example here: http://jsbin.com/ozugi3/2

http://jsbin.com/ozugi3/2/edit

Answer 4

This is a nice tutorial for a zooming hover effect: Fancy Thumbnail Hover Effect w/jQuery