diff --git a/index.html b/index.html index b68c059..27af540 100644 --- a/index.html +++ b/index.html @@ -184,6 +184,12 @@ + +
+ + +
+ diff --git a/script.js b/script.js index 509a64f..e90f365 100644 --- a/script.js +++ b/script.js @@ -283,7 +283,7 @@ async function openPost(id) { } const galleryHTML = p.images?.length - ? `` + ? `` : ''; document.getElementById('modalContent').innerHTML = ` @@ -380,6 +380,21 @@ function closeModal() { document.body.style.overflow = ''; } +// =========================== +// LIGHTBOX +// =========================== +function openLightbox(src) { + document.getElementById('lightboxImg').src = src; + document.getElementById('lightboxOverlay').classList.add('open'); +} +function closeLightbox() { + document.getElementById('lightboxOverlay').classList.remove('open'); + document.getElementById('lightboxImg').src = ''; +} +document.addEventListener('keydown', e => { + if (e.key === 'Escape') closeLightbox(); +}); + document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); }); // =========================== diff --git a/style.css b/style.css index db0139e..e913ada 100644 --- a/style.css +++ b/style.css @@ -426,7 +426,49 @@ footer { object-fit: cover; border-radius: 8px; flex-shrink: 0; + cursor: zoom-in; + transition: opacity 0.15s; } +.img-gallery img:hover { opacity: 0.88; } + +/* ===================== + LIGHTBOX + ===================== */ +#lightboxOverlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.92); + z-index: 9999; + align-items: center; + justify-content: center; + animation: lbFade 0.18s ease; +} +#lightboxOverlay.open { display: flex; } +#lightboxImg { + max-width: 92vw; + max-height: 90vh; + object-fit: contain; + border-radius: 6px; + box-shadow: 0 8px 40px rgba(0,0,0,0.6); +} +.lightbox-close { + position: fixed; + top: 18px; + right: 22px; + background: rgba(255,255,255,0.15); + border: none; + color: #fff; + font-size: 1.6rem; + width: 42px; + height: 42px; + border-radius: 50%; + cursor: pointer; + line-height: 1; + transition: background 0.15s; +} +.lightbox-close:hover { background: rgba(255,255,255,0.3); } +@keyframes lbFade { from { opacity:0 } to { opacity:1 } } /* ===================== SUBMIT FORM (in modal)