Zoom & Pan Images With Mouse Interactions – dmuka.Zoom

Category: Image , Javascript , Zoom | October 21, 2018
Author: muhammet-kandemir-95
Views Total: 1,242
Official Page: Go to website
Last Update: October 21, 2018
License: MIT

Preview:

Zoom & Pan Images With Mouse Interactions – dmuka.Zoom

Description:

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