_ _ _ _
(_) | | (_)
_______ ___ _ __ ___ ________ ____ _ _ __ _| | | __ _ _ ___
|_ / _ \ / _ \| '_ ` _ \______\ \ / / _` | '_ \| | | |/ _` | | / __|
/ / (_) | (_) | | | | | | \ 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:
- No jQuery dependency; vanilla JavaScript only
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:
npm i zoom-vanilla.js. This will download the the necessary files to thenode_modules/zoom-vanilla.js/dist/directory. -
Directly link to the files hosted on a CDN:
-
Manually download
dist/zoom-vanilla.min.jsanddist/zoom.cssfrom GitHub
-
-
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 "zoom-vanilla.js/dist/zoom.css" import "zoom-vanilla.js/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)