website polish

js/gallery.js

@@ -1,69 +1,46 @@
+// Gallery tab — thumbnails from gallery/manifest.json + full-size lightbox.
+// The manifest is (re)generated by generate_thumbnails.py.
 document.addEventListener('DOMContentLoaded', () => {
+  const container = document.getElementById('gallery-container');
   const lightbox = document.getElementById('lightbox');
   const lightboxImg = document.getElementById('lightbox-img');
-  const closeBtn = document.querySelector('.lightbox-close');
 
-  // Close lightbox when clicking the X
-  if (closeBtn) {
-    closeBtn.onclick = () => {
-      lightbox.style.display = "none";
-      lightboxImg.src = ""; // Clear source to stop GIFs
-    }
-  }
+  if (!container || !lightbox) return;
 
-  // Close lightbox when clicking outside the image
-  if (lightbox) {
-    lightbox.onclick = (e) => {
-      if (e.target !== lightboxImg && e.target !== closeBtn) {
-        lightbox.style.display = "none";
-        lightboxImg.src = ""; // Clear source to stop GIFs
-      }
-    }
-  }
-
-  // Function to load images into a specific container from a specific folder
-  const loadGallery = (containerId, folderName, totalImages) => {
-    const container = document.getElementById(containerId);
-    if (!container) return;
-
-    for (let i = 1; i <= totalImages; i++) {
-      const img = document.createElement('img');
-      img.alt = `${folderName} Image ${i}`;
-
-      // Load the thumbnail instead of the full image
-      img.src = `${folderName}/thumbnails/${i}.jpg`;
-
-      // If thumbnail fails to load, it means the image doesn't exist at all
-      img.onerror = () => { img.style.display = 'none'; };
-
-      // Open lightbox on click
-      img.onclick = () => {
-        lightbox.style.display = "block";
-        lightboxImg.src = ""; // Clear previous image
-
-        // Try loading original full quality image: jpg -> png -> gif
-        const tryLoad = (extensions) => {
-          if (extensions.length === 0) return; // All failed
-          const testExt = extensions.shift();
-
-          const tempImg = new Image();
-          tempImg.onload = () => {
-            lightboxImg.src = tempImg.src; // Success! Show it.
-          };
-          tempImg.onerror = () => {
-            tryLoad(extensions); // Failed, try next extension
-          };
-          tempImg.src = `${folderName}/${i}.${testExt}`;
-        };
-
-        // Start trying to find the full image
-        tryLoad(['jpg', 'png', 'gif']);
-      };
-
-      container.appendChild(img);
-    }
+  const openLightbox = (src) => {
+    lightboxImg.src = src;
+    lightbox.style.display = 'block';
   };
 
-  // Load your original Gallery
-  loadGallery('gallery-container', 'gallery', 50);
-});
+  const closeLightbox = () => {
+    lightbox.style.display = 'none';
+    lightboxImg.src = ''; // Clear source to stop GIFs
+  };
+
+  // Close on the X, on a click outside the image, or with Escape
+  lightbox.addEventListener('click', (e) => {
+    if (e.target !== lightboxImg) 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));
+});