From c14683fe37fabe06082f43e8bf67debc4cca7297 Mon Sep 17 00:00:00 2001 From: erdgeist Date: Tue, 21 Jul 2026 14:24:59 +0200 Subject: 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. --- public/javascripts/public.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'public/javascripts/public.js') 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) -- cgit v1.3