You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.4 KiB
43 lines
1.4 KiB
const imageGallery = document.getElementById("imageGallery");
|
|
const lightbox = document.getElementById("lightbox");
|
|
const lightboxImage = document.getElementById("lightboxImage");
|
|
const lightboxDesc = document.getElementById("lightboxDesc");
|
|
const closeLightbox = document.querySelector(".close-lightbox")
|
|
|
|
fetch("data.json").then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(item => {
|
|
const galleryItem = document.createElement("div");
|
|
galleryItem.classList.add("col-md-4", "gallery-item");
|
|
|
|
const img = document.createElement("img");
|
|
img.src = item.thumbpath;
|
|
img.alt = item.desc;
|
|
img.dataset.imagepath = item.imagepath;
|
|
img.dataset.desc = item.desc;
|
|
|
|
galleryItem.appendChild(img);
|
|
imageGallery.appendChild(galleryItem);
|
|
});
|
|
});
|
|
|
|
imageGallery.addEventListener("click", (event) =>{
|
|
const target = event.target;
|
|
if (target.tagName === "IMG") {
|
|
const imagepath = target.dataset.imagepath;
|
|
const desc = target.dataset.desc;
|
|
lightbox.style.display = "block";
|
|
lightboxImage.src = imagepath;
|
|
lightboxDesc.textContent = desc;
|
|
}
|
|
})
|
|
|
|
closeLightbox.addEventListener("click", () => {
|
|
lightbox.style.display = "none";
|
|
})
|
|
|
|
window.addEventListener("click", event => {
|
|
if (event.target === lightbox) {
|
|
lightbox.style.display = "none";
|
|
}
|
|
})
|