Touch-enabled Image Zoom & Pan Library – Zoomy.js

Preview:

Description:

Zoomy.js is a tiny JavaScript plugin for adding smooth zooming and panning experiences to images on your sites or web apps.

Whether it’s a high-definition photograph, a detailed graphic design, or an intricate data visualization, Zoomy.js ensures your users can explore every nook and cranny with ease and precision.

How to use it:

1. Download and import the Zoomy.js into the document.

<script src="Zoomy.js"></script>

2. Add your zoomable and pannable image to a boundary element as follows:

<div id="boundaryElement">
  <img class="zoomables" id="zoomy" src="1.jpg" alt="Image" />
</div>

3. Initialize the Zoomy.js plugin.

const myZoomy = new Zoomy("zoomy", {
      boundaryElementId: 'boundaryElement'
});

4. Determine the max zoom factor. Default: 4.

const myZoomy = new Zoomy("zoomy", {
      zoomUpperConstraint: 2,
});

5. Enable & disable the plugin manually.

// enable
myZoomy.enable()
// disable
myZoomy.disable()

Changelog:

09/05/2023

• Update