Easy Product Image Magnification Plugin - jQuery EasyZoom
File Size: | 9.36 KB |
---|---|
Views Total: | 10068 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.