A lightweight TypeScript library for image zooming, as seen on Medium.
A running demonstration can be found here.
zoom.ts easily plugs into your application and starts listening to zoom events
as soon as the DOM is ready. The library accounts for just 4.2kB of bandwidth
once gzipped and requires no external bootstrapping.
Holding either the ⌘ or Ctrl key will open the image in a new tab when clicked. Zoomed images can be dismissed either by clicking the image, scrolling away, or pressing Esc.
Install the package via npm:
npm install --save zoom.ts
Then you can either link the JavaScript distribution file to have
zoom.ts listen on your webpage, or you can configure and include the library
itself your existing application.
To include and configure the library yourself, you will need to first @import
the stylesheet. Remember to define any overrides before
importing the stylesheet, for example:
$zoom-overlay-background-color: blue; // change overlay background to blue
$zoom-transition-duration: 1000; // slow down the transitions
@import '~zoom.ts/style';
Next you will need to import the library itself. In the example below, the
ready function will apply a callback as soon as the DOM has loaded, and
calling listener.start() will add an event listener to the DOM that will
respond to clicks on images marked as zoomable.
import { ready } from 'zoom.ts/lib/Document';
import { Listener } from 'zoom.ts/lib/Listener';
let listener: Listener = new Listener();
ready(() => {
listener.start();
console.log('zoom.ts started listening for click events...');
});
zoom__element to your <img>.<img> in a div with a class of zoom (i.e. <div class="zoom">)data-width and data-height attributes to the wrapper div.data-src attribute to the wrapper div.<!DOCTYPE html>
<html>
<body>
<div class="zoom" data-width="3500" data-height="2333" data-src="img/forest-full.jpg">
<img class="zoom__element" src="img/forest.jpg">
</div>
<script type="text/javascript" src="dist/zoom.js"></script>
</body>
</html>
The following scripts are configured to run via npm:
npm start
http://localhost:8080npm run build
./dist directory.npm run dist
./dist directory.npm run clean
./dist directory.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 2 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.