Mediabox auf Deutsch: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
K (→‎Variante ab Contao 3.2 (HTML5))
 
(12 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{stub}}
 
−
[[Kategorie:Admin HOWTOS]]
 
 
[[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 (z.B. moo_mediabox_de.tpl) 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"
−
* Neues Template , Auswahl moo_mediabox, Template erstellen
+
* Neues Template , Auswahl moo_mediabox, Template erstellen (hier je nach Ausgabeformat das richtige auswählen)
−
* Template umbenennen (Bleistift) nach moo_mediabox_de (die Endung macht TL selber ran)
+
* 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
 
* Template editieren, Code anpassen wie unten gezeigt, speichern
  
 
Nun muss man im Layout noch das geänderte Template aktivieren, dazu unter:
 
Nun muss man im Layout noch das geänderte Template aktivieren, dazu unter:
−
* "Layout" - "Seitenlayouts" - Layout bearbeiten
+
* "Layout" - "Themes" - "Seitenlayouts" - Layout bearbeiten (Contao ab 2.9)
−
** hier nimmt man nun bei "MooTools-Templates" das Häkchen bei "moo_mediabox" raus und bei "moo_mediabox_de" rein.
+
* "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
 
* fertig
−
{{Hinweis|Obige Anleitung für TYPOlight 2.8, für Contao 2.9 folgt noch}}
 
  
−
<pre>
+
==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)==
 +
<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
 
<?php
  
Zeile 40: Zeile 163:
 
//--><!]]>
 
//--><!]]>
 
</script>  
 
</script>  
−
</pre>
+
</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 />
 
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.
 
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.
Zeile 46: Zeile 169:
  
 
----
 
----
−
--[[Benutzer:BugBuster|BugBuster]] 21:53, 28. Jun. 2010 (UTC)
+
--[[Benutzer:BugBuster|BugBuster]] 23:11, 2. Jan. 2012 (CET)

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

Irgendwie wird es im Mumble immer ruhiger wenn sich der Kim-Faktor verkleinert.

Sascha Müller
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge