Mediabox - Weißes Thema: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
(→‎Contao 3.2 - moo_mediabox_white.xhtml)
 
(13 dazwischenliegende Versionen von 4 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}}
−
Ab TYPOlight Version 2.8.2 wird mit der Mediabox ein sogenanntes "White Theme" mitgeliefert.<br />
+
Ab Contao Version 2.8.2 wird mit der Mediabox ein sogenanntes "White Theme" mitgeliefert.<br />
 
Dabei wird der Hintergrund mit der Farbe Weiß halbtransparent und auch der Rahmen um das Bild wird weiß.<br />
 
Dabei wird der Hintergrund mit der Farbe Weiß halbtransparent und auch der Rahmen um das Bild wird weiß.<br />
 
Hier nun die Info wie man das "White Theme" aktiviert.<br />
 
Hier nun die Info wie man das "White Theme" aktiviert.<br />
Zeile 9: Zeile 7:
 
* "Layout" - "Templates"
 
* "Layout" - "Templates"
 
* Neues Template , Auswahl moo_mediabox, Template erstellen
 
* Neues Template , Auswahl moo_mediabox, Template erstellen
−
* Template umbenennen (Bleistift) nach moo_mediabox_white (die Endung macht TL selber ran)
+
* Template umbenennen (Bleistift) nach moo_mediabox_white (die Endung macht Contao/TYPOlight selber ran)
 
* 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_white" rein.
+
* "Layout" - "Seitenlayouts" - Layout bearbeiten  (Contao bis 2.8.x)
 +
* hier nimmt man nun bei "MooTools-Templates" das Häkchen bei "moo_mediabox" raus und bei "moo_mediabox_white" rein.
 
* fertig
 
* fertig
−
{{Hinweis|Obige Anleitung für TYPOlight 2.8, für Contao 2.9 folgt noch}}
 
  
−
<pre>
+
==Contao 3.2 - moo_mediabox_white.html5==
 +
 
 +
<source lang="php">
 +
<?php
 +
 
 +
// Add the mediabox style sheet
 +
//$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';
 +
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvWhite21.css||static';
 +
 
 +
?>
 +
 
 +
<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
 +
      }, 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>
 +
</source>
 +
Hier wurde nur die CSS Zeile geändert.
 +
 
 +
==Contao 3.2 - moo_mediabox_white.xhtml==
 +
<source lang="php">
 +
<?php
 +
 
 +
// Add the mediabox style sheet
 +
//$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';
 +
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvWhite21.css||static';
 +
 
 +
?>
 +
 
 +
<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
 +
<script type="text/javascript">
 +
  /* <![CDATA[ */
 +
  (function($) {
 +
    window.addEvent('domready', function() {
 +
      var links = $$('a').filter(function(el) {
 +
        return el.rel && el.rel.test(/^lightbox/i);
 +
      });
 +
      $$(links).mediabox({
 +
        /* Put custom options here */
 +
      }, 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]));
 +
      });
 +
      $('mbImage').addEvent('swipe', function(e) {
 +
        (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
 +
      });
 +
    });
 +
  })(document.id);
 +
  /* ]]> */
 +
</script>
 +
</source>
 +
Hier wurde nur die CSS Zeile geändert.
 +
 
 +
==Contao 2.10 - moo_mediabox_white.xhtml==
 +
<source lang="php">
 +
<?php
 +
 
 +
// Add mediabox style sheet
 +
//$GLOBALS['TL_CSS'][] = TL_PLUGINS_URL . 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css|screen';
 +
