January 21, 2024 5:07 am

How to ZoomIn Images in jQuery

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.

zoom-in-images-in-jquery

[wpdm_file id=33]DEMO

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

One response to “How to ZoomIn Images in jQuery”

  1. flobamora says:

    it’s amazing tutorial…i like it……

Leave a Reply

Your email address will not be published. Required fields are marked *