❤
npm
Sign UpSign In

zoom.ts
TypeScript icon, indicating that this package has built-in type declarations

8.0.0 • Public • Published

zoom.ts

A lightweight TypeScript library for image zooming, as seen on Medium.

Demo

npm version npm downloads software license
build status coverage status


example



Installation

Install the package via npm:

npm install --save zoom.ts

Usage

The example directory contains the code used to demonstrate an application with zoom.ts installed.

Static Site

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>

Application

To integrate zoom.ts into a web application, follow the steps outlined below:

  1. Detect and store the Features of the document.body.style
  2. Locate the element you wish to make zoomable
  3. Register a ZoomListener on the target image
  4. In the listener's callback, create and store a Zoom instance
  5. Call expand on the Zoom instance to begin zooming the image
  6. If the user navigates to a different page in the application, call destroy on the Zoom instance

The 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);
}));

Contributing

Bug reports and pull requests are welcome on GitHub.

License

This project is available under the terms of the ISC license. See the LICENSE file for the copyright information and licensing terms.

Dependencies (0)

    Dev Dependencies (30)

    Package Sidebar

    Install

    npm i zoom.ts

    Repository

    github.com/michaelbull/zoom.ts

    Homepage

    github.com/michaelbull/zoom.ts

    Weekly Downloads

    57

    Version

    8.0.0

    License

    ISC

    Unpacked Size

    7.3 MB

    Total Files

    96

    Last publish

    Collaborators

    • michaelbull
    Try on RunKit
    Report malware