107 lines
3.0 KiB
JavaScript
107 lines
3.0 KiB
JavaScript
class Lightbox {
|
|
constructor(lightboxElement) {
|
|
this.lightbox = lightboxElement;
|
|
this.closeButton = this.lightbox.querySelector(".lightbox__close");
|
|
this.prevButton = this.lightbox.querySelector(".lightbox__prev");
|
|
this.nextButton = this.lightbox.querySelector(".lightbox__next");
|
|
this.gallery = this.lightbox.previousElementSibling;
|
|
this.currentPictureIndex = 0;
|
|
|
|
if (this.gallery) {
|
|
this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
|
|
this.lightboxTriggers = this.gallery.querySelectorAll(".lightbox-gallery__trigger");
|
|
this.init();
|
|
}
|
|
}
|
|
|
|
init() {
|
|
this.lightboxTriggers.forEach((button, index) => {
|
|
button.addEventListener("click", () => {
|
|
this.showLightbox();
|
|
this.setCurrentPicture(this.pictures[index]);
|
|
this.setCurrentPictureIndex(index);
|
|
});
|
|
});
|
|
|
|
this.closeButton.addEventListener("click", () => {
|
|
this.hideLightbox();
|
|
});
|
|
|
|
this.prevButton.addEventListener("click", () => {
|
|
this.showPreviousPicture();
|
|
});
|
|
|
|
this.nextButton.addEventListener("click", () => {
|
|
this.showNextPicture();
|
|
});
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
this.hideLightbox();
|
|
}
|
|
|
|
if (event.key === "ArrowLeft") {
|
|
this.showPreviousPicture();
|
|
}
|
|
|
|
if (event.key === "ArrowRight") {
|
|
this.showNextPicture();
|
|
}
|
|
});
|
|
}
|
|
|
|
showLightbox() {
|
|
this.lightbox.classList.remove("lightbox--inactive");
|
|
this.lightbox.classList.add("lightbox--active");
|
|
this.closeButton.focus();
|
|
this.lightbox.setAttribute("aria-hidden", "false");
|
|
}
|
|
|
|
hideLightbox() {
|
|
this.lightbox.classList.remove("lightbox--active");
|
|
this.lightbox.classList.add("lightbox--inactive");
|
|
this.lightbox.setAttribute("aria-hidden", "true");
|
|
// this.lightboxTriggers[this.currentPictureIndex].focus();
|
|
}
|
|
|
|
setCurrentPicture(picture) {
|
|
const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
|
|
const viewedDescription = this.lightbox.querySelector(".lightbox__current-picture-description");
|
|
|
|
viewedPicture.src = picture.src;
|
|
viewedPicture.alt = picture.alt;
|
|
|
|
const imageDescription = [picture.dataset.description, picture.dataset.caption].filter(Boolean);
|
|
viewedDescription.textContent = imageDescription.join(" — ");
|
|
}
|
|
|
|
setCurrentPictureIndex(index) {
|
|
this.currentPictureIndex = index;
|
|
}
|
|
|
|
showPreviousPicture() {
|
|
if (this.currentPictureIndex > 0) {
|
|
this.currentPictureIndex--;
|
|
} else {
|
|
this.currentPictureIndex = this.pictures.length - 1;
|
|
}
|
|
this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
|
|
}
|
|
|
|
showNextPicture() {
|
|
if (this.currentPictureIndex < this.pictures.length - 1) {
|
|
this.currentPictureIndex++;
|
|
} else {
|
|
this.currentPictureIndex = 0;
|
|
}
|
|
this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const lightboxes = document.querySelectorAll(".lightbox");
|
|
lightboxes.forEach((lightboxElement) => {
|
|
new Lightbox(lightboxElement);
|
|
});
|
|
});
|