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

Category: Image , Javascript , Zoom | December 16, 2022
Author:Emperorx3m
Views Total:1,186 views
Official Page:Go to website
Last Update:December 16, 2022
License:MIT

Preview:

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

Description:

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);
});

You Might Be Interested In:


Leave a Reply