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, 5 insertions, 1 deletions

diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 7fb1dc2..f378c46 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -282,6 +282,7 @@ cccms = {
           large: $(this).data('large-url'),
           original: $(this).data('original-url'),
           name: $(this).data('name'),
+          hasCredit: $(this).data('has-credit') === true,
           headline: $(this).data('headline') === true
         };
       }).get();
@@ -320,8 +321,11 @@ cccms = {
         : 'inline-image inline-image--half inline-image--' + placement;
 
       var esc = cccms.inline_images.escape_attr;
+      var titleForGlightbox = (item.name || '').replace(/;/g, ',');
+      var glightboxOpts = 'title: ' + esc(titleForGlightbox) +
+        (item.hasCredit ? '; description: #credit_for_asset_' + esc(item.id) : '') + ';';
       var html = '<a href="' + esc(item.original) + '" class="glightbox" data-gallery="page-' + esc(cccms.inline_images.node_id) + '"' +
-                 ' data-title="' + esc(item.name) + '" data-description="#credit_for_asset_' + esc(item.id) + '">' +
+                 ' data-glightbox="' + glightboxOpts + '">' +
                  '<img src="' + esc(item.large) + '" class="' + classes + '" alt="' + esc(item.name) + '"></a>';
 
       cccms.inline_images.editor.insertContent(html);