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

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

3.5
(6)

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 3.5 / 5. Votos: 6

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?

¿Dónde he fallado?

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

5 Comments
  • Ronaldo
    Posted at 23:16h, 25 abril Responder

    Una duda, si las imágenes las tengo en una base de datos como seria el código donde se mandan a llamar las imágenes

  • Miguelito
    Posted at 22:06h, 11 mayo Responder

    Disculpa, soy Alumno de bachillerato, y no se como es que haces para que se pongan las imagenes, como hago para eso? :C

    • Francesc Ricart
      Posted at 20:07h, 12 mayo Responder

      Hola Miguelito,
      Lo que hacemos (en el caso de esta publicación) es tras capturar el nodo (elemento) pertinente, modificarle la propiedad backgroundImage.
      Fíjate que la imagen se llama desde la variable de tipo array zFondos600 o zFondos150.
      En la declaración de estas variables he introducido de forma manual la url de cada una de estas imágenes.

      Saludos,

  • Radames
    Posted at 04:06h, 25 agosto Responder

    buenas noches, no tiene una pagina web donde lo pueda ver y entender mejor el codigo.. porque no se ve claro en que parte del html va la segunda parte que explicas.. ( Se ha escrito una función para cada pequeño contenedor. ) no se entiende como ponela en en html que explicas arriba..

Post A Comment