code_alpha_task_3_gallery/script.js at main · adeel-chaudharey/code_alpha_task_3_gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Lightbox functionality
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightbox-img");
const captionText = document.getElementById("caption");
const closeBtn = document.getElementsByClassName("close")[0];

document.querySelectorAll(".image-container img").forEach(img => {
    img.addEventListener("click", () => {
        lightbox.style.display = "block";
        lightboxImg.src = img.src;
        captionText.innerText = img.alt;
    });
});

closeBtn.onclick = function() {
    lightbox.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == lightbox) {
        lightbox.style.display = "none";
    }
}