Glightbox 'Bild x von x' hinzufügen
von Bernhard Renner
Hier zeige ich dir, wie du in die Glightbox in die obere linke Ecke ein 'Bild 2 von 13' hinzufügen kannst.
Um in der Glightbox links oben die Nummer des angezeigten Bildes und die Gesamtanzahl der in der Galerie vorhandenen Bilder anzeigen zu können, muss das Template angepasst werden.
Hierzu wird das Template contao-glightbox/contao/templates/js_glightbox.html5 aus der Erweiterung inspiredminds/contao-glightbox ersetzt.
Hinweis
im Seitenlayout muss ggf. das Template unter JavaScript-Templates neu angewählt und gespeichert werden.
- Haken weg und sichern
- Haken rein und sichern
Hierzu hatte Sebastian via Slack gemeint: Templates haben keine UUID - Daher keine Referenz wenn der "Pfad" sich ändert.
eigene Anpassungen (CSS, Platzierung, Text, ...) werden direkt im Template vorgenommen.
Das Template /templates/myLayout/js_glightbox.html5 wird wie folgt angepasst:
<?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>
Kommentare
Einen Kommentar schreiben