Simple jQuery Magnifying Glass Image Zoom Plugin - magnify.js

Simple jQuery Magnifying Glass Image Zoom Plugin - magnify.js
File Size: 471 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.

$('img').magnify({

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

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

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

  // 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,

  // callback
  'onload': function(){} 
  
});

5. The destroy method.

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

Change logs:

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)

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.