https://www.ekagger.de/fileadmin/scripts/news-lightbox.js?1778042756

1/**
2 * News-Lightbox Wrapper für EXT:skjsonlylightbox (GLightbox 3.3.1)
3 * Kirchenkreis An der Agger | ekagger.de
4 *
5 * Hintergrund: t3bootstrap rendert News-Bilder als nackte <img class="img-fluid">
6 * ohne <a>-Wrapper. GLightbox sucht aber nach selector '.lightbox' (siehe
7 * lightboxParams im Footer-HTML). Dieses Skript wickelt die News-Detail-Bilder
8 * im Frontend nachträglich in <a class="lightbox">-Tags und initialisiert
9 * GLightbox darauf neu.
10 *
11 * Caption-Übernahme: Falls neben dem <img> ein <div class="caption"> liegt,
12 * wird dessen Text als Beschreibung in der Lightbox angezeigt.
13 */
14(function () {
15  'use strict';
16
17  // Selektor: NUR News-Detail-Bilder, keine Navigation/Header/Footer.
18  // Die Detailseite hat .news.news-single als Container; Bilder liegen
19  // entweder in .thumbnail (rechte Spalte) oder direkt in .news-text-wrap.
20  var IMG_SELECTOR = [
21    '.news.news-single .thumbnail img.img-fluid',
22    '.news.news-single .news-text-wrap img.img-fluid',
23    '.news-single .thumbnail img.img-fluid',
24    '.news-single .news-text-wrap img.img-fluid'
25  ].join(', ');
26
27  function getCaption(img) {
28    // Caption-DIV im selben .thumbnail-Container suchen
29    var thumb = img.closest('.thumbnail');
30    if (thumb) {
31      var cap = thumb.querySelector('.caption');
32      if (cap && cap.textContent.trim()) {
33        return cap.textContent.trim();
34      }
35    }
36    // Fallback: alt-Attribut, falls vorhanden und nicht leer
37    if (img.alt && img.alt.trim()) {
38      return img.alt.trim();
39    }
40    return '';
41  }
42
43  function wrapNewsImages() {
44    var imgs = document.querySelectorAll(IMG_SELECTOR);
45    var wrapped = 0;
46
47    imgs.forEach(function (img) {
48      // Bereits in einem Anker → überspringen
49      if (img.closest('a')) return;
50
51      var fullSrc = img.currentSrc || img.src;
52      var caption = getCaption(img);
53
54      var link = document.createElement('a');
55      link.href = fullSrc;
56      link.className = 'lightbox';
57      link.setAttribute('data-gallery', 'news-detail');
58      if (caption) {
59        // GLightbox: description via data-glightbox
60        link.setAttribute('data-glightbox', 'description: ' + caption);
61        link.setAttribute('title', caption);
62      }
63
64      img.parentNode.insertBefore(link, img);
65      link.appendChild(img);
66      wrapped++;
67    });
68
69    return wrapped;
70  }
71
72  function initLightbox() {
73    if (typeof GLightbox !== 'function') return;
74    GLightbox({
75      selector: '.lightbox',
76      touchNavigation: true,
77      loop: true,
78      openEffect: 'fade',
79      closeEffect: 'fade'
80    });
81  }
82
83  // Bilder so früh wie möglich umwickeln
84  if (document.readyState !== 'loading') {
85    wrapNewsImages();
86  } else {
87    document.addEventListener('DOMContentLoaded', wrapNewsImages);
88  }
89
90  // GLightbox nach window.load (re-)initialisieren — dann ist die
91  // skjsonlylightbox-Bibliothek garantiert geladen
92  if (document.readyState === 'complete') {
93    initLightbox();
94  } else {
95    window.addEventListener('load', initLightbox);
96  }
97})();