Medium Style Image Zoom Plugin with jQuery - zoom.js

File Size: 663 KB
Views Total: 12397
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 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="//"></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:


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