50 lines
1.9 KiB
HTML
50 lines
1.9 KiB
HTML
|
<div class="lightbox-overlay" id="lightbox" onclick="closeLightbox(event)">
|
||
|
|
<button class="lightbox-close" onclick="closeLightbox(event)">×</button>
|
||
|
|
<img id="lightboxImg" src="" alt="">
|
||
|
|
<video id="lightboxVideo" controls style="display:none;"></video>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
.lightbox-overlay {
|
||
|
|
display:none; position:fixed; inset:0; z-index:200;
|
||
|
|
background:rgba(0,0,0,0.85); align-items:center; justify-content:center;
|
||
|
|
}
|
||
|
|
.lightbox-overlay.is-open { display:flex; }
|
||
|
|
.lightbox-overlay img, .lightbox-overlay video {
|
||
|
|
max-width:92vw; max-height:88vh; border-radius:8px; object-fit:contain;
|
||
|
|
}
|
||
|
|
.lightbox-close {
|
||
|
|
position:absolute; top:0.75rem; right:1rem; background:none; border:none;
|
||
|
|
color:#fff; font-size:2.2rem; cursor:pointer; line-height:1; z-index:201;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
function openLightbox(url, isVideo) {
|
||
|
|
var lb = document.getElementById('lightbox');
|
||
|
|
var img = document.getElementById('lightboxImg');
|
||
|
|
var vid = document.getElementById('lightboxVideo');
|
||
|
|
if (isVideo) {
|
||
|
|
img.style.display = 'none';
|
||
|
|
vid.style.display = '';
|
||
|
|
vid.src = url;
|
||
|
|
} else {
|
||
|
|
vid.style.display = 'none';
|
||
|
|
vid.pause && vid.pause(); vid.src = '';
|
||
|
|
img.style.display = '';
|
||
|
|
img.src = url;
|
||
|
|
}
|
||
|
|
lb.classList.add('is-open');
|
||
|
|
}
|
||
|
|
function closeLightbox(e) {
|
||
|
|
if (e && e.target !== document.getElementById('lightbox') && e.target.className !== 'lightbox-close') return;
|
||
|
|
var lb = document.getElementById('lightbox');
|
||
|
|
lb.classList.remove('is-open');
|
||
|
|
var vid = document.getElementById('lightboxVideo');
|
||
|
|
vid.pause && vid.pause(); vid.src = '';
|
||
|
|
}
|
||
|
|
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLightbox(null); });
|
||
|
|
document.addEventListener('click', function(e) {
|
||
|
|
var a = e.target.closest('[data-lightbox]');
|
||
|
|
if (a) { e.preventDefault(); openLightbox(a.href, a.dataset.lightbox === 'video'); }
|
||
|
|
});
|
||
|
|
</script>
|