A simple library for image zooming; as seen on Medium. 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.
This is a fork of the zoom-vanilla.js. Please refer to the original doc and repo for demos and more details. These are the key differences:
- No offset on the enlarged images.
-
Download the JS and CSS files by:
- Manually download
dist/zoom-vanilla.min.jsanddist/zoom.cssfrom GitHub
- Manually download
-
Add the
zoom-vanilla.min.jsandzoom.cssfiles to your HTML page:<!-- inside <head> --> <link href="path/to/dist/zoom.css" rel="stylesheet"> <!-- before </body> --> <script src="path/to/dist/zoom-vanilla.min.js"></script>
You can also
importthem if you're using webpack:import "path/to/dist/zoom.css" import "path/to/dist/zoom-vanilla.min.js"
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 JS and vendor-prefixed CSSnpm run watchto rebuild when any JS files change (recommended for development)