Magnify Image On Hover – Loupe.js

Preview:

Description:

This is the Vanilla JavaScript version of the jQuery Loupe plugin, which makes it easier to apply a magnifier glass effect to your image.

With this image zoom library, users can see details of your product image with mouse movement.

Features:

• Adjusts the zoom level with mousehweel.
• Allows you to set minimum and maximum zoom levels.

How to use it:

1. Load the Loupe.js library’s files in the document.

<link rel="stylesheet" href="loupe.css" />
<script src="loupe.js"></script>

2. Add the original version and thumbnail of an image to a web page.

<a id="demo" href="original.jpg">
  <img src="thumb.jpg" />
</a>

3. Initialize the Loupe.js.

new Loupe(document.getElementById('demo'),{
    // options here
});

4. Set the initial zoom level. default: 2.

new Loupe(document.getElementById('demo'),{
    zoom: 5
});

5. Set the minimum and maximum zoom levels. default: [1.2, 7].

new Loupe(document.getElementById('demo'),{
    range: [1.5, 5],
});