Mediabox auf Deutsch: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
K (→‎Variante ab Contao 3.2 (HTML5))
 
(2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[Kategorie:Mediabox]]
 
[[Kategorie:Mediabox]]
 
{{AppliesTo|TLVersion=ab 2.8.2}}
 
{{AppliesTo|TLVersion=ab 2.8.2}}
−
Oft besteht der Wunsch, die Mediabox einzudeutschen.<br />Da die Buttons dabei schon auf neutralen Symbolen geändert wurden, reicht es nur den Text "x of y" zu ändern.<br />
+
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:
 
Dazu erstellt man eine Kopie von moo_mediabox.tpl|xhtml|html5 (z.B. moo_mediabox_de.html5) direkt über das Backend:
 
* "Layout" - "Templates"
 
* "Layout" - "Templates"
Zeile 13: Zeile 13:
 
* hier nimmt man nun bei "MooTools-Templates" das Häkchen bei "moo_mediabox" raus und bei "moo_mediabox_de" rein.
 
* hier nimmt man nun bei "MooTools-Templates" das Häkchen bei "moo_mediabox" raus und bei "moo_mediabox_de" rein.
 
* fertig
 
* fertig
 +
 +
==Variante ab Contao 3.2 (HTML5)==
 +
<source lang="javascript">
 +
<?php
 +
 +
// Add mediabox style sheet
 +
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css|screen';
 +
 +
?>
 +
 +
<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)==
 
==Variante ab Contao 2.11 (HTML5)==

Aktuelle Version vom 20. August 2014, 17:30 Uhr


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

Variante ab Contao 3.2 (HTML5)

<?php
 
// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css|screen';
 
?>
 
<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)

Von „https://de.contaowiki.org/index.php?title=Mediabox_auf_Deutsch&oldid=8260“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Marc plant CFC für CCACSSCSR.

C-C-A
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge