This time I will share jQuery Plugin and tutorial about eBay Inspired Magnify Image On Hover Plugin – jQuery Magnifier, hope it will help you in programming stack.
Magnifier is a lightweight jQuery image zoom plugin inspired by eBay.com that applies a smooth, hover-triggered Magnifying Glass Effect to multiple images.
How to use it:
1. Insert a group of product images into the html document.
1 |
<img src="product-1.jpg" class="thumb"> |
2 |
<img src="product-2.jpg" class="thumb"> |
3 |
<img src="product-3.jpg" class="thumb"> |
4 |
<img src="product-4.jpg" class="thumb"> |
5 |
<img src="product-5.jpg" class="thumb"> |
2. Create an empty container to display the enlarged image next to the thumbnails.
1 |
<div id="display"></div> |
3. Put jQuery JavaScript library and the jQuery Magnifier plugin’s script on the webpage.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
5 |
<script src="jquery.magnifier.min.js"></script> |
4. Initialize the Magnifier plugin with the following settings.
- magnify: zoom level
- region: size of zoom region
- display: display area
1 |
$('.thumb').magnifier({ |
This awesome jQuery plugin is developed by Rajatnarvekar. For more Advanced Usages, please check the demo page or visit the official website.
