Cómo crear una galería de imágenes con Javascript

En este artículo os voy a mostrar el uso de un objeto en JavaScript que produce galerías de imágenes con unos (limitada) efectos de transición. El script es comprensible y fácil de usar. Si siempre has tenido curiosidad por saver cómo se implementan las galerías de imágenes con sus transiciones, efectos y demás, este es el momento de aprender. ¿Estás preparado? Pues allá vamos...

El código

Vamos a introducir el archivo que generará todo esto en nuestro HTML. Si contamos con un directorio para los archivos JS quedaría tal que así:

<script type='text/javascript' src='js/gallery.js'></script>

Cuando se cargue el script, creará un objeto de galería que cuenta con una función para la creación de una galería basada en un array de argumentos que contienen información como la dimensión, el tiempo de visibilidad de las imágenes, el efecto y, obviamente, los nombres de las imágenes. A excepción de los nombres de las imágenes, toda la información es opcional.

<script type='text/javascript'>
var args = {"width":300,"Height":300,"duration":5000,"transition":2000,"effect":"fade","id":"divGallery",
            "images":[["img/TramVenaria.jpg","Tramway at Venaria castle"],["img/Olimpo.jpg","Mount Olympus"],"img/ConteVerde.jpg",
                ["img/RabbitLake.jpg","Rabbit lake"],["img/Bukavu.png","Bukavu and lake Kiwu"],"img/Burkina.png"]}
slideGallery.gallery(args);
</script>

Se puede usar tanto la key como el nombre a la hora de utilizar un efecto.

Imágenes y dimensión de imágenes

El argumento images hace referencia a una lista de imágenes alojadas en el servidor. Si queremos añadir un título a una imagen en cuestión, en lugar de ser un nombre del fichero, puede ser un conjunto de dos elementos formado por el nombre del fichero y el título: ..., ["img / Bukavu.png", "Bukavu y el lago Kiwu "]," img / Burkina.png ", ...; los argumentos width y height controlan la dimensión de la galería; lo ideal es tener las imágenes con la dimensión exacta, por lo tanto, el programa se ajustará a las imágenes con los valores requeridos, sin tener que redimensionar y expandir ni estrechar imágenes. El algoritmo utilizado para ello es el siguiente:

var normImg = function (wOrigin,hOrigin,wSlide,hSlide) {
	if ((wOrigin == wSlide) && (hOrigin >= hSlide) || (hOrigin == hSlide) && (wOrigin >= wSlide)) {
		return [wSlide,hSlide];	// clipping case only
	} else { 			// reduce and clipping case 
		if (wSlide/wOrigin > hSlide/hOrigin) {return [wOrigin, hSlide * wOrigin/wSlide];} 
		else {return [wSlide * hOrigin/hSlide, hOrigin];}
	}
}

Duración y efectos en la transición de imágenes

El argumento duration indica el tiempo de visualización; que inclute el tiempo de transición (en milisegundos) de la imagen con el efecto. Partiendo de la base de 25 frames por segundo, la función hará que el efecto se active cada 40 milisegundos. Si queremos activar un efecto fade:

...
var timesNumber = 0;	
var frameSecond = 25;
...
timesNumber = parms.transition*frameSecond/1000;	// effect timing
...
hTimer = setInterval(fader,1000/frameSecond)
...
var fader = function() {
	countTimes--;
	ctx.globalAlpha = 1-countTimes/timesNumber;
	ctx.drawImage(img,0,0,dimImg[0],dimImg[1],0,0,parms.width,parms.height);
	if (countTimes == 0) {clearInterval(hTimer)}
}

Los efectos son:

  • no: Sin efecto. El tiempo de transición se ignora
  • fade: Una nueva imagen aparece poco a poco en la imagen anterior
  • page: Simula un pasado de página
  • tl-wipe: Una nueva imagen se desplaza desde el área superior izquierda
  • tr-wipe: Una nueva imagen se desplaza desde el área superior derecha
  • c-wipe: La nueva imagen aparece en un circulo que va aumentando hasta posicionarse sobre la imagen anterior
  • l-wipe: La nueva imagen entra por la izquierda
  • r-wipe: La nueva imagen entra por la derecha

Una galería manual

El paso de una imagen a la siguiente (o a la anterior) puede ser manual, mediante la imposición del argumento duration a manual o a 0. En este caso, el canvas se inserta en una tabla que contiene también las dos flechas de navegación. A continuación os muestro un fragmento de CSS para personalización de la galería (el ID de la tabla está compuesto por el argumento Id, en este caso divGallery, más _table).

#divGallery_table {border:1px inset}
#divGallery_table tr:nth-child(1) {font-size: 20pt;color:black}
#divGallery_table tr:nth-child(2) {background-color:silver}
#divGallery_table td {padding:0px 5px;}
#divGallery_table td:hover {color:silver}

Y este ha sido el artículo en el que trataba explicaros cómo crear una galería de imágenes con Javascript, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP