diff --git a/assets/main.js b/assets/main.js index 9ebfc04..7bbceaa 100644 --- a/assets/main.js +++ b/assets/main.js @@ -149,6 +149,50 @@ async function chargerDepeches() { } } +/* === LIGHTBOX (images dans les entrĂ©es) === */ +function initLightbox() { + const contenu = document.querySelector('.fenetre-contenu'); + if (!contenu) return; + + contenu.addEventListener('click', e => { + const img = e.target.closest('img:not(.thanks)'); + if (!img) return; + + const overlay = document.createElement('div'); + overlay.className = 'lightbox'; + + const fond = document.createElement('div'); + fond.className = 'lightbox-fond'; + overlay.appendChild(fond); + + const clone = document.createElement('img'); + clone.className = 'lightbox-image'; + clone.src = img.src; + clone.alt = img.alt; + overlay.appendChild(clone); + + const fermer = document.createElement('button'); + fermer.className = 'lightbox-fermer'; + fermer.innerHTML = '×'; + overlay.appendChild(fermer); + + document.body.appendChild(overlay); + + overlay.addEventListener('click', e => { + if (e.target === fond || e.target === fermer || e.target === overlay) { + overlay.remove(); + } + }); + + document.addEventListener('keydown', function onKey(e) { + if (e.key === 'Escape') { + overlay.remove(); + document.removeEventListener('keydown', onKey); + } + }); + }); +} + /* === INIT === */ document.addEventListener('DOMContentLoaded', () => { animerTitreNav(); @@ -164,4 +208,6 @@ document.addEventListener('DOMContentLoaded', () => { if (document.getElementById('feed')) { chargerDepeches(); } + + initLightbox(); }); diff --git a/assets/styles.css b/assets/styles.css index f452b7d..1b2d190 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -346,6 +346,53 @@ body { } } +/* === LIGHTBOX === */ +.lightbox { + position: fixed; + inset: 0; + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; +} + +.lightbox-fond { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.8); + cursor: zoom-out; +} + +.lightbox-image { + position: relative; + max-width: 90vw; + max-height: 90vh; + object-fit: contain; + z-index: 1; + border: 2px solid white; + box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); +} + +.lightbox-fermer { + position: fixed; + top: 1rem; + right: 1.5rem; + z-index: 2; + background: none; + border: none; + color: #fff; + font-size: 2.5rem; + cursor: pointer; + font-family: 'IM Fell English', serif; + line-height: 1; + opacity: 0.7; + transition: opacity 0.2s; +} + +.lightbox-fermer:hover { + opacity: 1; +} + /* === DETAILS / SUMMARY === */ summary { cursor: pointer;