Zoom & panorámica de imágenes con interacciones de ratón-dmuka. Zoom

Vista prévia

Descripción

El dmuka. La biblioteca JavaScript de zoom permite al usuario zoom images con la rueda del ratón y pan imágenes ampliadas con el mouse Hover & movimiento.

Funcionamiento

Inserte el dmuka. Zoom de JavaScript y hoja de estilos en el documento.

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

Inicialice la biblioteca y especifique la imagen que desea acercar.

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

var zoom = new dmuka.Zoom({


element: document.querySelector("img")
});

Config la dmuka. Amplíe con las siguientes opciones.

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



// ...


}

});