website/js/gallery.js

// manifest.json comes from generate_thumbnails.py
document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('gallery-container');
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-img');
  const lightboxVideo = document.getElementById('lightbox-video');

  if (!container || !lightbox) return;

  // gifs are converted to mp4 so those open in the video player
  const openLightbox = (src) => {
    const isVideo = src.endsWith('.mp4');
    lightboxImg.style.display = isVideo ? 'none' : 'block';
    lightboxVideo.style.display = isVideo ? 'block' : 'none';
    if (isVideo) {
      lightboxVideo.src = src;
      lightboxVideo.play().catch(() => {});
    } else {
      lightboxImg.src = src;
    }
    lightbox.style.display = 'block';
  };

  const closeLightbox = () => {
    lightbox.style.display = 'none';
    lightboxImg.removeAttribute('src');
    lightboxVideo.pause();
    lightboxVideo.removeAttribute('src');
    lightboxVideo.load();
  };

  lightbox.addEventListener('click', (e) => {
    if (e.target !== lightboxImg && e.target !== lightboxVideo) closeLightbox();
  });
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && lightbox.style.display === 'block') closeLightbox();
  });

  const thumbPath = (file) => `gallery/thumbnails/${file.replace(/\.[^.]+$/, '')}.jpg`;

  fetch('gallery/manifest.json')
    .then(res => {
      if (!res.ok) throw new Error(res.status);
      return res.json();
    })
    .then(files => {
      files.forEach((file, i) => {
        const img = document.createElement('img');
        img.src = thumbPath(file);
        img.alt = `Gallery image ${i + 1}`;
        img.loading = 'lazy';
        img.onclick = () => openLightbox(`gallery/${file}`);
        container.appendChild(img);
      });
    })
    .catch(err => console.error('Could not load gallery manifest:', err));
});