A lightweight TypeScript library for image zooming, as seen on Medium.
A lightweight TypeScript library for image zooming, as seen on Medium.
Install the package via npm:
npm install --save zoom.ts
The example directory contains the code used to demonstrate
an application with zoom.ts
installed.
To integrate zoom.ts
into a static site, import the UMD module and
interface with the library via the global window.zoom
. The snippet below
demonstrates linking the bundle (dist/zoom.js
) and the stylesheet
(dist/zoom.css
). It then calls the listen
function to add an
event listener to the document.body
when the page is ready
.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dist/zoom.css">
<script type="text/javascript" src="dist/zoom.js"></script>
<script>window.zoom.listen();</script>
</head>
<body>
<img
class="zoom__image"
src="tower.jpeg"
data-width="2048"
data-height="1366"
data-src="tower-full.jpeg"
/>
</body>
</html>
To integrate zoom.ts
into a web application, follow the steps outlined below:
Features
of the document.body.style
ZoomListener
on the target imageZoom
instanceexpand
on the Zoom
instance to begin zooming the imagedestroy
on the Zoom
instanceThe snippet below demonstrates finding the first element with the zoom__image
class and adding a ZoomListener
to any click
events it fires. When fired,
the event listener will create a Zoom
instance and store it as a variable
named zoom
, then immediately expand the image. After 5 seconds have passed,
the zoom
will be forcefully removed via the call to destroy
.
import {
detectFeatures,
Zoom,
ZoomDOM,
ZoomListener
} from 'zoom.ts';
let features = detectFeatures(document.body.style); // (1)
let image = document.querySelector('.zoom__image'); // (2)
image.addEventListener('click', new ZoomListener(dom => { // (3)
let zoom = new Zoom(dom, features); // (4)
zoom.expand(); // (5)
setTimeout(() => {
zoom.destroy(); // (6)
}, 5000);
}));
Bug reports and pull requests are welcome on GitHub.
This project is available under the terms of the ISC license. See the
LICENSE
file for the copyright information and licensing terms.