Add click-to-zoom lightbox for article figures (#21)

Clicking a figure on the survey or RSIHub page opens it full-screen
on a dark backdrop; a click or Escape closes, and Enter/Space work
from the keyboard with focus returned to the figure. The enlarged
image keeps the white plate padding so transparent SVGs stay legible.


Claude-Session: https://claude.ai/code/session_01HZxZsJ6KCnffNAfu8WxquU

Co-authored-by: Claude <noreply@anthropic.com>

Author: Andyyesiyu

assets/site.js

@@ -74,4 +74,58 @@
 
   setLanguage(root.dataset.lang === "zh" ? "zh" : "en", false);
   setTheme(root.dataset.theme === "dark" ? "dark" : "light", false);
+
+  var zoomableImages = document.querySelectorAll(
+    ".project-page figure img, .showcase-grid figure img"
+  );
+  var lightbox = null;
+  var lightboxTrigger = null;
+
+  function closeLightbox() {
+    if (!lightbox) return;
+    lightbox.remove();
+    lightbox = null;
+    document.body.style.overflow = "";
+    if (lightboxTrigger) lightboxTrigger.focus();
+    lightboxTrigger = null;
+  }
+
+  function openLightbox(image) {
+    closeLightbox();
+    lightboxTrigger = image;
+    lightbox = document.createElement("div");
+    lightbox.className = "lightbox";
+    lightbox.setAttribute("role", "dialog");
+    lightbox.setAttribute("aria-modal", "true");
+    lightbox.setAttribute("aria-label", image.alt || "Enlarged image");
+    lightbox.tabIndex = -1;
+
+    var enlarged = document.createElement("img");
+    enlarged.src = image.currentSrc || image.src;
+    enlarged.alt = image.alt || "";
+    lightbox.appendChild(enlarged);
+
+    lightbox.addEventListener("click", closeLightbox);
+    document.body.appendChild(lightbox);
+    document.body.style.overflow = "hidden";
+    lightbox.focus();
+  }
+
+  Array.prototype.forEach.call(zoomableImages, function (image) {
+    image.tabIndex = 0;
+    image.setAttribute("role", "button");
+    image.addEventListener("click", function () {
+      openLightbox(image);
+    });
+    image.addEventListener("keydown", function (event) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        openLightbox(image);
+      }
+    });
+  });
+
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") closeLightbox();
+  });
 })();

assets/styles.css

@@ -455,3 +455,30 @@ footer a:hover { color: var(--fg); }
   html { scroll-behavior: auto; }
   .masthead-mark { animation: none; }
 }
+
+/* Click-to-zoom lightbox: article figures open full-screen; a click or
+   Escape closes. The white padding keeps transparent-background SVGs
+   legible on the dark backdrop, matching the .plate treatment. */
+.project-page figure img,
+.showcase-grid figure img { cursor: zoom-in; }
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(10, 12, 11, 0.85);
+  cursor: zoom-out;
+}
+.lightbox img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  padding: 12px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
+}