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

// Click thumbnail to expand
thumbnails.forEach(img => {
    img.onclick = function() {
        modal.style.display = "flex";
        modalImg.src = this.src;
        modalImg.classList.remove("zoomed");
    }
});

// Click the expanded image to zoom
modalImg.onclick = function(e) {
    e.stopPropagation(); // Stops it from closing when you just want to zoom
    this.classList.toggle("zoomed");
}

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