soy Kseso y esto EsCSS

Javascript con Furoya: jugando con visores y galerías de imágenes

En este artículo, colaboración de Furoya, a partir de una sencilla galería o visor de imágenes automática en puro Css realiza una serie de variaciones sobre la misma. Utilizando unas pocas líneas de javascript pasa a ser Manual y Autoslider y termina con una demo para ahorrar tráfico de datos cargando las imágenes a demanda

Javascript con Furoya: jugando con visores y galerías de imágenes

✎ 4
COLABORACIÓN AUTOR INVITADO

Hay en este blog infinidad de sliders Css con diferente mecánica y varios efectos visuales. No voy a agregar otro más (ni mucho menos), pero quería empezar esta entrega con uno en CSS puro, solamente para tomarlo como modelo y base para desarrollar este artículo.

No vamos a detenernos en el funcionamiento; es CSS y se supone que los seguidores del blog ya son capaces de entenderlo. Lo que sí comento es que estuve tentado de probarlo con sólo un keyframes y no lo hice porque aunque sí funcionaba, era complicar el código gratuitamente.

Por otro lado, la forma de destacar los bordes de las miniaturas es un truco que llamó la atención de nuestro anfitrión, así que algún mérito debe tener (y no, no son realmente bordes, porque eso no es animable para imágenes seriadas).

Lo que sí voy a explicar es la versión javascript de este slider automático, que a primera vista no tiene mayores diferencias, pero siempre conviene conocer las maneras clásicas de hacer un efecto y sus propias variantes.

Galería Automática

Verás que el código Html y los estilos Css son prácticamente los mismos del visor anterior. Una caja conteniendo las miniaturas y su hermana con las imágenes en grandes:

See the Pen Auto slider. With javascript. by solipsistaCP (@solipsistacp) on CodePen.

Los detalles del código fuente los tienes en el mismo pen. Y el script que sustituye las animaciones Css del anterior es el siguiente:

/* PARA GUARDAR EL setTimeout() Y LUEGO CANCELARLO CON clearTimeout */ var contador; /* ÍTEM DE IMAGEN INICIAL, QUE SE INCREMENTA Y REINICIA */ var cadaImagen = 0; function cambia() { /* LIMPIA CUALQUIER VUELTA DEL CONTADOR, POR LAS DUDAS */ clearTimeout(contador); /* LISTA TODAS LAS MINIATURAS */ var totalMiniaturas = document.querySelectorAll("#selectores img"); /* LISTA TODAS LAS IMÁGENES GRANDES */ var totalImagenes = document.querySelectorAll("#visor img"); for(animales=0; animales<totalImagenes.length; animales++) { /* RECORRE TODAS LAS MINIATURAS Y TRANSPARENTA LOS BORDES */ totalMiniaturas[animales].style.borderColor = "transparent"; /* RECORRE TODAS LAS IMÁGENES GRANDES Y LAS OCULTA */ totalImagenes[animales].style.visibility = "hidden"; } /* PINTA EL BORDE DE LA MINIATURA SEGÚN ÍTEM cadaImagen */ totalMiniaturas[cadaImagen].style.borderColor = "#ffea54"; /* MUESTRA LA IMAGEN GRANDE SEGÚN ÍTEM cadaImagen */ totalImagenes[cadaImagen].style.visibility = "visible"; /* AUMENTA EL NÚMERO DE ÍTEM EN cadaImagen PARA LA SIGUIENTE VUELTA, SI ES LA ÚLTIMA RECOMIENZA DESDE CERO */ cadaImagen = (cadaImagen == (totalImagenes.length - 1)) ? 0 : cadaImagen + 1; /* CUENTA 4000ms Y 'AUTOEJECUTA' LA FUNCIÓN PARA EMPEZAR OTRA VUELTA */ contador = setTimeout(cambia , 4000); } /* INICIA EL SLIDER AL CARGARSE LA PÁGINA */ onload = cambia;

