Biblioteca de zoom de imagen de estilo medio de JavaScript puro-zoom medio

Vista prévia

Descripción

medio-zoom es una biblioteca de JavaScript ligera y libre de dependencia que se utiliza para crear un efecto de zoom de imagen/lightbox sensible y fácil de usar como se ve en Medium.com páginas.

¿Cómo funciona?

Descargar y poner el medio-zoom JS & archivos CSS en la página HTML.

<link href="src/medium-zoom.css" rel="stylesheet">
<script src="src/medium-zoom.js"></script>

Añade el efecto de zoom a tus imágenes.

mediumZoom('.container img')

Aplique las siguientes opciones al efecto de zoom.

mediumZoom('.container img',{


// Space outside the zoomed image

margin: 0,


// Color of the overlay

background: "#fff",


// Number of pixels to scroll to dismiss the zoom

scrollOffset: 48,


// Enables the action on meta click (opens the link / image source)

metaClick: true,


// Custom template

template: ''


 })

API methods.

const myZoom = mediumZoom('.container img')

// show the zoom effect
myZoom.show()

// hide the zoom effect
myZoom.hide()

// toggle the zoom effect
myZoom.toggle()

// release the images related to the zoom from the plugin
myZoom.detach()

// update the options
myZoom.update({

// options here
})

// register the specified listener on each target of the zoom
myZoom.addEventListeners('hidden', () => {

// do something...
})

Events.

• Mostrar: Se desencadena cuando se llama al método de instancia de show
• se muestra: Se desencadena cuando el zoom ha terminado de animarse
• Hide: Se desencadena cuando se llama al método de instancia de ocultación
• oculto: Se dispara cuando el zoom hacia fuera ha terminado de ser animado
• separar: Se desencadena cuando se llama al método de instancia detach

Registro de cambios

v1.0.4 (04/06/2019)

• Traiga compatibilidad con SSR al no usar la ventana fuera de la función principal

v1.0.3 (01/20/2019)

• Actualización de JS

v1.0.2 (11/05/2018)

• arreglo: Utilice el tamaño de la ventanilla del documento

v1.0.0 (08/29/2018)

• feat (API): cambie el nombre de getZoomedTarget () a getZoomedImage ()

v0.4.0 (07/31/2018)

• Se han añadido más opciones, métodos y eventos.