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.
41 lines
1.1 KiB
41 lines
1.1 KiB
const imageGallery = document.getElementById("imageGallery");
|
|
const lightbox = document.getElementById("lightbox");
|
|
const lightboxImage = document.getElementById("lightboxImage");
|
|
const closeLightbox = document.querySelector(".close-lightbox")
|
|
|
|
const images = [
|
|
"img/image_01.jpg",
|
|
"img/image_02.jpg",
|
|
"img/image_03.jpg",
|
|
"img/image_04.jpg",
|
|
"img/image_05.jpg",
|
|
"img/image_06.jpg",
|
|
"img/image_07.jpg",
|
|
"img/image_08.jpg",
|
|
"img/image_09.jpg",
|
|
]
|
|
|
|
images.forEach(image => {
|
|
const galleryItem = document.createElement("div");
|
|
galleryItem.classList.add("col-md-4","gallery-item");
|
|
|
|
const img = document.createElement("img");
|
|
img.src = image;
|
|
img.alt = "obrázek";
|
|
img.addEventListener("click", ()=> {
|
|
lightbox.style.display="block";
|
|
lightboxImage.src = image;
|
|
});
|
|
galleryItem.appendChild(img);
|
|
imageGallery.appendChild(galleryItem);
|
|
});
|
|
|
|
closeLightbox.addEventListener("click", () => {
|
|
lightbox.style.display = "none";
|
|
})
|
|
|
|
window.addEventListener("click", event => {
|
|
if (event.target === lightbox) {
|
|
lightbox.style.display = "none";
|
|
}
|
|
})
|