- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Galería de Cupcake</title>
<link href="gallery/setting.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="pattern">
<section class="gallery">
<h1>Galería de Cupcake</h1>
<p class="gallery__photo-full">
<img class="full-photo" src="gallery/laptop-large.jpg" width="550" height="367" alt="Fotografía ampliada de Cupcake">
</p>
<p class="gallery__photo-previews">
<button class="gallery__photo-preview" type="button">
<img src="gallery/laptop.jpg" alt="Miniatura de Cupcake con una computadora portátil">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/microphone.jpg" alt="Miniatura de Cupcake con un micrófono">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/keyboard.jpg" alt="Miniatura de Cupcake con un teclado">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/signboard.jpg" alt="Miniatura de Cupcake con un letrero">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/tree.jpg" alt="Miniatura de Cupcake junto a un árbol">
</button>
</p>
</section>
<script src="script.js"></script>
</body>
</html>
CSS
.gallery {
display: flex;
flex-direction: column;
align-items: center;
}
.gallery__photo-full {
margin-bottom: 12px;
}
.gallery__photo-full img {
display: block;
}
.gallery__photo-previews {
display: flex;
list-style-type: none;
margin: 0;
width: 550px;
padding: 0;
justify-content: space-between;
}
.gallery__photo-preview {
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.gallery__photo-preview:hover,
.gallery__photo-preview:focus {
opacity: 0.7;
}
.gallery__photo-preview img {
display: block;
object-fit: cover;
width: 100px;
height: 100px;
}
.gallery__photo-preview--active img {
outline: 5px solid red;
outline-offset: -5px;
}
.pattern {
background: url("gallery/leaves-pattern.png") 0 0 repeat;
}
JavaScript
var photos = [
'gallery/laptop-large.jpg',
'gallery/microphone-large.jpg',
'gallery/keyboard-large.jpg',
'gallery/signboard-large.jpg',
'gallery/tree-large.jpg'
];
var thumbnails = document.querySelectorAll('.gallery__photo-preview');
var fullPhoto = document.querySelector('.full-photo');
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener('click', function () {
console.log('Clic en la imagen');
});
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
Consola
ObjetivosRealizado
0
- En el manejador, sustituye el mensaje en la consola por la asignación de la ruta de la imagen a
src:fullPhoto.src = photos[i]. - Haz clic en cualquier miniatura de la galería.
Observa que el programa tiene un error. En los próximos ejercicios veremos por qué ocurre.