Mediabox (Mootools) mit deutschen Labels

von Oliver Richter (Kommentare: 0)

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.

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 1 und 7.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

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