Zoom & Drag Images Using Mouse Drag And Pinch Gestures – HoverPinchZoom.js

HoverPinchZoom.js is a JavaScript image zoom & pan library that works seamlessly on both desktop and mobile devices.

With the HoverPinchZoom library, you can easily add hover-to-zoom and pinch-to-zoom functionalities to any image on the web app.

How to use it:

1. Download and load the HoverPinchZoom.js library in the document.

<script src="/hover-pinch-zoom.js"></script>

2. Initialize the HoverPinchZoom.js on the image. That’s it.

<div class="hover-pinch-zoom-img" style="width:30vw; height: 70vh;">
  <img class="demo" src="example.png" />
</div>

document.addEventListener("DOMContentLoaded", function (event) {
  var el = document.querySelector('div.hover-pinch-zoom-img');
  init_zoom(el);
});