128 lines
4.1 KiB
Plaintext
128 lines
4.1 KiB
Plaintext
@await Html.PartialAsync("~/Views/WebNew/Section/_Hero.cshtml", "Galeri Kegiatan")
|
|
|
|
@section Style {
|
|
<link rel="stylesheet" href="~/css/Galeri.css" asp-append-version="true" />
|
|
}
|
|
|
|
<div class="container my-5">
|
|
<div class="row g-4" id="galeri-list"></div>
|
|
</div>
|
|
|
|
<div id="lightbox" class="lightbox">
|
|
<span class="close">×</span>
|
|
|
|
<img class="lightbox-content" id="lightbox-img">
|
|
|
|
<div class="lightbox-text">
|
|
<h5 id="lightbox-title"></h5>
|
|
<p id="lightbox-description"></p>
|
|
</div>
|
|
</div>
|
|
@*<div class="container my-5">
|
|
|
|
<div class="row g-4" id="galeri-list"></div>
|
|
|
|
</div>
|
|
<div id="lightbox" class="lightbox">
|
|
<span class="close">×</span>
|
|
<img class="lightbox-content" id="lightbox-img">
|
|
<p id="lightbox-description"></p>
|
|
</div>*@
|
|
|
|
<script>
|
|
//function loadGaleri() {
|
|
|
|
// fetch('/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">
|
|
// </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-description").innerText = this.alt;
|
|
// });
|
|
// });
|
|
|
|
// });
|
|
|
|
// 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);
|
|
|
|
function loadGaleri() {
|
|
|
|
fetch('/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);
|
|
</script> |