Basic Image Zooming And Panning JavaScript Library

zoom.js is a really small JavaScript image zoom plugin which provides basic image zooming and panning functionalities to product images.

Click the image to enlarge and pan the image and move the cursor to pan the enlarged image.

How to use it:

Import the JavaScript file zoom.js into the document.

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

Add the attribute data-zoom to the image wrapper.

<figure data-zoom>
  <img src="https://source.unsplash.com/1600x900/?fitness" />
</figure>

Specify the maximum zoom level in the data-zoom-max attribute.

<figure data-zoom data-zoom-max="5">
  <img src="https://source.unsplash.com/1600x900/?fitness" />
</figure>