From d4deaf0b8e88123b15ae7358c7bc049c143084fa Mon Sep 17 00:00:00 2001 From: Martin Kagamino Lehoux Date: Mon, 11 May 2026 11:28:43 +0200 Subject: feat: afficher la miniature en placeholder dans le lightbox pendant le chargement Co-Authored-By: Claude Sonnet 4.6 --- templates/gallery.html | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) (limited to 'templates') diff --git a/templates/gallery.html b/templates/gallery.html index 14e43c9..d21b518 100644 --- a/templates/gallery.html +++ b/templates/gallery.html @@ -84,18 +84,34 @@ function uploadFiles(files) { } const photos = [{{range .Photos}}'/g/{{$.Name}}/photo/{{.}}',{{end}}]; +const thumbs = [{{range .Photos}}'/g/{{$.Name}}/{{$.ThumbPrefix}}/{{.}}',{{end}}]; let currentIndex = -1; function openLightbox(index) { currentIndex = index; - const src = photos[index]; - document.getElementById('lightbox-img').src = src; - document.getElementById('lightbox-download').href = src; + const fullSrc = photos[index]; + const img = document.getElementById('lightbox-img'); + + img.src = thumbs[index]; + img.classList.add('loading'); + + const full = new Image(); + full.onload = () => { + if (currentIndex === index) { + img.src = fullSrc; + img.classList.remove('loading'); + } + }; + full.src = fullSrc; + + document.getElementById('lightbox-download').href = fullSrc; document.getElementById('lightbox').classList.add('active'); } function closeLightbox() { document.getElementById('lightbox').classList.remove('active'); - document.getElementById('lightbox-img').src = ''; + const img = document.getElementById('lightbox-img'); + img.src = ''; + img.classList.remove('loading'); currentIndex = -1; } document.addEventListener('keydown', e => { -- cgit v1.3