zoom.js

Medium's Image Zoom for jQuery

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402 (1 ratings)
Rated 5.0 out of 5
Subscribe to updates I use zoom.js


Statistics on zoom.js

Number of watchers on Github 3459
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 10+
Closed pull requests 11+
Last commit about 2 years ago
Repo Created almost 4 years ago
Repo Last Updated 3 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 (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 (?)
What people are saying about zoom.js Leave a review
Amazing

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