49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
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); |