Simple jQuery Magnifying Glass Image Zoom Plugin - magnify.js
File Size: | 472 KB |
---|---|
Views Total: | 42909 |
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, // 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.