20 lines
747 B
JavaScript
20 lines
747 B
JavaScript
// Activates the image gallery.
|
|
// The main task is to attach an event listener to each image in the gallery
|
|
// and respond appropriately on click.
|
|
function activateGallery() {
|
|
let thumbnails = document.querySelectorAll("#gallery-thumbs > div > img");
|
|
let mainImage = document.querySelector("#gallery-photo img");
|
|
|
|
thumbnails.forEach(function(thumbnail) {
|
|
thumbnail.addEventListener("click", function() {
|
|
// Set clicked image as display image.
|
|
let newImageSrc = thumbnail.dataset.largeVersion;
|
|
mainImage.setAttribute("src", newImageSrc);
|
|
|
|
// Change which image is current.
|
|
document.querySelector(".current").classList.remove("current");
|
|
thumbnail.parentNode.classList.add("current");
|
|
});
|
|
});
|
|
}
|