Render asset credit inside the gallery lightbox correctly

GLightbox's own selector-based description feature never actually
resolved a selector in three different attempts -- literal text,
then a resolved-but-empty div, then apparently not firing at all
against the installed (unversioned) build. Replaced with a small
afterSlideLoad handler that reads a plain data-credit-selector
attribute and copies the real element's HTML into the slide's
description area directly, depending only on GLightbox handing back
a real DOM node per slide -- a much smaller contract than trusting
its own caption-resolution feature.

Renamed the credit div's class from glightbox-desc, since that name
is reserved by the library's own bundled CSS (display: none
!important) and can't be reliably overridden from here.

Also: distinguishes the credit line and the "N Bilder" caption from
ordinary body text (italic, muted, matching .author_and_date's
existing convention), and makes the lightbox's caption card follow
the site's light/dark toggle via Canvas/CanvasText, since the
library's bundled theme never adapts to it on its own.

1 files changed, 20 insertions, 1 deletions

diff --git a/public/javascripts/public.js b/public/javascripts/public.js
index a9250ca..7f38f66 100644
--- a/public/javascripts/public.js
+++ b/public/javascripts/public.js
@@ -1,6 +1,25 @@
 document.addEventListener('DOMContentLoaded', function(){
 
-  GLightbox({ selector: '.glightbox' });
+  GLightbox({
+    selector: '.glightbox',
+    afterSlideLoad: function(slideData) {
+      var trigger = document.querySelectorAll('.glightbox')[slideData.index];
+      var selector = trigger && trigger.dataset.creditSelector;
+      if (!selector) return;
+
+      var source = document.querySelector(selector);
+      var container = slideData.slide.querySelector('.gdesc-inner');
+      if (!source || !container) return;
+
+      var target = container.querySelector('.gslide-desc');
+      if (!target) {
+        target = document.createElement('div');
+        target.className = 'gslide-desc';
+        container.appendChild(target);
+      }
+      target.innerHTML = source.innerHTML;
+    }
+  });
 
   document.getElementById("light-mode").addEventListener("change", () => {
     if (document.getElementById("light-mode").checked)