const modal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImg");
const thumbnails = document.querySelectorAll(".gallery-img");

// When any gallery image is clicked
thumbnails.forEach(img => {
    img.onclick = function() {
        modal.style.display = "flex"; // Show the hidden fullscreen layer
        modalImg.src = this.src;      // Set the big image source to the clicked one
        modalImg.classList.remove("zoomed"); // Reset any previous zoom
    }
});

// Click the big image to toggle an even larger zoom
modalImg.onclick = function(e) {
    e.stopPropagation(); // Prevents the modal from closing
    this.classList.toggle("zoomed");
}

// Click anywhere on the dark background to close it
modal.onclick = function() {
    modal.style.display = "none";
}