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.

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.

1. Download dist/zoom-vanilla.min.js and css/zoom.css from GitHub, or install via npm by running npm i zoom-vanilla.js.

2. Add the zoom-vanilla.min.js and zoom.css files to your HTML page:

<link href="css/zoom.css" rel="stylesheet">
<script src="dist/zoom-vanilla.min.js"></script>

3. 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!

• Clone this repository and run npm i before starting development.
• To easily view the demo page, the project comes bundled with an HTTP server. Start it by executing npm start.
• To build the minified JS, execute npm run build.
• While developing, it gets annoying to keep executing npm run build every time a change is made. Instead execute npm run watch which will watch the zoom-vanilla.js file for changes and create the minified JS automatically.