Glightbox 'Bild x von x' hinzufügen
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.
- Haken weg und sichern
- Haken rein und sichern
Zitat Sebastian via Slack:
Zitat:
Templates haben keine UUID - Daher keine Referenz wenn der "Pfad" sich ändert.
Anpassungen:
eigene Anpassungen (CSS, Platzierung, Text, ...) werden direkt im Template vorgenommen
PHP-Code:
<?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>
