August 2020: I will be actively maintaining this repository again, reviewing pull requests, and implementing features in the next 2 months. The plan is to release a new major version with a more versatile API and better support for <figure>
elements, srcset
attributes, etc. I apologize for any lack of activity and response earlier.
May 2020: This package is not actively developed, except for pull requests which will be actively reviewed + merged.
A pure JavaScript image zooming plugin; as seen on Medium.com.
Has no jQuery or Bootstrap dependencies.
This is a port of the original version by @fat: https://github.com/fat/zoom.js.
You can use zoom.js directly as a script, or install via npm.
<link href="css/zoom.css" rel="stylesheet">
<script src="dist/zoom.js"></script>
data-action="zoom"
attribute to the images you want to make zoomable. For example:<img src="img/blog_post_featured.png" data-action="zoom">
npm i @nishanths/zoom.js
<link href="css/zoom.css" rel="stylesheet">
zoom.setup(elem)
for each image you want to make zoomable.import { zoom } from "@nishanths/zoom.js";
var imgElem = new Image();
imgElem.src = "tree.png";
document.body.appendChild(imgElem);
zoom.setup(imgElem);
https://nishanths.github.io/zoom.js
It has the same behavior and all the features from the original implementation. But:
* In addition to the dist/ scripts, it's available as an npm module.
* Browser compatibility may be lower. Uses the transitionend event without
vendor prefixes, so IE 10 or higher.
Author: nishanths
Demo: https://nishanths.github.io/zoom.js/
Source Code: https://github.com/nishanths/zoom.js
#jquery #javascript