Easy Product Image Magnification Plugin - jQuery EasyZoom

A lightweight, easy-to-use jQuery plugin for product image magnification that creates a magnifier overlay on top of your image and displays the enlarged region of the image on mouse hover and move.

How to use it:

1. Include the stylesheet easyzoom.min.css in the head section of the html page.

<link rel="stylesheet" href="easyzoom.min.css">

2. Insert your image into a DIV container with the CSS class of easyzoom.

<div class="easyzoom example">
  <img src="https://picsum.photos/1200/600/?random">
</div>

3. Include JQuery JavaScript library and the JavaScript easyzoom.min.js at the bottom of the html page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="easyzoom.min.js"></script>

4. Enable the image magnification functionality on the image.

$(function(){

  $('.example').easyZoom();

});

5. Set the max width of the original image.

$(function(){

  $('.example').easyZoom({
    width: 300, // default: 400
  });

});

6. Set the position of the enlarged image.

$(function(){

  $('.example').easyZoom({
    position: 'left' // default: right
  });

});

7. Set the space between original and enlarged images.

$(function(){

  $('.example').easyZoom({
    distance: 10 // default: 20px
  });

});

8. Customize the magnifying glass effect.

$(function(){

  $('.example').easyZoom({
    background: '#fff',
    opacity: 0.7
  });

});

---

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