Simple jQuery Magnifying Glass Image Zoom Plugin - magnify.js

magnify.js is a tiny and simple-to-use jQuery plugin for creating a nice magnifying glass effect to magnify product images on your E-commerce websites.

How to use it:

1. Load the magnify.css in the header and the jquery.magnify.js at the bottom of the web page, but after jQuery library.

<link href="css/magnify.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.magnify.js"></script>

2. Wrap the small image into a container with the class of 'magnify'. Insert the small image into your web page. The URL to the large image can be placed in the data-magnify-src attribute or passed as an option called "src" during initialization.

<img src="small.jpg" data-magnify-src="large.jpg">

3. Call the .magnify() function on the image selector

$(document).ready(function() {
  $('img').magnify();
});

4. Default options.

$('img').magnify({

  // URI of the large image
  'src': '',

  // fade in/out speed
  'speed': 100, 

  // timeout for mobile
  'timeout': -1, 

  // Vertical touch point offset. Set this to something like 90 if you want to avoid your finger getting in the way of the magnifying lens on smartphones and tablets.
  'touchBottomOffset': 0,

  // Width of the main image
  'finalWidth': null,

  // Height of the main image
  'finalHeight': null,

  // Width of the image displayed inside the magnifying lens
  'magnifiedWidth': null,

  // Height of the image displayed inside the magnifying lens
  'magnifiedHeight': null,

  // Set this to true to keep the edge of the image within the magnifying lens
  'limitBounds': false,

  // Custom event to fire when you tap on the mobile close button. 
  // Set this to 'click' or 'touchend' if it's conflicting with another event handler. 
  // This option is only applicable when the mobile plugin (jquery.magnify-mobile.js) is used.
  'mobileCloseEvent': 'touchstart',

  // callbacl
  'afterLoad': function(){}
  
});

5. The destroy method.

var $zoom = $('img').magnify();
// Disable zoom
$zoom.destroy();

Changelog:

v2.3.3 (2019-06-09)

• Fixed image maps require two clicks in Firefox

v2.3.2 (2018-06-20)

• Fix issue when magnifiedWidth/Height updated while lens is visible

v2.3.0 (2018-04-16)

• Options updated.

v2.1.0 (2017-05-31)

• Added 'limitBounds' option

v2.0.0 (2017-05-29)

• Fix z-index regression

v1.7.0 (2017-02-20)

• JS update

v1.6.17 (2016-12-29)

• Rename 'onload' option to 'afterLoad' to avoid JS reserved word

v1.6.17 (2016-11-25)

• Only destroy images with zoom

v1.6.16 (2016-11-14)

• Add workaround for buggy implementation of elementFromPoint() in FF

v1.6.14 (2016-11-09)

• JS update

v1.6.12 (2016-10-19)

• added possible to integrate with a "usemap" behavior

v1.6.11 (2016-10-05)

• JS update

v1.6.10 (2016-09-07)

• Fix jQuery chaining

v1.6.9 (2016-08-10)

• Fix leftover resize handler after destroy(); add magnifystart and magnifyend events

v1.6.8 (2016-08-10)

• bugfix.

v1.6.7 (2016-07-18)

• Add destroy() method; normalize line endings

v1.6.6 (2016-04-20)

• Cache offset and dimensions for better performance

v1.6.5 (2016-02-29)

• Fix scrollbar showing when lens is off screen

v1.6.0 (2016-02-26)

• Add 'timeout' option for touch devices

v1.5.0 (2016-02-24)

• Add 'timeout' option for touch devices

v1.4.0 (2016-02-18)

• JS update.

v1.3.3 (2016-01-27)

• Fixed Lens gets stuck if mouseleave is too fast.

v1.3.1 (2015-08-27)

• fixed a bug.

v1.3.0 (2015-04-06)

• fixed a bug.

v1.2.6 (2015-01-24)

• update.

v1.2.3 (2015-01-24)

• update.

v1.2.2 (2014-12-26)

• update.

v1.2 (2014-12-22)

• update.

v1.1 (2014-12-22)

• Fix issue where lens was covered by other elements

 

---

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