diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/gallery.html | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/templates/gallery.html b/templates/gallery.html index 4991a11..51a7196 100644 --- a/templates/gallery.html +++ b/templates/gallery.html @@ -24,9 +24,9 @@ <!-- Gallery grid --> <div class="grid"> -{{range .Photos}} -<div class="grid-item" onclick="openLightbox('/g/{{$.Name}}/photo/{{.}}')"> -<img src="/g/{{$.Name}}/{{$.ThumbPrefix}}/{{.}}" alt="{{.}}" loading="lazy"> +{{range $i, $p := .Photos}} +<div class="grid-item" onclick="openLightbox({{$i}})"> +<img src="/g/{{$.Name}}/{{$.ThumbPrefix}}/{{$p}}" alt="{{$p}}" loading="lazy"> </div> {{end}} </div> @@ -83,7 +83,12 @@ function uploadFiles(files) { xhr.send(fd); } -function openLightbox(src) { +const photos = [{{range .Photos}}'/g/{{$.Name}}/photo/{{.}}',{{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; document.getElementById('lightbox').classList.add('active'); @@ -91,8 +96,14 @@ function openLightbox(src) { function closeLightbox() { document.getElementById('lightbox').classList.remove('active'); document.getElementById('lightbox-img').src = ''; + currentIndex = -1; } -document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); }); +document.addEventListener('keydown', e => { + if (e.key === 'Escape') { closeLightbox(); return; } + if (currentIndex === -1) return; + if (e.key === 'ArrowRight' && currentIndex < photos.length - 1) openLightbox(currentIndex + 1); + if (e.key === 'ArrowLeft' && currentIndex > 0) openLightbox(currentIndex - 1); +}); </script> </body> </html> |