28 lines
1.1 KiB
JavaScript
28 lines
1.1 KiB
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");
|
|
// Image info to be updated
|
|
let galleryInfo = document.querySelector("#gallery-info");
|
|
let title = galleryInfo.querySelector(".title");
|
|
let description = galleryInfo.querySelector(".description");
|
|
|
|
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");
|
|
|
|
// Update image info.
|
|
title.innerHTML = thumbnail.dataset.title;
|
|
description.innerHTML = thumbnail.dataset.description;
|
|
});
|
|
});
|
|
}
|