A simple jQuery plugin for image zooming; as seen on Medium.
- Removed emulation of the transitionend event, which requires Bootstrap's transition.js (our copy of Bootstrap is out of date)
- 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>- zoom.js is dependent on transition.js file from Bootstrap, so make sure to include that as well.
<script src="js/transition.js"></script>- 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.