zoom.ts
Advanced tools
Readme
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.styleZoomListener 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 { Features, Zoom, ZoomDOM, ZoomListener } from 'zoom.ts';
let features = Features.of(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.
FAQs
A lightweight TypeScript library for image zooming, as seen on Medium.
The npm package zoom.ts receives a total of 42 weekly downloads. As such, zoom.ts popularity was classified as not popular.
We found that zoom.ts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.