feat: arrow key navigation in lightbox

Left/right arrow keys move between photos; navigation stops at the
first and last photo without wrapping around.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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>