Contao: Colorbox anpassen

  • Snippets

Die jQuery-Colorbox bietet eine ganze Reihe an Konfigurationsmöglichkeiten. Eine häufige Anforderung besteht darin, bei mehreren Bildern in einer Colorbox nach der Anzeige des letzten Bildes zum ersten Bild weiterschalten zu können. Dies kann mit einer kleinen Änderung im Template der Colorbox ermöglicht werden:

Legen Sie unter "Templates" eine neue "j_colorbox.html5" an bzw. öffnen Sie das schon vorhandene Template. Suchen Sie nun nach der Zeile:

 

loop: false,

 

und ändern Sie den Wert in

 

loop: true,

 

Außerdem gibt es oft den Wunsch, anstatt der englischen Bezeichnung "image of" die deutsche Bezeichnung "Bild von" anzuzeigen. Auch das ist mit einer kleinen Änderung möglich. Fügen Sie dazu in das Template folgende Zeile ein:

 

current: "Bild {current} von {total}",

 

Das Template sollte nun so aussehen:

 

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';

?>

<script src="<?= TL_ASSETS_URL ?>assets/colorbox/js/colorbox.min.js"></script>
<script>
  jQuery(function($) {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop: true,
        current: "Bild {current} von {total}",
        rel: $(this).attr('data-lightbox'),
        maxWidth: '95%',
        maxHeight: '95%'
      });
    });
  });
</script>

 

Das Ergebnis dieser Änderungen sehen Sie, wenn Sie auf das nächste Bild klicken:

 

 

Viele weitere Konfigurationsmöglichkeiten der jQuery-Colorbox finden Sie unter https://www.jacklmoore.com/colorbox

 

Bildnachweis:

Photo by Kelli McClintock on Unsplash

 

Hinweis: Wie immer gilt, dass für das Funktionieren dieser Snippets keinerlei Haftung oder Gewährleistung übernommen wird.

Zurück