Las imágenes GIF animadas son populares en Internet porque se pueden compartir y consumir fácilmente con bastante rapidez. Usando HTML básico, puede incrustar imágenes en una página que muestre animación, sin depender de ninguna otra tecnología. Por supuesto, hay complementos para animar sprites o fondos, pero los GIF son un concepto totalmente diferente.
En este tutorial quiero demostrar cómo podemos construir una galería de imágenes que optimiza la visualización de imágenes animadas. Puedes ver una característica muy similar en Giphy que también es donde descargué las imágenes para mi demostración. Estoy codificando mi propio método que no sigue exactamente el mismo proceso que Giphy, pero el resultado final es prácticamente idéntico y funciona muy bien para todos los navegadores modernos.
Demo en vivo - Descargar código fuente
Empezando
Primero debemos descargar una copia local de jQuery y guardarla junto con los otros archivos del proyecto. Estoy creando una página de índice junto con una hoja de estilo externa llamada styles.css.
Ahora, dentro del cuerpo, estoy configurando una lista desordenada de elementos de imagen. Como estas miniaturas son de diferentes tamaños, la pantalla se verá diferente según las dimensiones de la imagen. Estoy usando el HTML anchura y altura Atributos para configurar valores personalizados. Le da a las imágenes en miniatura tiempo adicional para cargar, por lo que el propio GIF no se demora demasiado.
Este ejemplo de código solo incluye dos elementos de la lista completa. Para cada imagen he guardado una copia del GIF animado, junto con una miniatura sólida de JPG. Este objeto de miniatura está envuelto por un enlace de anclaje que apunta hacia la imagen GIF animada. Así que ahora, cuando el usuario haga clic en una miniatura, irá directamente a la animación.
Pero igualmente podemos usar esto. href Valor como variable en jQuery. Entonces, cuando el usuario se desplaza sobre una imagen en miniatura, simplemente reemplazamos la imagen src para mostrar el GIF animado. Tenga en cuenta que tanto la miniatura como el GIF están dimensionados exactamente en las mismas dimensiones. De esta manera, nuestra configuración de ancho / alto HTML debería funcionar perfectamente en cualquiera de las imágenes.
Estilos CSS
No hay una gran cantidad de CSS para cubrir, pero quiero explicar la configuración de mi galería principal. #w es la envoltura exterior que se fija en un ancho de 750 px. Dentro tenemos un #contenido div que es un contenedor interno para las miniaturas. He etiquetado la lista desordenada con un ID de #giflist por el bien de aclarar mi selector jQuery.
Solo estoy diseñando los elementos de la lista interna para que puedan flotar a la izquierda uno junto al otro. Naturalmente, una vez que la siguiente imagen sea demasiado grande, se descompondrá en una nueva línea. Hay un espacio adicional con márgenes para asegurar suficiente espacio entre las miniaturas.
Además, como todos estos elementos internos están flotando, la lista desordenada normalmente no tendría un valor de altura. Se eliminaría completamente del flujo de páginas sin el uso de una clase .clearfix. Obviamente, podríamos agregar rasgos de interfaz más elegantes utilizando CSS3, pero estas propiedades fundamentales son suficientes para que la galería funcione sin problemas.
Reemplazo de imagen con jQuery
Agregar la pieza final a este rompecabezas viene con un pequeño controlador de eventos jQuery. En la parte inferior de mi página antes del cierre. Etiqueta que necesitamos para abrir un nuevo bloque de JavaScript. Los enlaces de anclaje que rodean las imágenes no son a nivel de bloque y, por lo tanto, no son algo que podamos apuntar con un detector de eventos. En cambio, estoy apuntando a las imágenes en sí mismas, y ejecutamos una nueva función cada vez que el usuario se desplaza sobre una de estas miniaturas de imágenes.
El método jQuery .hover () toma dos parámetros de devolución de llamada que he escrito como funciones. La primera se activará cuando el mouse del usuario ingrese al selector, y la segunda función se activará una vez que el mouse del usuario abandone el selector. Cuando se colocan por primera vez en la parte superior de la imagen, debemos extraer el valor href correspondiente del enlace de anclaje exterior.
Luego podemos reemplazar el valor de src de la imagen para mostrar ahora nuestra imagen GIF animada. Se reducirá su tamaño según los atributos de ancho / alto de HTML, pero también se cargará completamente en la memoria caché. Te habrás dado cuenta de que estoy usando un atributo de datos HTML5 con el nombre origen de datos. Una vez que reemplazamos el valor de src de la imagen con el gif animado, no hay una manera fácil de volver a la imagen en miniatura.
Entonces, en lugar de guardar esto en una variable, simplemente lo mantenemos local dentro de la etiqueta img.Ahora, cuando el usuario retira su mouse de la imagen, simplemente reemplazamos la fuente con una copia del valor de origen de datos. Esto coloca la miniatura no animada en su lugar, mientras que el GIF animado está a solo un clic (o al pasar el mouse).
Demo en vivo - Descargar código fuente
Clausura
El uso de una biblioteca de JavaScript como jQuery proporciona un excelente soporte para los navegadores web más nuevos. Una cosa a tener en cuenta es que en los dispositivos móviles, los usuarios tendrán que tocar cada miniatura para ver la animación en una nueva ventana. Pero la interfaz de usuario ha sido diseñada para funcionar perfectamente para todos los navegadores modernos e incluso versiones anteriores más antiguas con JavaScript habilitado. Siéntase libre de descargar una copia de mis códigos fuente y ver si puede implementar este efecto en proyectos web similares.