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";
    }
})