Ya conocemos la mayoría de los códigos usados aquí. Pero vamos a darles un repaso.

  • Meter el setTimeout en una variable para después limpiarlo no parece tener mayor utilidad, pero la tendrá en la próxima versión de este slider.
  • Con querySelectorAll creamos un node list que contiene todos los elementos referenciados por el selector CSS que le escribamos entre los paréntesis; tenemos uno para las miniaturas y otro para las imágenes, y cada ítem se corresponde en misma la foto.
  • Por eso, elegimos cualquier node list y usamos sus números para recorrer ambos, y a uno le transparentamos los bordes para eliminar el destacado, mientras al otro le ocultamos todas las imágenes para que ya no se vea la que estuviere mostrando.
  • Luego usamos el valor de ítem guardado en la variable cadaImagen para elegir un nodo de cada lista (que en la de miniaturas y en la de vistas coinciden en la misma foto) y en el primero destacamos el color de borde mientras que en el segundo hacemos visible la imagen correspondiente.
  • Antes de repetir la función con el setTimeout, le sumamos "1" a la variable de cadaImagen o la volvemos a "0" si ya llegó a la última; como en el ejemplo son 6 que están ordenadas de 0 a 5 inclusive, para saber que el conteo llegó a "5" usamos el length (el total, que son las 6) y le restamos 1. El método sirve para cualquier cantidad de imágenes, por supuesto.

Como habrán visto, la mecánica de ambos ejemplos (el inicial puro Css y éste con Js) es totalmente distinta. En la versión CSS se desplazan capas o fondos con keyframes sincronizados.

En la versión javascript ya se aplican formatos directamente a cada imagen, y las fotos grandes están ubicadas una delante de la otra (y en el mismo orden que las miniaturas) para no tener que desplazarlas: con cambiar su visibilidad es suficiente, porque todas están en las mismas coordenadas.

Ya dejamos claro en artículos anteriores que además de dar formato inline a un elemento, también se le puede dar una clase. Esto permite asignar animaciones CSS y pseudoelementos que ayudan a las transiciones y efectos varios en nuestro proyecto.

Galería Manual y Automática

Hasta ahora he presentado unas galerías automáticas, pero con JS se puede saltar de una imagen a otra alterando la secuencia para un slider manual. Haciendo click en una cualquiera forzamos a que se vea, y luego la muestra automática puede seguir desde ahí.

See the Pen Manual and auto slider. With javascript. by solipsistaCP (@solipsistacp) on CodePen.

El HTML es practicamente el mismo. Y el javascript también. Solamente se agregó una función que ahora captura los nodos para las listas una sola vez, y no como el previo, que lo hacía con cada vuelta y era bastante ineficiente. Además escribe en cada miniatura un atributo onclick que reemplaza el valor de la variable cadaImagen con su propio ítem y dispara la función cambia(), que entonces va a mostrar la imagen elegida.

<img src="Ruta" onclick="cadaImagen=I, cambia()" title="Autor" />

Y aquí sí es importante limpiar el setTimeout, porque al disparar otra vez la función en medio del conteo hay que detener la vuelta anterior, y que no se sumen.

Galería Manual con "carga a demanda"

Para terminar, un ejemplo por el que se deben estar preguntando todos.

En algún artículo anterior mostré al pasar como se cambiaba una imagen haciendo click en otra, evidentemente servía para hacer una galería manual, pero no se mostraban u ocultaban las imágenes, sino que se usaba una etiqueta img a la que se le cambiaba el src.

El método para Manual y Autoslider tiene una ventaja: las imágenes se cargan todas y no hay espera entre cambios, pero consume banda aún cuando no miremos las fotos.

Éste con un solo elemento de imagen tiene que cargar el archivo cada vez que reescribe el valor del atributo src y eso puede producir parpadeos entre cambios, pero solamente baja las que pedimos y es un ahorro para conexiones que se pagan por tráfico.

Si a alguien le interesa, dejo una versión más limpia del slider manual.

See the Pen Manual slider. With javascript. by solipsistaCP (@solipsistacp) on CodePen.

Ver Demo en Codepen

Estoy aprovechando los sitios que ofrecen versiones de la misma foto en muchos tamaños, y que en verdad tienen la misma ruta, solamente se diferencian en el parámetro que les da la resolución. Así que uso el source de la miniatura, y le reemplazo nada más que el valor que asigna las medidas, para meterlo en la imagen grande del visor.

Pero nada impide usar dos archivos de imagen distintos, cada uno con su ruta. En el peor de los casos, se pasa la ruta de destino completa como argumento de la función.

Furoya: Autor del artículo

Artículo original de Furoya.
La intención del autor con sus colaboraciones no es que los artículos sirvan para hacer un copy&paste de códigos sino que comprendas y aprendas la lógica y el cómo trabaja javaScript.
Y a partir de lo expuesto experimentes tú.
El autor del post y el editor del blog te animamos a que plantees tus dudas o reflexiones y que compartas tus realizaciones en base a lo expuesto en los comentarios. Recuerda que puedes incluir pens (ejemplos en Codepen.io) en ellos.