function loadGaleri() {

    fetch('/WebNew/Galeri/GetAll')
        .then(res => res.json())
        .then(data => {

            let html = "";

            data.forEach(item => {
                html += `
                    <div class="col-md-4">
                        <div class="galeri-card">
                            <img src="${item.gambar}"
                                 alt="${item.judul}"
                                 class="galeri-img"
                                 data-judul="${item.judul}"
                                 data-deskripsi="${item.deskripsi}">
                        </div>
                    </div>
                `;
            });

            document.getElementById("galeri-list").innerHTML = html;

            document.querySelectorAll(".galeri-img").forEach(img => {
                img.addEventListener("click", function () {

                    document.getElementById("lightbox").style.display = "block";
                    document.getElementById("lightbox-img").src = this.src;

                    document.getElementById("lightbox-title").innerText = this.dataset.judul;
                    document.getElementById("lightbox-description").innerText = this.dataset.deskripsi;
                });
            });

        });

    document.querySelector(".lightbox .close").onclick = function () {
        document.getElementById("lightbox").style.display = "none";
    };

    document.getElementById("lightbox").onclick = function (e) {
        if (e.target.id === "lightbox") {
            this.style.display = "none";
        }
    };
}

document.addEventListener("DOMContentLoaded", loadGaleri);