$GLOBALS['TL_CSS'][] = TL_PLUGINS_URL . 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvWhite21.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({/* Put custom options here */}, 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>
 +
Hier wurde nur die CSS Zeile geändert.
 +
 
 +
==Contao 2.9.1 - moo_mediabox_white.tpl==
 +
<source lang="php">
 +
<?php
 +
 
 +
// Add mediabox style sheet
 +
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox_white.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({/* Put custom options here */}, 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>
 +
Hier wurde nur die CSS Zeile geändert.
 +
 
 +
==Contao 2.8 - moo_mediabox_white.tpl==
 +
<source lang="php">
 
<?php
 
<?php
  
Zeile 42: Zeile 168:
 
//--><!]]>
 
//--><!]]>
 
</script>  
 
</script>  
−
</pre>
+
</source>
 +
 
 
Hier wurde nur die CSS Zeile geändert.
 
Hier wurde nur die CSS Zeile geändert.
−
<br /><br />
+
 
 +
 
 +
 
  
 
----
 
----
−
--[[Benutzer:BugBuster|BugBuster]] 21:55, 28. Jun. 2010 (UTC)
+
--[[Benutzer:BugBuster|BugBuster]] 22:59, 2. Jan. 2012 (CET)

Aktuelle Version vom 15. Dezember 2013, 23:24 Uhr


betrifft
TYPOlight Version ab 2.8.2

Ab Contao Version 2.8.2 wird mit der Mediabox ein sogenanntes "White Theme" mitgeliefert.
Dabei wird der Hintergrund mit der Farbe Weiß halbtransparent und auch der Rahmen um das Bild wird weiß.
Hier nun die Info wie man das "White Theme" aktiviert.
Dazu erstellt man eine Kopie von moo_mediabox.tpl (z.B. moo_mediabox_white.tpl) direkt über das Backend:

  • "Layout" - "Templates"
  • Neues Template , Auswahl moo_mediabox, Template erstellen
  • Template umbenennen (Bleistift) nach moo_mediabox_white (die Endung macht Contao/TYPOlight selber ran)
  • 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 (Contao bis 2.8.x)
  • hier nimmt man nun bei "MooTools-Templates" das Häkchen bei "moo_mediabox" raus und bei "moo_mediabox_white" rein.
  • fertig

Contao 3.2 - moo_mediabox_white.html5

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

Hier wurde nur die CSS Zeile geändert.

Contao 3.2 - moo_mediabox_white.xhtml

<?php
 
// Add the mediabox style sheet
//$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvWhite21.css||static';
 
?>
 
<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script type="text/javascript">
  /* <![CDATA[ */
  (function($) {
    window.addEvent('domready', function() {
      var links = $$('a').filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
      });
      $$(links).mediabox({
        /* Put custom options here */
      }, 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]));
      });
      $('mbImage').addEvent('swipe', function(e) {
        (e.direction == 'left') ? $('mbNextLink').fireEvent('click') : $('mbPrevLink').fireEvent('click');
      });
    });
  })(document.id);
  /* ]]> */
</script>

Hier wurde nur die CSS Zeile geändert.

Contao 2.10 - moo_mediabox_white.xhtml

<?php
 
// Add mediabox style sheet
//$GLOBALS['TL_CSS'][] = TL_PLUGINS_URL . 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css|screen';
$GLOBALS['TL_CSS'][] = TL_PLUGINS_URL . 'plugins/mediabox/'. MEDIABOX .'/css/mediaboxAdvWhite21.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({/* Put custom options here */}, 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>

Hier wurde nur die CSS Zeile geändert.

Contao 2.9.1 - moo_mediabox_white.tpl

<?php
 
// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox_white.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({/* Put custom options here */}, 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>

Hier wurde nur die CSS Zeile geändert.

Contao 2.8 - moo_mediabox_white.tpl

<?php
 
// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox_white.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({/* Put custom options here */}, 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>

Hier wurde nur die CSS Zeile geändert.



--BugBuster 22:59, 2. Jan. 2012 (CET)

Von „https://de.contaowiki.org/index.php?title=Mediabox_-_Weißes_Thema&oldid=7874“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich habe es mir mal grob ausgerechnet: Bei jeder Extension von mir verbrauche ich im Durchschnitt 6 Pizzen. Wenn Dir meine Extensions gefallen, sende mir bitte mehr Pizzen. Die Adresse gibt es auf Anfrage!

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge