A simple library for image zooming; as seen on Medium.
This is a fork of the jQuery plugin by fat. This version does not depend on jQuery or any third-party libraries and is of equivalent file size.
Live demo: https://spinningarrow.github.io/zoom-vanilla.js
It zooms in really smoothly, and zooms out when you click again, scroll away, or press the esc key.
If you hold the ⌘ or Ctrl key when clicking the image, it will open the image in a new tab instead of zooming it.
-
Download
dist/zoom-vanilla.min.jsandcss/zoom.cssfrom GitHub, or install via npm by runningnpm i zoom-vanilla.js. -
Add the
zoom-vanilla.min.jsandzoom.cssfiles to your HTML page:
<!-- before </body> -->">
<link href="css/zoom.css" rel="stylesheet"> <!-- inside <head> --> <script src="dist/zoom-vanilla.min.js"></script> <!-- before </body> -->
- Add a
data-action="zoom"attribute to the images you want to make zoomable:
<img src="img/blog_post_featured.png" data-action="zoom">zoom-vanilla.js should (in theory) work in all modern browsers. If not, create an issue! Thanks!
- The image is appended to the body; use an appropriate CSS selector for extra styling
- Zooming may not be quite right if the aspect ratio of the image is changed
git clonethe reponpm ito install dev dependenciesnpm startto start a simple HTTP server (makes it easy to view the demo page)npm run buildto build the minified JSnpm run watchto rebuild when any files change (recommended for development)
