Quelltext der Seite Mediabox auf Deutsch

[[Kategorie:Mediabox]]
{{AppliesTo|TLVersion=ab 2.8.2}}
Oft besteht der Wunsch, die Mediabox einzudeutschen.<br />Da die Buttons dabei schon auf neutrale Symbole geändert wurden, reicht es, nur den Text "x of y" zu ändern.<br />
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

==Variante ab Contao 3.2 (HTML5)==
<source lang="javascript">
<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>
</source>
Die Zeile mit "counterText" wurde eingefügt.
<br /><br />

==Variante ab Contao 2.11 (HTML5)==
<source lang="javascript">
<?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>
</source>
Die Zeile mit "counterText" wurde eingefügt, der deutsche Text wurde noch in <nowiki><p></nowiki> Tags eingebunden.
<br /><br />

==Variante ab Contao 2.10 (XHTML)==
<source lang="javascript">
<?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>
</source>
Der deutsche Text wurde noch in <nowiki><p></nowiki> Tags eingebunden.
<br /><br />

==Variante ab Contao 2.9.1==
<source lang="javascript">
<?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> 
</source>
Der deutsche Text wurde noch in <nowiki><p></nowiki> Tags und einem <nowiki><br></nowiki> 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.<br />
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.
<br /><br />
==Variante für Contao 2.8==
<source lang="javascript">
<?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> 
</source>
Der deutsche Text wurde noch in <nowiki><p></nowiki> Tags und einem <nowiki><br></nowiki> 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.<br />
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.
<br /><br />

----
--[[Benutzer:BugBuster|BugBuster]] 23:11, 2. Jan. 2012 (CET)