Tutorials von Thomas Frei-Herrmann

Lytebox in Grau - und automatischer Start - Seite neu laden

Lytebox im Farbschema “Grau”, ohne inneren Rahmen um das Foto, langsamerer Diashow und reduzierter Opazität ...

Guckt Euch hierzu zunächst mein Tutorial an.

... folgende Änderungen habe ich dafür in der Datei “lytebox.js” ab Zeile 25 vorgenommen:

this.innerBorder= false;
this.resizeSpeed= 3;
this.maxOpacity= 40;

Das Skript unten in die Layout-HTML “Zwischen Head Tags” eingebracht um diese Seite auf das Farbschema “Grau” einzustellen.

<script type="text/javascript">
    var lyteboxTheme = 'grey';
</script>

... folgende Class steht in der HTML der 4 Fotos, wobei slideInterval:6000 das Intervall zwischen den Fotos auf 6 Sekunden verlängert.

class="lyteshow" data-lyte-options="group:show showNavigation:true autoEnd:false slideInterval:6000" data-title="Eichhörnchen"

Automatischer Start:

Hierfür gebt Ihr zunächst dem Bild, das automatisch starten soll, eine eindeutige ID. Diese habe ich hier “layer” genannt. Stellt hierfür Eure Arbeitsfläche auf “Fortgeschritten”.

> Menü oben > Ansicht > Arbeitsfläche > Fortgeschritten

Fügt dann dieses Skript in die HTML des Layouts ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

In dieser Funktion wird mit dem Befehl “getElementById” auf diese ID - hier “layer” - zugegriffen.

<script type="text/javascript" language="JavaScript">
   window.onload=overlay;
   function overlay(){
      setTimeout(function () {
         document.getElementById('layer').onclick();
      }, 0);
   }
</script>

Nachdem Ihr das Bild verlinkt habt, fügt Ihr wieder die Class in die Link-HTML ein und bezieht Euch zusätzlich noch auf diese ID.

id="layer" class="lyteshow" data-lyte-options="group:show showNavigation:true autoEnd:false slideInterval:6000" data-title="Eichhörnchen"

nach oben