Skip to content
Medium's Image Zoom for jQuery
Branch: master
Clone or download
Latest commit 8dfa215 Aug 7, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Limit zoom-out cursor to the zoomed image only May 12, 2015
dist rebuild Aug 7, 2015
img first commit Mar 28, 2014
js only translateZ for browser's with transition support (not ie9) Aug 7, 2015
.gitignore
MIT-LICENSE.txt
README.md
gulpfile.js add package.json, gulp file, banner and minify version May 8, 2015
index.html cleanup demo for mobile safari May 7, 2015
package.json ie9+ now Aug 7, 2015

README.md

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.

You can’t perform that action at this time.