_ _ _ _ (_) | | (_) _______ ___ _ __ ___ ________ ____ _ _ __ _| | | __ _ _ ___ |_ / _ \ / _ \| '_ ` _ \______\ \ / / _` | '_ \| | | |/ _` | | / __| / / (_) | (_) | | | | | | \ V / (_| | | | | | | | (_| |_| \__ \ /___\___/ \___/|_| |_| |_| \_/ \__,_|_| |_|_|_|_|\__,_(_) |___/ _/ | |__/
Live demo: zoom-vanilla.js in action.
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 jQuery plugin by fat. These are the key differences:
Equivalentsmaller file size (the minified version is slightly smaller due to better minification)
- Includes bug fixes not present in fat/zoom.js, which is no longer being maintained
Download the JS and CSS files using any of the following methods:
npm i -D zoom-vanilla.js. This will download the the necessary files to the
Directly link to the files hosted on a CDN:
zoom.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>
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 repo
npm ito install dev dependencies
npm startto start a simple HTTP server (makes it easy to view the demo page)
npm run buildto build the minified JS and vendor-prefixed CSS
npm run watchto rebuild when any JS files change (recommended for development)