Product Zoom On Hover Plugin For jQuery - imgZoom.js

imgZoom.js is a jQuery product image zoom plugin which allows to display the part of zoomed (enlarged) image next to the shrinked image on mouse hover and move. A great tool for e-commerce website to view the detail of a specific area of your product image.

How to use it:

1. Insert the small image into the webpage and specify path to the large image in the data-origin attribute:

<div class="imgBox">
  <img src="small.jpg" 
       data-origin="large.jpg"
  >
</div>

2. Insert both jQuery library and the jquery.imgzoom.js script in the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>

3. Call the core function imgZoom on the top container and done.

$('.imgBox').imgZoom();

4. Customize the image zoom area.

$('.imgBox').imgZoom({
  boxWidth: 360,
  boxHeight: 360,
  marginLeft: 5,
});

5. Override the default attribute which can be used to hold the large image.

$('.imgBox').imgZoom({
  origin: 'data-origin'
});

---

This awesome jQuery plugin is developed by fuxiaochun. For more Advanced Usages, please check the demo page or visit the official website.