- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Muffin Gallery</title>
<link href="gallery/setting.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="pattern">
<section class="gallery">
<h1>Muffin Gallery</h1>
<p class="gallery__photo-full">
<img class="full-photo" src="gallery/laptop-large.jpg" width="550" height="367" alt="Large photo">
</p>
<p class="gallery__photo-previews">
<button class="gallery__photo-preview" type="button">
<img src="gallery/laptop.jpg" alt="Preview with laptop">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/microphone.jpg" alt="Preview with microphone">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/keyboard.jpg" alt="Preview with keyboard">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/signboard.jpg" alt="Preview with tablet">
</button>
<button class="gallery__photo-preview" type="button">
<img src="gallery/tree.jpg" alt="Preview with tree">
</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');
var addThumbnailClickHandler = function (thumbnail, photo) {
thumbnail.addEventListener('click', function () {
console.log(thumbnail);
console.log(photo);
});
};
for (var i = 0; i < thumbnails.length; i++) {
addThumbnailClickHandler(thumbnails[i], photos[i]);
}
Click inside the mini browser to put the focus in this window.
Console
Goalscompleted
0
- Replace the code inside the handler with
fullPhoto.src = photo;. - Click on one of the thumbnails.
Comments