eBay Inspired Magnify Image On Hover Plugin - jQuery Magnifier

File Size: 6.22 KB
Views Total: 5205
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
eBay Inspired Magnify Image On Hover Plugin - jQuery Magnifier

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.

<img src="product-1.jpg" class="thumb">
<img src="product-2.jpg" class="thumb">
<img src="product-3.jpg" class="thumb">
<img src="product-4.jpg" class="thumb">
<img src="product-5.jpg" class="thumb">

2. Create an empty container to display the enlarged image next to the thumbnails.

<div id="display"></div>

3. Put jQuery JavaScript library and the jQuery Magnifier plugin's script on the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<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
  magnify: 10, 
  region: {
    h: 38.7, 
    w: 38.7
  display: $('#display')

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