jQuery Plugin For Magnifying Glass Effect On Images - Image Magnifier

Image Magnifier is a simple jQuery image zoom plugin for creating a magnifying glass effect on your image to provide image inner zoom feature on mouse hover.

How to use it:

1. Load the required idd-zoom.css in the header for basic styles.

<link rel="stylesheet" href="idd-zoom.css">

2. Wrap your image into a container as follow.

<div class="idd-zoom">
  <img src="image.jpg">
</div>

3. Load jQuery library and the jQuery Image Magnifier plugin at the bottom of your web page.

<script src="jquery.js"></script>
<script src="idd-zoom.js"></script

4. Enable the Magnifying Glass Effect on mouse hover.

var mp = new magpic('.idd-zoom', {
    magnifierImage: 'img-zoom.png', 
    magnifierSize: 250, 
    fadeDuration: 400, 
    enabled: false, 
    initialPosition: [495,330]
});

5. Set the width for zoomed images.

.idd-zoom {
  width:600px;
}

.idd-zoom img {
  width:100%;
}

Change log:

2015-06-05

• JS & demo update

---

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