Glightbox 'Bild x von x' hinzufügen

[derRenner]

Als feature fügt es Bild 3 von 37 in der linken oberen Ecke ein.
ersetzt contao-glightbox/contao/templates/js_glightbox.html5 aus inspiredminds/contao-glightbox

Installation:
die Datei js_glightbox.html5 unter /templates/myLayout/ ablegen.

Hinweis:
im Seitenlayout muss ggf. das Template unter JavaScript-Templates neu angewählt und gespeichert werden.

1. Haken weg und sichern
2. Haken rein und sichern

Zitat Sebastian via Slack:

Templates haben keine UUID - Daher keine Referenz wenn der "Pfad" sich ändert.

Anpassungen:
eigene Anpassungen (CSS, Platzierung, Text, ...) werden direkt im Template vorgenommen

<?php
// templates/mytheme/js_glightbox.html5

use Contao\Template;

$GLOBALS['TL_CSS']['glightbox'] = 'bundles/contaoglightbox/css/glightbox.min.css|static';
echo Template::generateScriptTag('bundles/contaoglightbox/js/glightbox.min.js', false, null);

?>
<script>
(function(){
  'use strict';
  document.querySelectorAll('a[data-lightbox]').forEach((element) => {
    if (!!element.dataset.lightbox) {
      element.setAttribute('data-gallery', element.dataset.lightbox);
    } else {
      element.setAttribute('data-gallery', crypto.randomUUID());
    }
  });
  const lightbox = GLightbox({
    selector: 'a[data-lightbox]',
    slideEffect: 'fade'
  });

  // Nummerierung beim Öffnen der Lightbox hinzufügen
  lightbox.on('open', () => {
    addFixedSlideNumber();
  });

  // Nummerierung bei jedem Slide-Wechsel aktualisieren
  lightbox.on('slide_changed', ({ current }) => {
    updateSlideNumber(current.index + 1, lightbox.elements.length);
  });

  // Nummerierung beim Schließen der Lightbox entfernen
  lightbox.on('close', () => {
    removeSlideNumber();
  });

  function addFixedSlideNumber() {
    let slideNumberElement = document.querySelector('.gslide-number');
    if (!slideNumberElement) {
      const numberContainer = document.createElement('div');
      numberContainer.className = 'gslide-number';
      numberContainer.style.position = 'fixed';
      numberContainer.style.top = '30px';
      numberContainer.style.left = '30px';
      numberContainer.style.color = '#fff';
      numberContainer.style.fontSize = '14px';
      numberContainer.style.zIndex = '999999';
      document.body.appendChild(numberContainer);
    }
  }

  function updateSlideNumber(current, total) {
    const slideNumberElement = document.querySelector('.gslide-number');
    if (slideNumberElement) {
      slideNumberElement.textContent = `Bild ${current} von ${total}`;
    }
  }

  function removeSlideNumber() {
    const slideNumberElement = document.querySelector('.gslide-number');
    if (slideNumberElement) {
      slideNumberElement.remove();
    }
  }

})();
</script>