Mediabox auf Deutsch
Aus Contao Community Documentation
| betrifft | |
|---|---|
| TYPOlight Version | ab 2.8.2 |
Oft besteht der Wunsch, die Mediabox einzudeutschen.
Da die Buttons dabei schon auf neutrale Symbole geändert wurden, reicht es, nur den Text "x of y" zu ändern.
Dazu erstellt man eine Kopie von moo_mediabox.tpl|xhtml|html5 (z.B. moo_mediabox_de.html5) direkt über das Backend:
- "Layout" - "Templates"
- Neues Template , Auswahl moo_mediabox, Template erstellen (hier je nach Ausgabeformat das richtige auswählen)
- Template umbenennen (Bleistift) nach moo_mediabox_de (die Endung fügt Contao selber an, also vorher das richtige Template auswählen)
- Template editieren, Code anpassen wie unten gezeigt, speichern
Nun muss man im Layout noch das geänderte Template aktivieren, dazu unter:
- "Layout" - "Themes" - "Seitenlayouts" - Layout bearbeiten (Contao ab 2.9)
- "Layout" - "Seitenlayouts" - Layout bearbeiten (TYPOlight bis 2.8.x)
- hier nimmt man nun bei "MooTools-Templates" das Häkchen bei "moo_mediabox" raus und bei "moo_mediabox_de" rein.
- fertig
Inhaltsverzeichnis
Variante ab Contao 3.2 (HTML5)
<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>
Die Zeile mit "counterText" wurde eingefügt.
Variante ab Contao 2.11 (HTML5)
<?php // Add mediabox style sheet $GLOBALS['TL_CSS'][] = TL_PLUGINS_URL . 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css|screen'; ?> <script src="<?php echo TL_PLUGINS_URL; ?>plugins/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script> <script> Mediabox.scanPage = function() { var links = $$('a').filter(function(el) { return el.getAttribute('data-lightbox') != null; }); $$(links).mediabox({ counterText: '<p>(Bild {x} von {y})</p>' }, 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])); }); }; window.addEvent('domready', Mediabox.scanPage); </script>
Die Zeile mit "counterText" wurde eingefügt, der deutsche Text wurde noch in <p> Tags eingebunden.
Variante ab Contao 2.10 (XHTML)
<?php // Add mediabox style sheet $GLOBALS['TL_CSS'][] = TL_PLUGINS_URL . 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css|screen'; ?> <script type="text/javascript" src="<?php echo TL_PLUGINS_URL; ?>plugins/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script> <script type="text/javascript"> /* <![CDATA[ */ Mediabox.scanPage = function() { var links = $$('a').filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({counterText: '<p>(Bild {x} von {y})</p>'}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi,' '); var relsize = rel0.split(' '); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent('domready', Mediabox.scanPage); /* ]]> */ </script>
Der deutsche Text wurde noch in <p> Tags eingebunden.
Variante ab Contao 2.9.1
<?php // Add mediabox style sheet $GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css?'. MEDIABOX .'|screen'; ?> <script type="text/javascript" src="plugins/mediabox/js/mediabox.js?<?php echo MEDIABOX; ?>"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- Mediabox.scanPage = function() { var links = $$("a").filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({counterText: '<p><br />(Bild {x} von {y})</p>'}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi," "); var relsize = rel0.split(" "); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); //--><!]]> </script>
Der deutsche Text wurde noch in <p> Tags und einem <br> eingebunden. Grund ist ein kleiner Bug in Mediabox, der dazu führen kann, dass der Beschreibungstext nicht vollständig angezeigt wird, da die Höhe dafür falsch berechnet wird.
Die Tags zwingen nun die Mediabox dazu die Höhe zu erweitern. Dadurch entstehen zwar ab und zu darunter unschöne Abstände, aber der Text ist dafür vollständig, was wichtiger ist.
Variante für Contao 2.8
<?php // Add mediabox style sheet $GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen'; ?> <script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- Mediabox.scanPage = function() { var links = $$("a").filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({counterText: '<p><br />(Bild {x} von {y})</p>'}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi," "); var relsize = rel0.split(" "); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); //--><!]]> </script>
Der deutsche Text wurde noch in <p> Tags und einem <br> eingebunden. Grund ist ein kleiner Bug in Mediabox, der dazu führen kann, dass der Beschreibungstext nicht vollständig angezeigt wird, da die Höhe dafür falsch berechnet wird.
Die Tags zwingen nun die Mediabox dazu die Höhe zu erweitern. Dadurch entstehen zwar ab und zu darunter unschöne Abstände, aber der Text ist dafür vollständig, was wichtiger ist.
--BugBuster 23:11, 2. Jan. 2012 (CET)
