Como generar una galería de imágenes de producto con javascript

Como generar una galería de imágenes de producto con javascript

En la ficha de producto de algunas tiendas online es común ver una galería de imágenes que tiene una imagen destacada de tamaño mayor y unas cuantas de tamaño menor justo por debajo o en el lateral.

Cuando se pasa el ratón por encima de las imágenes de tamaño menor la imagen cambia.

En la publicación de hoy vamos a reproducir este efecto sin Javascript.

Es importante que tengas en cuenta que este escrito tiene un enfoque académico y no comercial.

El código podría mejorarse mucho pero es un embrión que permite repasar conceptos importantes como

  • Asignación de eventos a un nodo html
  • Modificación del css mediante JS.
  • Identificación de nodos html.
Como generar una galería de imágenes de producto con javascript 1

El código html y css

La idea es encerrar dentro de un contenedor principal de 600px de ancho y 550px de alto uno de dimensiones 600 px de ancho por 400 de ancho y 4 de dimensiones 150 px de ancho por 150px de alto.

Para que se apilen unos al lado de otro usamos la propiedad float.

Y finalmente damos un border a todos los contenedores para diferenciarlos.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ficha producto - imágenes</title>
	<meta name="author" content="francesc ricart">
	<style>
		*{box-sizing:border-box;}
		div{
			float:left;
		}
		.contenedor-producto{
			width:600px;
			height:550px;
			margin:auto;		
		}

		.imagen-principal{
			width:100%;
			height:400px;
			border:1px solid #ff0000;
		}
		[class *= "subImagen-"]{
			width:25%;
			height:150px;
			border:1px solid #0000ff;
		}
	</style>
</head>
<body>
	
	<div class="contenedor-producto">
		<div class="imagen-principal"></div>
		<div class="subImagen-1"></div>
		<div class="subImagen-2"></div>
		<div class="subImagen-3"></div>
		<div class="subImagen-4"></div>
	</div>
</body>
</html>
html y css galería de imágenes de producto
Resultado código html y css para la galería de imágenes de producto

El siguiente paso es implementar los fondos de cada uno de los contenedores mediante la propiedadbackground-image.

Usaremos para ello un poco de javascript.

El código javascript

El código JS presentado está pensado para alguien que está aprendiendo. Se puede mejorar con conceptos más avanzados como el uso del this o incluso haciendo uso de jQuery. Sin embargo en este ejemplo nos abstenemos.

La idea de fondo es crear dos arrays con todas las imágenes que se usarán.

Uno para las imágenes de 150px por 150px.

Otro para las imágenes de 600px por 400px.

A continuación se inician todos los contenedores asignando un background-image.

Finalmente se asigna un evento a cada uno de los contenedores pequeños. Cuando se pasa el ratón por encima (eventoonmouseevent) se dispara una función.

Se ha escrito una función para cada pequeño contenedor. Todas hacen lo mismo: substituir el background-image de la imagen principal.

var zFondos150 = ["url('foto1-150.jpg')","url('foto2-150.jpg')","url('foto3-150.jpg')","url('foto4-150.jpg')"];
var zFondos600 = ["url('foto1-600.jpg')","url('foto2-600.jpg')","url('foto3-600.jpg')","url('foto4-600.jpg')"];

var imagenPrincipal = document.querySelectorAll(".imagen-principal")[0];
var subImagenes = document.querySelectorAll('[class *= "subImagen-"]');

imagenPrincipal.style.backgroundImage =zFondos600[0];
subImagenes[0].style.backgroundImage =zFondos150[0];
subImagenes[1].style.backgroundImage =zFondos150[1];
subImagenes[2].style.backgroundImage =zFondos150[2];
subImagenes[3].style.backgroundImage =zFondos150[3];

subImagenes[0].addEventListener("mouseover",accion0);
subImagenes[1].addEventListener("mouseover",accion1);
subImagenes[2].addEventListener("mouseover",accion2);
subImagenes[3].addEventListener("mouseover",accion3);

function accion0(){imagenPrincipal.style.backgroundImage =zFondos600[0];}
function accion1(){imagenPrincipal.style.backgroundImage =zFondos600[1];}
function accion2(){imagenPrincipal.style.backgroundImage =zFondos600[2];}
function accion3(){imagenPrincipal.style.backgroundImage =zFondos600[3];}

En el siguiente gif se muestra el efecto conseguido.

Como generar una galería de imágenes de producto con javascript 2

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.