zoom.js

Medium's Image Zoom for jQuery

Subscribe to updates I use zoom.js


Statistics on zoom.js

Number of watchers on Github 3329
Number of open issues 30
Average time to close an issue 18 days
Main language JavaScript
Average time to merge a PR 5 days
Open pull requests 9+
Closed pull requests 11+
Last commit over 1 year ago
Repo Created over 3 years ago
Repo Last Updated 12 days ago
Size 1.65 MB
Homepage https://fat.githu...
Organization / Authorfat
Latest Releasev0.0.1
Contributors7
Page Updated
Do you use zoom.js? Leave a review!
View open issues (30)
View zoom.js activity
View on github
Latest Open Source Launches
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating zoom.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

ZOOM.JS

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

Demo

https://fat.github.io/zoom.js

How

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

Why

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.

Where

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

Who

Written by @fat, made better by you.

zoom.js open issues Ask a question     (View All Issues)
  • 5 months Does not work when an <img> tag is in <a> tag
  • 6 months Zoom not responsive
  • 6 months Image blur issue
  • 10 months could you create an AngularJS version?
  • 10 months zoom on mobile
  • 11 months Doesn't work with Bootstrap4
  • about 1 year Image Blur - scale
  • about 1 year update tags to 0.0.3
  • about 1 year Image disappears on zoom
  • about 1 year Right click on expanded image
  • over 1 year Adding a Zoom + Close icon
  • over 1 year Zoomed image is cut-off by parent overflow:hidden
  • over 1 year Add events
  • over 1 year It does not work on mobile browser
  • over 1 year Zoom out issue
  • over 1 year Blurring in desktop Chrome browsers
  • over 1 year And what about ajax version? It is my dream
  • over 1 year White horizontal lines in Chrome
  • over 1 year Support anchor to image link
  • over 1 year Need srcset support
  • almost 2 years Overlay does not stop cursor changes or block click events.
  • 2 months if the img is new created by js, zoom doesn`t work. Is there a solution?
  • 3 months 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
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