Biblioteca JavaScript de zoom de imagen simple-ImageZoom. js

Vista prévia

Descripción

ImageZoom. js es una biblioteca de JavaScript ligera y de dependencias cero que añade efectos de zoom a tus imágenes en el desplazamiento del ratón.

Funcionamiento

Incluye el archivo JavaScript ImageZoom. js y la hoja de estilo image_zoom. CSS en tu página HTML.

<script src="image_zoom.js"></script>
<link href="image_zoom.css" rel="stylesheet">

Agregue una imagen a la página.

<img src="demo.jpg">

Inicializar ImageZoom y listo.

new ImageZoom("img", {/*options*/});

Visualice la imagen ampliada junto a la imagen original.

new ImageZoom("img", {


target: {



right: 25


}
}),

Todas las opciones disponibles.

new ImageZoom("img", {



//
Maximum zoom level


maxZoom: 2,



// 1 is the full axis, 0 nothing


deadarea: 0.1,



// Duration of the animation of appearance/disappearance of the zoomed image


appearDuration: 0.5,



// Description of the target area.


 // If null, the target area will be the current image provided.


target: null,



// Explicit URL of the zoomed image.


 // If null, the source will be the attribute data-fullwidth-src of the image, or the attribute src of the image if the first is not defined


imageUrl: null,



// Background color used behind images with transparence


backgroundImageColor: null,



// If defined to false, source image deformations will be kept


forceNaturalProportions: true

}),

API methods.

imgZoom.enable();
imgZoom.disable();
imgZoom.delete();