ZooMove jQuery Plugin para ampliar las imágenes al pasar el cursor

Si alguna vez ha navegado por un sitio de comercio electrónico, probablemente haya visto el efecto de zoom de la imagen. Pasas el cursor sobre una foto del producto y esa parte de la imagen se amplía para un vista más clara.

los Complemento de ZooMove es una gran manera de replicar este efecto en tu sitio. Sus impulsado por jQuery, para que puedas ponerlo en marcha rápidamente sin mucho código.

ZooMove es completamente gratuito y de código abierto, disponible. en GitHub Para cualquier desarrollador curioso. Se puede instalar a través de. npm, Cenador, Hilo, o descargado directamente desde CDNJS.

Para configurar una imagen de ZooMove, necesitarás tres archivos específicos en el encabezado de tu página:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Ambos archivos de ZooMove puede ser minificado Si quieres cargas de páginas más rápidas. También puede combinar el archivo CSS en su hoja de estilos principal si eso es más fácil.

Toda la magia real pasa en el HTML donde puedes configurar HTML5 atributos de datos por los diferentes efectos.

Esto te permite elaborar tu propio efecto de zoom personalizado Basado en cuatro parámetros diferentes:

1. escala de datos del zoológico - define el tamaño total del zoom cuando se desplaza (por ejemplo, 2.0 para 200%)
2. movimiento de datos en el zoológico - define si la imagen se mueve junto con el cursor
3. data-zoo-over - define la imagen ampliada aparece sobre el original
4. datos-zoo-cursor - define el punto del cursor

Un quinto parámetro final le permite definir lo que nueva URL de imagen debe ser (si es necesario).

Puede utilizar ZooMove en todos los navegadores principales, incluido IE9 +. Este plugin es ampliamente apoyado y ofrece una excelente experiencia de usuario.

Si estas buscando un simple libreta de hover a zoom ZooMove es una excelente opción. Sus lo suficientemente ligero para ejecutar en cualquier sitio web y es impulsado por jQuery, para que no tengas que escribir tanto código para que funcione.

Visite la página principal para verlo en acción y consulte la documentación en GitHub para obtener más información..