Simple jQuery Magnifying Glass Image Zoom Plugin - magnify.js

Simple jQuery Magnifying Glass Image Zoom Plugin - magnify.js
File Size: 470 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

$(document).ready(function() {
  $('img').magnify({
  speed: 100, // fade in/out speed
  timeout: -1, // timeout for mobile
  src: '', // The URI of the large image that will be shown in the magnifying lens.
  onload: function(){} // callback
  });
});

5. The destroy method.

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

Change logs:

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)

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.