Tipps und Tricks Filter

Mediabox auf Deutsch / Weißes Thema

In Mediabox wird ein sogenanntes "white theme" mitgeliefert. Dabei wird der Hintergrund mit der Farbe Weiß halbtransparent und auch der Rahmen um das Bild wird weiß.

Hier nun für Contao 3.2 gezeigt, wie man auf das weiße Theme umstellt und den Text "x of y" auf Deutsch umstellt. Dazu erstellt man eine Kopie von moo_mediabox.html5 / moo_mediabox.xhmtl je nach Ausgabeformat. Dort ändert man den Code wie folgt ab, hier für die html5 Variante:

<?php

// Add the mediabox style sheet, here in white
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvWhite21.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script>
(function($) {
  window.addEvent('domready', function() {
    var links = $$('a').filter(function(el) {
      return el.getAttribute('data-lightbox') != null;
    });
    $$(links).mediabox({
      // Put custom options here
      counterText: '<br>(Bild {x} von {y})'
    }, function(el) {
  	  return [el.href, el.title, el.getAttribute('data-lightbox')];
    }, function(el) {
      var data = this.getAttribute('data-lightbox').split(' ');
      return (this == el) || el.getAttribute('data-lightbox').match(data[0]);
    });
    // Support swiping on mobile devices
    $('mbImage').addEvent('swipe', function(e) {
      (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
    });
  });
})(document.id);
</script>

Natürlich geht das Eindeutschen auch mit dem schwarzen Layout. Dazu einfach die CSS Zeile oben so belassen wie im Original. Eingefügt wurde hier diese Zeile:

counterText: '<br>(Bild {x} von {y})'

Wer nicht nur Bilder sondern auch Videos damit anzeigen läßt, sollte dann "Bild" weglassen. Der Text wird durch den "br" Tag unter dem Titeltext angezeigt.