Zoom & Pan Images With Mouse Interactions – dmuka.Zoom

The dmuka.Zoom JavaScript library enables your user to zoom images with the mouse wheel and pan zoomed images with mouse hover & movement.

How to use it:

Insert the dmuka.Zoom’s JavaScript and Stylesheet into the document.

<link rel="stylesheet" href="/dmuka.Zoom/main.css">
<script src="/dmuka.Zoom/main.js"></script>

Initialize the library and specify the image to zoom.

<img src="https://picsum.photos/600/500/?random">

var zoom = new dmuka.Zoom({
    element: document.querySelector("img")
});

Config the dmuka.Zoom with the following options.

var zoom = new dmuka.Zoom({
    element: document.querySelector("img"),
    // Transform scale increment
    increment: 0.3,
    // Transform min scale
    minZoom: 0.2,
    // Transform max scale
    maxZoom: 10,
    // Animate enable
    transitionEnable: true,
    // Element append to new parent element
    parentEnable: true,
    // If added parent then classes will add to parent
    parentClasses: "",
    // If added parent then overflow css will add to parent
    parentOverflow: "hidden",
    // If added parent then padding css will add to parent
    parentPadding: 20
    
});

Event handlers which will be triggered when the image is zoomed and moved.

var zoom = new dmuka.Zoom({
    onZoom: function () {
      // ...
    },
    onMove: function () {
      // ...
    }
});