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

thumbnails.forEach(img => {
    img.onclick = function() {
        modal.style.display = "flex";
        modalImg.src = this.src;
        modalImg.classList.remove("zoomed"); // Reset zoom when opening
    }
});

// Click the big image to zoom even more
modalImg.onclick = function(e) {
    e.stopPropagation(); // Don't close the modal when clicking the image
    this.classList.toggle("zoomed");
};

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