Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Crear una biblioteca de zoom de imagen con JavaScript de Vanilla

En este tutorial vamos a construir una biblioteca simple de JavaScript para agregar efectos de zoom al pasar el mouse sobre las imágenes. Crearemos toda la biblioteca desde cero, sin depender de jQuery ni de ninguna otra dependencia externa. ¡Vamos a entrar!

El proyecto

Puede ver este tipo de efecto en muchos sitios de compras, incluidos los muy populares como eBay y Amazon . Por lo general, consiste en un grupo de fotos pequeñas que se pueden ampliar e inspeccionar con más detalle con una lupa suspendida.
Nuestra biblioteca en acción
Para simplificar el tutorial, no agregaremos demasiadas funciones a la biblioteca. Contendrá solo un archivo JavaScript, más un archivo CSS opcional para diseñar rápidamente una galería como la anterior.

Diseñando la biblioteca

Antes de comenzar a construir la biblioteca, echemos un vistazo a cómo queremos que la gente la use. Tomar esa decisión de diseño primero facilitará el desarrollo de la biblioteca real más adelante.
Como estamos haciendo un complemento de galería, las personas que lo usen necesitarán tener un HTML repetitivo. Este marcado contendrá sus imágenes, un espacio vacío divpara el efecto de zoom, así como algunas clases predefinidas para que la biblioteca funcione.
< div  id = "my-gallery"  class = "vanilla-zoom" > 
    < div  class = "sidebar" > 
        < img  src = "images / image-1.jpg"  class = "small-preview" > 
        < img  src = "images / image-2.jpg"  class = "small-preview" > 
        < img  src = "images / image-3.jpg"  class = "small-preview" > 
    </ div > 
    < clase div = "imagen ampliada" > </ div > 
</ div >
Las personas son libres de cambiar este diseño y agregar tantas imágenes como quieran. Sin embargo, es importante que cada imagen tenga la .small-previewclase y que haya un div vacío con la .zoomed-imageclase.
La biblioteca estará impulsada principalmente por JavaScript, pero también hay algunos estilos CSS importantes que deben establecerse. Los usuarios pueden incluir nuestro archivo CSS directamente en su HTML.
< link  rel = "stylesheet"  href = "vanilla-zoom / vanilla-zoom.css" >
Ahora que el marcado y los estilos están configurados, todo lo que queda es incluir la biblioteca e inicializarla.
< script  src = "vanilla-zoom / vanilla-zoom.js" ></ script > 
< script > 
    vanillaZoom.init ( '# mi-galería' );
</ script >
La inclusión del archivo .js de la biblioteca hace que el vanillaZoomobjeto esté disponible globalmente. El objeto tiene solo un método que es para inicializar el complemento. Se necesita un solo parámetro: la identificación de nuestra galería. De esta manera podemos tener múltiples galerías independientes inicializadas en una página.

Desarrollando la biblioteca

Al crear bibliotecas de JavaScript front-end, debemos asegurarnos de registrar su API correctamente. Hay muchas formas de hacer esto, posiblemente la más fácil de las cuales es este método de Jordan Checkman. Le recomendamos que lea su publicación de blog completa, pero en resumen se reduce a esto:
( función ( ventana ) {
   function  define_library () {
     // Cree el objeto de biblioteca y todas sus propiedades y métodos. 
    var vanillaZoom = {};
    vanillaZoom.init = function ( galleryId ) {
       // La lógica de nuestra biblioteca va aquí.
    }
    volver vanillaZoom;
  }

  // Agregue el objeto vanillaZoom al ámbito global si aún no está definido. 
  if ( typeof (vanillaZoom) === 'undefined' ) {
     window .vanillaZoom = define_library ();
  }
  else {
     console .log ( "Biblioteca ya definida" );
  }
}) ( ventana );
El código anterior está envuelto en una función de ejecución automática. De esta forma, cuando agreguemos el vanilla-zoom.jsarchivo a nuestro proyecto, la biblioteca se registrará automáticamente y el vanillaZoomobjeto con todos sus métodos estará disponible para el usuario.
Nuestra biblioteca tiene sólo un método - vanillaZoom.init(galleryId)Su trabajo es seleccionar los elementos DOM de la galería y agregarles oyentes de eventos.
Primero verificamos si se han agregado los elementos adecuados al HTML y los seleccionamos. No podemos usar jQuery, por lo que debemos confiar en los métodos nativos de JavaScript para trabajar con el DOM.
contenedor var = documento .querySelector (el);

