Simple jQuery Magnifying Glass Image Zoom Plugin - magnify.js

File Size: 472 KB
Views Total: 43290
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.