Mediabox (Mootools) mit deutschen Labels

von Oliver Richter

Um die in Contao verwendete Mediabox, ähnlich wie die Colorbox, mit deutschen Labels wie "1 von 2" auszustatten, muss zuerst ein mal das entsprechende Template "moo_mediabox.html5" bzw. "moo_mediabox.xhtml" in den Template-Ordner des jeweiligen Themes kopiert und die Datei anschließend bearbeitet werden.

Dies können Sie über den Menüpunkt "Layout" - "Templates" erledigen. Klicken Sie dort auf "Neues Template" und erzeugen Sie in dem Ihrem Theme zugeordneten Templates-Ordner eine Kopie des jeweilgen Templates - hier ist es beispielsweise die Datei "moo_mediabox.html5".

Um nun den deutschen Text "1 von 2" anstellte von "1 of 2" zu erzeugen ist im Javascript-Bereich des Templates ganz konkret die folgende Zeile verantwortlich..., 

counterText: '({x} von {y})'

... die dem Template hinzugefügt werden muss - direkt unterhalb der Zeile des Kommentar "Put custom options here". Weitere mögliche anzupassenden sind zum Beispiel:

buttonText: ['<big>«</big>','<big>»</big>','<big>×</big>'],
linkText: '<a href="{x}" target="_new">{x}</a><br/>open in a new tab</div>'

Beachten Sie aber die genaue Syntax und das Komma am Ende der Zeile, sofern eine weitere Option definiert wird.

Hier nun noch mal der komplette Inhalt der Template-Datei "moo_mediabox.html5" inkl. der deutschen Label-Angabe für die Nummerierung und dem deutschen Text für die im neuen Fenster zu öffnenen Link:

<?php

// Add the mediabox style sheet
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. $GLOBALS['TL_ASSETS']['MEDIABOX'] .'/css/mediaboxAdvBlack21.css|static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo $GLOBALS['TL_ASSETS']['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: '({x} von {y})',
        linkText: '<a href="{x}" target="_new">{x}</a><br/>In einem neuen Tab öffnen</div>'
      }, function(el) {
    	  return [el.href, el.title, el.getAttribute('data-lightbox')];
      }, function(el) {
        var data = this.getAttribute('data-lightbox').split(' ');
        return (this == el) || (data[0] && el.getAttribute('data-lightbox').match(data[0]));
      });
      $('mbImage').addEvent('swipe', function(e) {
        (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
      });
    });
  })(document.id);
</script>

Weitere mögliche Optionen finden Sie in der Datei "mediabox-uncompressed.js" im Ordner /asset/mootools/mediabox/1.4.6/js/ ab Zeile 58 ff (Stand der Daten 18.06.2015 / Contao 3.4.5). 

Weitere Informationen finden Sie auch in meinem älteren Artikel zur Mediabox.

Kommentare

Einen Kommentar schreiben

Bitte addieren Sie 6 und 8.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.