Image zoom-in is very useful feature in an eCommerce website to show your product images to viewers in zoom with there ease. So in this tutorial i am going to show you how to make a very simple zoom in image program in which I have used a jQuery plugin jQZoom and explain its usage with a demo and you can also download that script for free.

In demo i have shown 4 different demo examples like.

1. Standard Zoom
2. Reverse Zoom
3. Drag Zoom
4. Inner Zoom

Import jQuery and jQZoom libraries and css in your HTML File.

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<link rel="stylesheet"  type="text/css" href="jquery.jqzoom.css">
<script type="text/javascript" src="jquery.jqzoom-core-pack.js"></script>

jQuery to initialize  your page images settings.

<script type="text/javascript">
     jQuery(document).ready(function(){
             jQuery(\'a#demo1\').jqzoom();
                jQuery(\'a#demo2\').jqzoom({
                zoomType: \'reverse\'
            });
                jQuery(\'a#demo3\').jqzoom({
                zoomType: \'drag\'
            });
                jQuery(\'a#demo4\').jqzoom({
                zoomType: \'innerzoom\'
            });
});
     </script>

Images block where you have to put a small image(Thumbnail) and a large image (Original) like this.

<div class="clearfix demo">
    <div class="clearfix" style="position:relative;">
         <a href="images/1_big.png"  rel="gal1" id="demo1"  title="PHPGang.com ZoomIn" >
            <img src="images/1_small.png"  title="PHPGang.com ZoomIn"  style="border: 1px solid #666;">
         </a>
    </div>
</div>

Change id=”demo1″ to any other id as given in above jQuery in this script we have only 4 types of demos.

Download Script and use it its free and comment your reviews.