- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tomato Gallery</title>
<link href="gallery-tomato/setting.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<section class="gallery">
<h1>Tomato Gallery</h1>
<div class="gallery__pictures">
<p class="gallery__picture-full">
<img class="full-picture" src="gallery-tomato/tomato-red-large.jpg" width="450" height="300" alt="Large photo">
</p>
<p class="gallery__picture-previews">
<button class="gallery__picture-preview" type="button">
<img src="gallery-tomato/tomato-red.jpg" alt="Red tomato">
</button>
<button class="gallery__picture-preview" type="button">
<img src="gallery-tomato/tomato-yellow.jpg" alt="Yellow tomato">
</button>
<button class="gallery__picture-preview" type="button">
<img src="gallery-tomato/tomato-strange.jpg" alt="Strange tomato">
</button>
</p>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS
.gallery {
display: flex;
flex-direction: column;
align-items: center;
min-width: 555px;
}
.gallery__pictures {
display: flex;
}
.gallery__picture-full {
margin-bottom: 0;
}
.gallery__picture-full img {
display: block;
box-shadow: 0 0 5px rgba(0, 1, 1, 0.2);
}
.gallery__picture-previews {
display: flex;
width: 90px;
margin: 0;
margin-right: 15px;
flex-direction: column;
list-style-type: none;
padding: 0;
justify-content: space-between;
order: -1;
}
.gallery__picture-preview {
position: relative;
padding: 0;
border: 0;
border-radius: 0;
background: none;
outline: none;
top: 0;
filter: grayscale(1);
opacity: 0.7;
transition: top 0.2s, box-shadow 0.2s, filter 0.2s, opacity 0.2s;
box-shadow: 0 0 5px rgba(0, 1, 1, 0.2);
}
.gallery__picture-preview:hover {
outline: 3px solid #cccccc;
outline-offset: -3px;
}
.gallery__picture-preview:focus {
top: -5px;
box-shadow: 0 3px 10px 2px rgba(0, 1, 1, 0.2);
filter: none;
opacity: 1;
}
.gallery__picture-preview img {
display: block;
object-fit: cover;
width: 90px;
height: 90px;
}
JavaScript
var pictures = [
'gallery-tomato/tomato-red-large.jpg',
'gallery-tomato/tomato-yellow-large.jpg',
'gallery-tomato/tomato-strange-large.jpg'
];
/* Specification
Meow! We need to update a gallery of product photos.
The gallery has thumbnails (elements with the 'gallery__picture-preview' class) and a large image ('full-picture' class).
The large photo should change after you click on the preview. The large image should be the same as the thumbnail, only with larger dimensions.
The paths to full-size photos can be found in the 'pictures' array. The order of the elements in the array is the same as the order of the thumbnails in the markup.
*/
Click inside the mini browser to put the focus in this window.
Console
var pictures = [
'gallery-tomato/tomato-red-large.jpg',
'gallery-tomato/tomato-yellow-large.jpg',
'gallery-tomato/tomato-strange-large.jpg'
];
var thumbnails = document.querySelectorAll('.gallery__picture-preview');
var fullPhoto = document.querySelector('.full-picture');
var addThumbnailClickHandler = function (preview, picture) {
preview.addEventListener('click', function () {
fullPhoto.src = picture;
});
};
for (var i = 0; i < thumbnails.length; i++) {
addThumbnailClickHandler(thumbnails[i], pictures[i]);
}