@thadathilsinan/zoomable

Make any container inner contents zoomable.

Usage no npm install needed!

<script type="module">
  import thadathilsinanZoomable from 'https://cdn.skypack.dev/@thadathilsinan/zoomable';
</script>

README

Zoomable

Zoomable is a tiny node module to make the contents of any containers in HTML zoomable.

Demo: CodePen

Features

  • Zoom
  • Pan (with scrollbars)

Configuration

There is only few options you have to configure. These are the data you have to pass when initialising the library.

Parameter Name Description Required
idOfElement The ID of the container element Yes
minScale Minimum zoomable value (This is a number. 1 is the original size of the content) No (Default: 0.5)
maxScale Maximum zoomable value (This is a number. 1 is the original size of the content) No (Default: 10)
scaleSensitivity Sensitivity of zoom. (This is a number. If value if higher then zooming sensitivity will be low) No (Default: 10

Usage

Install the package using npm

npm install @thadathilsinan/zoomable

Import the module.

import initializeZoomable from "@thadathilsinan/zoomable";

Initialise the library

initializeZoomable(idOfElement, minScale, maxScale, scaleSensitivity);

Now your container will be zoomable. You can zoom the content by pressing Ctrl + Mouse Wheel or Trackpad zoom gesture You can pan the content after zoom in case of overflow by holding the Spacebar + Drag with mouse