Medium Style Image Zoom Plugin with jQuery - zoom.js

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">

Change logs:

2015-08-08

• only translateZ for browser's with transition support (not ie9)

2015-07-01

• rebuild zoom + add data-original

2015-05-08

• use capturing phase to prevent unintended js from firing
• Limit zoom-out cursor to the zoomed image only

2015-05-08

• Fixed: While overlay is shown, still able to zoom other images in viewport.

2015-05-07

• 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.