Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here


Medium's Image Zoom for jQuery

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star blank 374f33e4d622a2930833db3cbea26b5d03dc44961a6ecab0b9e13276d97d6682Star blank 374f33e4d622a2930833db3cbea26b5d03dc44961a6ecab0b9e13276d97d6682 (2 ratings)
Rated 3.0 out of 5
Subscribe to updates I use zoom.js

Statistics on zoom.js

Number of watchers on Github 3765
Number of open issues 36
Average time to close an issue 18 days
Main language JavaScript
Average time to merge a PR 5 days
Open pull requests 12+
Closed pull requests 11+
Last commit over 5 years ago
Repo Created about 7 years ago
Repo Last Updated over 2 years ago
Size 1.65 MB
Homepage https://fat.githu...
Organization / Authorfat
Latest Releasev0.0.1
Page Updated
Do you use zoom.js? Leave a review!
View open issues (36)
View zoom.js activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating zoom.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)
What people are saying about zoom.js Leave a review
see above


A simple jQuery plugin for image zooming; as seen on Medium.




  1. Link the zoom.js and zoom.css files to your site or application.
  <link href="css/zoom.css" rel="stylesheet">
  <script src="js/zoom.js"></script>
  1. zoom.js is dependent on transition.js file from Bootstrap, so make sure to include that as well.
  <script src="js/transition.js"></script>
  1. Add a data-action="zoom" attribute to the images you want to make zoomable. For example:
  <img src="img/blog_post_featured.png" data-action="zoom">


It's the best way to zoom an image. It transitions/zooms in really smoothly, and then when you're done, scrolls away, [esc] keys away, clicks away clean af.

If you hold your meta key (`on mac) or (ctrl` on windows), it will open in a new tab. wow.

ps. use a data-original attr to link to a separate image. Just for meta-clicking tho.


zoom.js should (in theory) work in all relevant browsers (ie9+). If not, create an issue! Thanks!


Written by @fat, made better by you.

zoom.js open issues Ask a question     (View All Issues)
  • about 4 years Does not work when an <img> tag is in <a> tag
  • over 4 years Zoom not responsive
  • over 4 years Image blur issue
  • over 4 years could you create an AngularJS version?
  • over 4 years zoom on mobile
  • over 4 years Doesn't work with Bootstrap4
  • almost 5 years Image Blur - scale
  • almost 5 years update tags to 0.0.3
  • almost 5 years Image disappears on zoom
  • almost 5 years Right click on expanded image
  • about 5 years Adding a Zoom + Close icon
  • about 5 years Zoomed image is cut-off by parent overflow:hidden
  • about 5 years Add events
  • about 5 years It does not work on mobile browser
  • about 5 years Zoom out issue
  • about 5 years Blurring in desktop Chrome browsers
  • over 5 years And what about ajax version? It is my dream
  • over 5 years White horizontal lines in Chrome
  • over 5 years Support anchor to image link
  • over 5 years Need srcset support
  • over 5 years Overlay does not stop cursor changes or block click events.
  • almost 4 years if the img is new created by js, zoom doesn`t work. Is there a solution?
  • about 4 years Delay zoom out when scrolling
zoom.js open pull requests (View All Pulls)
  • fix chrome bug (blurred images when scaling) + changed z-index values
  • use data-original source when zoom in, add loading class
  • zoom on video too
  • .currentSrc with fallback .src
  • Added bower.json
  • Improve animation in chrome.
  • fix blurred image in chrome - Round translate parameters
  • Load the full images on click, Fix issue #46
  • change the zoom-overlay position to fix #70
  • Add big pic Support
  • Add semi colon
  • Save and restore the 'style' attribute of the original image.
zoom.js questions on Stackoverflow (View All Questions)
  • svg link touch events for svg-pan-zoom.js (on android browser)
  • SVG zoom with svg-pan-zoom.js performance issues in Mozilla Firefox
  • Centering <g> element after loading svg-pan-zoom.js
  • EE2 and zoom.js bigimage=$(this)
zoom.js list of languages used
zoom.js latest release notes
v0.0.1 v0.0.1

This first release of zoom.js

Other projects in JavaScript
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark