18 Jun 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.
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>
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.
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Ronaldo
Posted at 23:16h, 25 abrilUna 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
Francesc Ricart
Posted at 00:01h, 26 abril¡hola Ronaldo!
Tal vez AJAX sea la respuesta que estás buscando.
Dale un vistazo a este hilo.
Saludos,
Miguelito
Posted at 22:06h, 11 mayoDisculpa, 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 mayoHola 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 agostobuenas 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..