Image Zoom Plugin is a lightweight and very easy to use jquery plugin that creates smooth zoom effects instantly for any images. You can experience the zoom effects with a mouse click and touch events. The zoom will reset automatically when users moving to focus out of the image. Also, the user can reset the zoom manually by clicking on the image.

Features:

• Click/tap to zoom in an image.
• Very lightweight and easy to implement.
• Can modify the default zoom.
• Supports on all modern devices and browsers.

How to use it:

1. Include the Javascript image-zoom.min.js at the bottom of the web page.

<script src="path/to/image-zoom.min.js"></script>

2. Include the CSS image-zoom.css in the header of the page.

<link rel="stylesheet" href="path/to/image-zoom.css">

3. Add the basic HTML to the page.

<img id="imageZoom" src="path/to/image" alt="">

4. Initialize the plugin and we're ready to go.

$(document).ready(function(){
  $('#imageZoom').imageZoom();
});

Options

You can pass the Zoom level as an option, by default this is set to 150%.

$(document).ready(function(){
  $('#imageZoom').imageZoom({
     zoom : 200
  });
});

<img id="imageZoom" src="path/to/image" alt="">

$(document).ready(function(){
  $('#imageZoom').imageZoom();
});

<img id="imageZoomExtra" src="path/to/image" alt="">

$(document).ready(function(){
  $('#imageZoomExtra').imageZoom({
     zoom : 200
  });
});

<img id="imageZoomExtraLarge" src="path/to/image" alt="">

$(document).ready(function(){
  $('#imageZoomExtraLarge').imageZoom({
     zoom : 300
  });
});

<ul>
   <li><img class="my-gallery-image" src="path/to/image" alt=""></li>
   <li><img class="my-gallery-image" src="path/to/image" alt=""></li>
   <li><img class="my-gallery-image" src="path/to/image" alt=""></li>
</ul>

$(document).ready(function(){
  $('.my-gallery-image').each(function(){
    $(this).imageZoom();
  });
});