Easy Product Image Magnification Plugin - jQuery EasyZoom

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.

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.

  • Publication date: 18.01.2018
  • Source