zoom-element

A simplistic, compatible library to zoom and pan your elements.

Installation

Use NPM

npm install --save zoom-element

or

Use Yarn

yarn add zoom-element

Usage

This is how you create a simple zoom element.

import ZoomArea from 'zoom-element';

// Initialize element id to the class. It defaults to zoom-area.

const zoomArea = new ZoomArea('some-id', {
  minZoom: 0.3, // this defaults to 0.2
  maxZoom: 3.5, // this defaults to 2.5
  initialScale: 0.5, // this defaults to 1 
  zoomScale: 0.1, // this defaults to 0.1 
});

const ele1 = document.getElementById('element-1');
const ele2 = document.getElementById('element-2');
const ele3 = document.getElementById('element-3');

// this will zoom in the given element. 
zoomArea.zoomIn();


// this will zoom out the given element. 
zoomArea.zoomOut();

// this will reset the given element to its original size and position. 
zoomArea.reset();


// OTHER USE CASES

// Zoom In on click
ele1.onclick = zoomArea.zoomIn;

// Zoom out on click
ele2.onclick = zoomArea.zoomOut;

// Zoom reset on click
ele3.onclick = zoomArea.reset;