Zoom & Pan Images With Mouse Interactions – dmuka.Zoom

Category: Image , Javascript , Zoom | October 21, 2018
Views Total:1,639 views
Official Page:Go to website
Last Update:October 21, 2018


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 () {
      // ...

You Might Be Interested In:

Leave a Reply