zoom.js

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 about 3 years ago
Repo Created almost 5 years ago
Repo Last Updated 6 months 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 (36)
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 (?)
What people are saying about zoom.js Leave a review
Amazing
see above

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