if (! container) {
     console .error ( 'Por favor, especifique la clase correcta de su galería.' );
    volver ;
}

var firstSmallImage = container.querySelector ( '.small-preview' );
var zoomedImage = container.querySelector ( '.zoomed-image' );

if (! zoomedImage) {
     console .error ( 'Agregue un elemento .zoomed-image a su galería.' );
    volver ;
}

if (! firstSmallImage) {
     console .error ( 'Agregue imágenes con la clase .small-preview a su galería.' );
    volver ;
}
else {
     // Establece la fuente de la imagen ampliada. 
    zoomedImage.style.backgroundImage = 'url (' + firstSmallImage.src + ')' ;
}
En la última línea del código anterior tomamos la fuente de imagen de una de las imágenes de vista previa y la configuramos como el fondo de nuestro elemento con zoom. Esto sucede tan pronto como vanillaZoom.init(galleryId)se llama, asegurándose de que nuestra galería no permanezca vacía.
Hacemos lo mismo cuando se hace clic en una de las vistas previas. Esto permite al usuario seleccionar qué imagen desea ampliar.
container.addEventListener ( "clic" , función ( evento ) {
   var elem = event.target;

  if (elem.classList.contains ( "small-preview" )) {
      zoomedImage.style.backgroundImage = 'url (' + elem.src + ')' ;
  }
});
Seleccionar imágenes
El elemento de lupa tiene un par de oyentes de eventos conectados. El primero se activa cuando el cursor ingresa al elemento, aumentando el tamaño de la imagen de fondo, creando así un efecto de zoom.
zoomedImage.addEventListener ( 'mouseenter' , función ( e ) {
     this .style.backgroundSize = "250%" ;
}, falso );
Como la imagen ahora es muy grande, no cabe en el contenedor y solo una parte de ella será visible. Queremos que los usuarios puedan seleccionar qué parte de la imagen se amplía, por lo que agregamos un detector de movimiento del mouse que cambia la posición del fondo.
zoomedImage.addEventListener ( 'mousemove' , función ( e ) {

  // getBoundingClientReact nos brinda información variada sobre la posición del elemento. 
  var dimentions = this .getBoundingClientRect ();

  // Calcular la posición del cursor dentro del elemento (en píxeles). 
  var x = e.clientX - dimentions.left;
  var y = e.clientY - dimentions.top;

  // Calcular la posición del cursor como un porcentaje del tamaño total del elemento. 
  var xpercent = Math .round ( 100 / (dimentions.width / x));
  var ypercent = Math .round ( 100 / (dimentions.height / y));

  // Actualiza la posición de fondo de la imagen. 
  this .style.backgroundPosition = xpercent + '%' + ypercent + '%' ;

}, falso );
Ampliación de una parte específica de la imagen
Cuando el cursor sale de la imagen ampliada, queremos que vuelva a la normalidad. Esto se hace fácilmente devolviendo el tamaño coverdel fondo y la posición del fondo center.
zoomedImage.addEventListener ( 'mouseleave' , function ( e ) {
     this .style.backgroundSize = "cover" ; 
     this .style.backgroundPosition = "center" ;
}, falso );
Y con eso, ¡hemos terminado!

Soporte de navegador

La biblioteca debería funcionar en todos los navegadores de escritorio modernos, aunque algunos de los CSS de flexbox pueden no mostrarse correctamente en IE más antiguos.
Lamentablemente, el efecto de zoom no se traduce muy bien en dispositivos táctiles. Debido a esto y al espacio limitado de la pantalla, es mejor presentar sus imágenes de otra manera para dispositivos móviles. En nuestro CSS simplemente ocultamos el elemento de zoom y enumeramos las imágenes verticalmente, pero puede probar otras soluciones, como un carrusel.

Conclusión

Puede obtener el código fuente completo de este artículo, así como el código de demostración (con imágenes cortesía de Burst ), desde el botón Descargar cerca de la parte superior de la página. Puede utilizar la biblioteca en todos sus proyectos, comerciales o personales ( nuestra licencia ). ¡Feliz codificación!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas