Basic Image Zooming And Panning JavaScript Library

Category: Javascript , Zoom | March 19, 2019
Author:theuves
Views Total:1,721 views
Official Page:Go to website
Last Update:March 19, 2019
License:MIT

Preview:

Basic Image Zooming And Panning JavaScript Library

Description:

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>

You Might Be Interested In:


Leave a Reply