How to zoom in and zoom out image using jquery?

Question

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

    ****here is the script****
       <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(document).ready(function () {
            $('#Img1, #Img2, #Img3').mouseover(function () {
                $(this).animate({ width: "122px", height: "110px" }, 100);
            });
            $('#Img1, #Img2, #Img3').mouseout(function () {
                $(this).animate({ width: "118px", height: "106px" }, 100);
            });
        });
      </script>
**Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">

Answer 2

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 3

The Kabbar Image Zoomer can sort out your issue: http://www.ideabonus.com/Kabbar/index.html

Answer 4

Try this link .Image zoom in works pretty well with this code.