diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/gallery.html | 24 |
1 files changed, 20 insertions, 4 deletions
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 => { |