zoom.ts

zoom.ts

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 4kB of bandwidth once gzipped and requires no third-party libraries.

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.

Installation

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 { startListening } from 'zoom.ts/lib/Zoom';

ready(() => {
    startListening();
    console.log('zoom.ts started listening for click events...');
});

Usage

  1. Add the class zoom__element to your <img>.
  2. Wrap your <img> in a block-level element with a class of zoom (i.e. <figure class="zoom">)
  3. A width and height can be configured to specify the dimensions that the expanded image should size to by add the data-width and data-height attributes to the wrapper element.
  4. The loading of a big image can be deferred by adding the data-src attribute to the wrapper element.
<!DOCTYPE html>
<html>
  <body>
    <figure class="zoom" data-width="3500" data-height="2333" data-src="img/forest-full.jpg">
      <img class="zoom__element" src="img/forest.jpg">
    </figure>

    <script type="text/javascript" src="dist/zoom.js"></script>
  </body>
</html>

Building

The following scripts are configured to run via npm:

  • npm start
  • npm run build
    • Builds the distribution and places it under the ./dist directory.
  • npm run dist
    • Builds, minifies, and optimizes the distirbution and places it under the ./dist directory.
  • npm run clean
    • Cleans the ./dist directory.

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.