Medium Style Image Zoom Plugin with jQuery - zoom.js
|File Size:||663 KB|
|Official Website:||Go to website|
zoom.js is a smart jQuery image zoom plugin that enlarges / shrinks your images in place on click, as you seen on Medium.com. You can click anywhere to exit the zoomed state or, more interestingly, just scroll away as if you were continuing past the image.
How to use it:
1. To get started, you have to load the required
zoom.css file in the document's head section.
<link rel="stylesheet" href="css/zoom.css">
2. And then load the jQuery
zoom.js script after jQuery library but before the closing body tag.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/zoom.js"></script>
3. The last step is add the
data-action="zoom" attribute to any images on your web page.
<img src="1.jpg" data-action="zoom">
- only translateZ for browser's with transition support (not ie9)
- rebuild zoom + add data-original
- use capturing phase to prevent unintended js from firing
- Limit zoom-out cursor to the zoomed image only
- Fixed: While overlay is shown, still able to zoom other images in viewport.
- metakey opens image in new tab
This awesome jQuery plugin is developed by fat. For more Advanced Usages, please check the demo page or visit the official website.