 |
|
Änderungen der Versionen 5.2 bis 5.5 - Ich verwende hier auf dieser Beispiel-Seite die Version 5.4
Ihr könnt eine mit der Version 5.1 erstellte Seite auch so lassen, lediglich der Code für den DIV-Container hat sich geändert. Lest Euch auch die “Release History” oben auf der Lytebox-Seite durch. Es wurden etliche Bugs gefixt und einige Optionen sind hinzugekommen.
Hier die wichtigsten:
- Version 5.5 enthält einige Bug-Fixes
- Version 5.4 enthält einige Bug-Fixes
- Ab Version 5.3 wurde die Möglichkeit geschaffen, mit einem Skript das Farbschema für einzelne Seiten festzulegen.
- Ab Version 5.2 erkennt Lytebox nun automatisch, ob es sich um die Class “lytebox”, “lyteshow” oder “lyteframe” handelt. Es kann also,
muss aber nicht, auch als Class immer nur “lytebox” eingegeben werden.
- Es können auch wieder die Attribute “rel” oder “rev” anstatt der Class, zur besseren Abwärts-Kompatibilität, verwendet werden.
- Die Lytebox kann nun optional mit runden oder auch eckigen Rahmen angezeigt werden.
- Es ist eine Ajax-Funktion hinzugekommen, um z.B. Eingaben in der Box unmittelbar zu ändern, sowie etliche andere Daten-Funktionen.
|
|
|
Mein Tutorial bezieht sich auf Version 5.1 bis Version 5.4 erschienen am 20.11.2011
Hier geht es zum Original-Download der neuesten Lytebox-Version:
http://lytebox.com/
Nachdem Ihr Euch die Datei:
lytebox_v5.4.zip
herunter geladen habt, entpackt Ihr diese ZIP-Datei. Ihr erhaltet folgende Dateien und Ordner:
images - Ordner mit den Bildern für die Lytebox-Skripte
lytebox.css - CSS-Datei der Lytebox. Diese Datei könnt Ihr ändern und Euren Bedürfnissen anpassen.
lytebox.js - Javascript-Datei der Lytebox. Diese Datei könnt Ihr ändern. Für alle Optionen guckt bitte auf der Lytebox-Seite.
Ich habe mir zunächst einen Ordner (lyteboxscripts) erstellt, der diese Dateien enthält. Ihr könnt Euch diesen auch hier downloaden:
|
|
|
Letzte Änderung am 21.11.2011 - Version 5.4
lyteboxscripts, den Ihr Euch hier downloaden könnt. Downloads Lytebox v5.4 (deutsch modifiziert) insgesamt seit 03.10.2011:
2256
|
|
|
Letzte Änderung am 26.09.2011 - Version 5.1
lyteboxscripts, den Ihr Euch hier downloaden könnt. Downloads Lytebox v5.1 (deutsch modifiziert) insgesamt seit 26.09.2011:
137
|
|
|
Letzte Änderung am 21.11.2011 - 10:00 Uhr - an Version 5.4 angepasst
Vorlage meiner Beispielseite ab NOF 12 Update 1. Downloads Vorlage für alle Lytebox Versionen insgesamt seit 26.09.2011:
427
|
|
|
Bemerkung zu meiner Vorlage ab NOF 12 Update 1 (angepasst an Version 5.4):
Den entsprechenden Ordner “lyteboxscripts” müsst Ihr zusätzlich zu meiner Vorlage downloaden, die Ihr genauso für Version 5.1 als auch für Version 5.2, 5.3 und Version 5.4 verwenden könnt. Ihr müsstet lediglich, bei Verwendung von Version 5.1, den DIV-Container anpassen und für ein anderes Farbschema das Skript entfernen.
|
|
 |
|
|
Diesen so vorbereiteten Ordner lyteboxscripts, den Ihr Euch oben, an meinen “Download-Buttons” herunterladen könnt, kopiert Ihr dann mit Eurem FTP-Programm auf Euren Server in das Stammverzeichnis Eures Projektes, also dort wo sich auch Eure Startseite (index.html) befindet und auch in den Ordner “Lokale Publizierung” Eures Projektes im Verzeichnis “User Sites” auf Euren PC. Somit stehen dann alle benötigten Skripte auf dem Server zur Verfügung und Ihr könnt die Lytebox auch schon lokal ausprobieren.
Nun müsst Ihr die Verweise als Link zu diesen Skripten in die HTML des Layouts von der Seite einbauen, auf der Ihr die Lytebox einbauen wollt.
> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” und das Skript (unten) “Zwischen Head Tags” einfügen.
|
|
|
... auf der Startseite (index.html) würde das dann so aussehen.
Die relative Pfadangabe also mit einem Punkt ./ (bleibe im gleichen Verzeichnis, im Stammverzeichnis).
|
|
|
<script type="text/javascript" language="javascript" src="./lyteboxscripts/lytebox.js"></script>
<link rel="stylesheet" href="./lyteboxscripts/lytebox.css" type="text/css" media="screen" />
|
|
|
... auf einer Unterseite, die sich normalerweise im Ordner HTML bei NOF befindet, würde das dann so aussehen.
Die relative Pfadangabe also mit zwei Punkten ../ (gehe ein Verzeichnis höher, aus dem Ordner HTML in das Stammverzeichnis).
|
|
|
|
<script type="text/javascript" language="javascript" src="../lyteboxscripts/lytebox.js"></script>
<link rel="stylesheet" href="../lyteboxscripts/lytebox.css" type="text/css" media="screen" />
|
|
|
|
|
|
|
Übersicht meiner Beispiele im Einzelnen:
|
|
|
Einzelnes Foto
Zunächst erstellt Ihr Euch Euer Piktogramm (das kleine Foto) und fügt es ganz normal auf der Seite ein. Wenn Ihr wollt, könntet Ihr im Fenster “Bild-Eigenschaften” auf den Button “HTML” klicken und dort diesem Piktogramm noch einen Titel (bei Maus über) geben, also bei mir:
|
|
|
title="Eichhörnchen"
|
|
|
den Ihr dort “im Tag” (ab NOF 11 “innen”) eintragt.
|
|
|
... dann klickt Ihr im Fenster “Bild-Eigenschaften” auf den Button “Link” und wählt bei “Linktyp” > Datei-Link. Dort sucht Ihr das große Foto auf Eurem PC (ich habe es hier bereits in meinen Ordner “Assets” kopiert) und klickt auf den Button “Speichern”. In dem Screenshot unten seht Ihr bereits alle meine verwendeten Datei-Links, da Ihr alle großen Fotos, bei allen meinen Bilder-Beispielen, so verlinken müsst.
|
|
 |
|
|
Diese Lytebox arbeitet, im Gegensatz zur alten Lytebox, mit CSS-Klassen (anstatt mit REL-Attributen). Ab Version 5.2 genügt es immer nur die Class “lytebox” zu verwenden, denn die Skripte erkennen automatisch, ob es sich um die “lytebox”, “lyteshow” oder “lyteframe” handelt. Ihr könnt die unterschiedlichen Klassen jedoch auch benennen, so wie ich es hier gemacht habe.
Beim einzelnen Foto wird die
class = “lytebox”
verwendet. Dazu verwendet Ihr diesen Code und tragt lediglich noch den Titel, der in der Box erscheinen soll, ein.
Hier: “Unser Eichhörnchen Erwin”
Dazu klickt Ihr in dem gleichen “Link” Fenster unten links auf den Button “HTML” und fügt den Code “im Tag” (ab NOF 11 “innen”) ein.
|
|
|
Gruppe von Fotos
Bei einer Gruppe von Fotos wird die
class = “lytebox” und zusätzlich noch ein Gruppen-Name (group:), hier habe ich diese Gruppe “garten” genannt,
verwendet. Dazu verwendet Ihr diesen Code und tragt diese Gruppe ein und noch den Titel, der in der Box erscheinen soll.
Hier: “Eichhörnchen”
Dazu klickt Ihr in dem gleichen “Link” Fenster unten links auf den Button “HTML” und fügt den Code “im Tag” (ab NOF 11 “innen”) ein.
Alle bei mir vorhandenen 4 Fotos dieser Gruppe erhalten den gleichen Gruppen-Namen, nur unterschiedliche Titel.
|
|
|
Gruppe von Fotos als Diashow
Bei einer Diashow wird die
class = “lyteshow” und zusätzlich noch ein Gruppen-Name (group:), hier habe ich diese Gruppe “show” genannt,
verwendet. Dazu verwendet Ihr diesen Code und tragt diese Gruppe ein und noch den Titel, der in der Box erscheinen soll.
Hier: “Eichhörnchen”
Dazu klickt Ihr in dem gleichen “Link” Fenster unten links auf den Button “HTML” und fügt den Code “im Tag” (ab NOF 11 “innen”) ein.
Alle bei mir vorhandenen 4 Fotos dieser Gruppe erhalten den gleichen Gruppen-Namen, nur unterschiedliche Titel.
|
|
|
Gruppe von Fotos als Diashow hinter einem Piktogramm
Bei einer Diashow wird die
class = “lyteshow” und zusätzlich noch ein Gruppen-Name (group:), hier habe ich diese Gruppe “gruppe” genannt,
verwendet. Dazu verwendet Ihr diesen Code und tragt diese Gruppe ein und noch den Titel, der in der Box erscheinen soll.
Hier: “Eichhörnchen”
Dazu klickt Ihr in dem gleichen “Link” Fenster unten links auf den Button “HTML” und fügt den Code “im Tag” (ab NOF 11 “innen”) ein.
|
|
|
class="lyteshow" data-lyte-options="group:gruppe" data-title="Eichhörnchen"
|
|
|
Jetzt sollen sich die anderen Fotos hinter dem gleichen Piktogramm “verstecken”. Dazu habe ich dann händisch diese Links zu diesen Fotos ebenfalls in die HTML dieses Links kopiert. Bitte beachtet auch hier wieder die korrekte relative Pfadangabe zu den Fotos, hier von meiner Startseite mit einem ./ oder keinem Punkt, von Unterseiten mit zwei ../ Punkten. Wieder mit dem gleichen Gruppen-Namen (hier “gruppe”). Diese Links gehören dann “nach dem Tag” (ab NOF 11 “nachher”) in die Objekt-HTML. Da NOF diese Bilder nicht selbst verlinkt hat, müsstet Ihr diese Bilder entweder händisch (mit Eurem FTP-Programm) auf den Server kopieren oder in die Assets-Verwaltung einbinden.
|
|
|
Link im Lyteframe
Bei einem Lyteframe (Fenster für andere Seiten) wird die
class = “lyteframe”
verwendet. Dazu verwendet Ihr diesen Code und tragt diese Gruppe ein und noch den Titel, der in der Box erscheinen soll.
Hier: “Wikipedia” (1. Class) oder auch “YouTube” (2. Class)
Dazu verlinkt Ihr den Text ganz normal als externen oder auch internen Link und klickt in dem gleichen “Link” Fenster unten links auf den Button “HTML” und fügt den Code “im Tag” (ab NOF 11 “innen”) ein. Dabei ist “width” die Breite und “height” ist die Höhe der Box, in Pixeln oder auch Prozent. Bei dem Bild vom Forum ist es ebenso, nur das dort eben das Bild und nicht der Text verlinkt wird.
|
|
|
|
|
class="lyteframe" data-title="Wikipedia" data-lyte-options="width:900 height:90% scrollbars:yes"
|
|
|
|
class="lyteframe" data-title="Caro Emerald - A Night Like This" data-lyte-options="width:640 height:480"
|
|
|
 |
|
|
zur Übersicht
|
|
|
|
Tooltips
Bei den Tooltips wird die
class = “lytetip”
verwendet. Als Text dieser Box wird die Funktion “data-tip” verwendet. Dort tragt Ihren Euren Text ein. Man kann hier beliebige
HTML-Befehle verwenden, wie z.B. <b>fett</b> oder einen Umbruch <br> oder einen Befehl zur Umstellung einer Font-Farbe, wie z.B.
<font color='#FF0000'>dieser Text ist rot</font> oder auch z.B. Bilder mit einbauen.
Bemerkung:
Hierzu ist anzumerken, dass bei einer normalen Verlinkung des Textes, der Text von NOF in ein <p>Tag</p> gepackt wird, was dazu geführt hat, dass diese Javascripte der Lytebox im IE 8 nicht funktioniert haben und damit dann auch meine gesamte Lytebox nicht mehr. Dies gilt aber ausschließlich für den “Internet Explorer 8” oder älter und nur für alle Tooltips, die die zusätzliche Option “tipStyle:” tragen.
Daher habe ich den Code hier händisch mit dem Javascript-Operator void(); (keine Zuweisung) verlinkt und in die HTML eine Textfeldes kopiert. Natürlich könnt Ihr anstelle von void(); an dieser Stelle auch jeden anderen Link zu irgendwelchen Seiten einsetzen.
> Textfeld aufziehen > mit einfachem Klick markieren > im Fenster “Text-Eigenschaften” auf den Button “HTML” klicken
> Code unten “vor dem Tag” (ab NOF 11 “vorher”) einfügen. Hier als Beispiel die erste “Tooltip-Box”.
|
|
|
<a href="javascript:void();" class="lytetip" data-tip="Die ist eine <b>Tooltip-Box</b> der Lytebox">Classic Box</a>
|
|
|
Diese Tooltips können in verschiedenen Versionen dargestellt werden, hier noch der Code aller meiner 5 Beispiele:
|
|
|
<a href="javascript:void();" class="lytetip" data-tip="Die ist eine <b>Tooltip-Box</b> der Lytebox">Classic Box</a>
<a href="javascript:void();" class="lytetip" data-lyte-options="tipStyle:info" data-tip="Diese Box zeigt<br>das Info Symbol.">Info</a>
<a href="javascript:void();" class="lytetip" data-lyte-options="tipStyle:help" data-tip="<em>Titel</em>Hier kann man einen Titel hinzufügen.">Titel</a>
<a href="javascript:void();" class="lytetip" data-lyte-options="tipStyle:warning" data-tip="<em>Warnung</em>Huuu - hier passiert was schreckliches.">Warnung</a>
<a href="javascript:void();" class="lytetip" data-lyte-options="tipStyle:error" data-tip="<em>FEHLER</em>Eine Fehler Meldung vielleicht?">Fehler</a>
|
|
|
Guckt Euch für ein ähnliches Tool auch “Overlib” mal an.
|
|
|
DIV-Container Version 5.1
Die Box mit dem Textfeld (ganz unten auf meiner Seite) ist ein DIV-Container, der die Lytebox beim Klick auf irgendeinen Bereich dieser Box öffnet. Zusätzlich habe ich, in der Beschriftung der Box, einen Link zu meiner Tutorial Seite gesetzt. Bezüglich der HTML-Ersatzzeichen, guckt bitte auch bei meinen Beschreibungen der jeweiligen CSS-Klassen.
> Textfeld aufziehen > mit einfachem Klick markieren > im Fenster “Text-Eigenschaften” auf den Button “HTML” klicken
> Code unten “vor dem Tag” (ab NOF 11 “vorher”) einfügen.
|
|
|
<div onclick="$lb.launch('./assets/images/eichkater.jpg',
'showPrint:true',
'Im Garten',
'Unser Eichhörnchen “Erwin”<br><a href="./html/tutorial.php">hier geht es zu meinem Tutorial</a>')">
<br><center><font color='#0000FF'>Mit Klick<br></font><font color='#FFFFFF'>in irgendeinen Bereich</font><br><font color='#0000FF'>von diesem
DIV-Container</font><br><font color='#000000'>wird die</font><font color='#FF0000'> <b>Lytebox</b>
</font><font color='#000000'>gestartet</font><br><img src='./assets/images/smoke.gif'></center>.
</div>
|
|
|
DIV-Container ab Version 5.2 - anderer Code
> Textfeld aufziehen > mit einfachem Klick markieren > im Fenster “Text-Eigenschaften” auf den Button “HTML” klicken
> Code unten “vor dem Tag” (ab NOF 11 “vorher”) einfügen.
|
|
|
<div onclick="$lb.launch({
url: './assets/images/eichkater.jpg',
options: 'showPrint:true',
title: 'Im Garten',
description: 'Unser Eichhörnchen “Erwin”<br><a href="./html/tutorial.php" class="LyteboxLink">hier geht es zu meinem Tutorial</a>' })">
<br><center><font color='#0000FF'>Mit Klick<br></font><font color='#FFFFFF'>in irgendeinen Bereich</font><br><font color='#0000FF'>von diesem
DIV-Container</font><br><font color='#000000'>wird die</font><font color='#FF0000'> <b>Lytebox</b> </font><font color='#000000'>gestartet</font><br><img
src='./assets/images/smoke.gif'></center>.
</div>
|
|
|
Lytebox im Iframe
Die Lytebox kann auch aus einem Iframe heraus gestartet werden. Dazu habe ich mir aber ausprobiert, dass es nicht so wie auf der
Lytebox-Seite beschrieben funktioniert, also den Link zur CSS-Datei in den <Head> der aufrufenden Seite und den Link zur JS-Datei in den <Head> der geframten Seite zu bringen, sondern es funktioniert nur bei mir, wenn man beide Verlinkungen zu den Lytebox-Skripten auf beiden Seiten einbringt. Achtet dabei wieder auf die richtige relative Pfadangabe, wie oben bereits erläutert. Hier von einer Unterseite.
> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” und das Skript (unten) “Zwischen Head Tags” einfügen.
|
|
|
|
<script type="text/javascript" language="javascript" src="../lyteboxscripts/lytebox.js"></script>
<link rel="stylesheet" href="../lyteboxscripts/lytebox.css" type="text/css" media="screen" />
|
|
|
zur Übersicht
|
|
|
|
Bilder ein- oder ausblenden - ab Version 5.2
Ab der Version 5.2 gibt es etliche neue Daten-Funktionen wie z.B. die zum Ein- oder Ausblenden von Bildern.
Zunächst zieht Ihr Euch ein Bild (hier “Eichhörnchen”) ganz normal auf Eurer Seite auf. Nun müsst Ihr dem Bild die “Objekt-ID” geben, die Ihr weiter unten dann im Skript angebt, hier “Eichkater”. Keine Umlaute, Leer- oder Sonderzeichen und auf Groß- und Kleinschreibung achten.
|
|
|
... nun schreibt Ihr den zu verlinkenden Text hin (hier “ausblenden”) und klickt im Fenster “Text-Eigenschaften” auf den Button “Link”.
Im Link-Fenster wählt Ihr dann unter “Linktyp:” > “Externer Link” und unter “Neuer Link” > “javascript:” und schreibt void(); hin.
|
|
|
... jetzt klickt Ihr in dem gleichen Fenster (Link) unten links auf den Button “HTML” und fügt den oberen Code zum Ausblenden ein. Hier muss die ID Eures Bildes wieder angegeben werden, in meinem Fall ‘Eichkater’. Ebenso macht Ihr es für den Link “einblenden” und verwendet den unteren Code zum Einblenden. Die Geschwindigkeit (speed:) kann dabei von 1 (langsamste) bis 5 (schnellste) eingetragen werden.
|
|
|
|
|
onclick="$lb.fadeOut({ id: 'Eichkater', speed: 1 })"
|
|
|
|
onclick="$lb.fadeIn({ id: 'Eichkater', speed: 1 })"
|
|
|
 |
|
|
zur Übersicht
|
|
|
|
CSS Class im Textbereich ändern - ab Version 5.2
Zunächst erstellt Ihr Euch mit den Formatvorlagen Eure Class. Ich beschreibe hier mal als Beispiel die Class für den roten Text.
Dann fügt Ihr das linke Skript zum Anzeigen und das rechte Skript zum Löschen dieser Class in den <Head> des Layouts ein.
> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” und die Skripte (unten) “Zwischen Head Tags” einfügen.
|
|
|
<script type="text/javascript">
function myFunctionRot() {
$lb.addClass({ name: 'rot', id: 'ColorTextRot' });
}
</script>
|
|
|
|
|
<script type="text/javascript">
function myFunctionClearRot() {
$lb.removeClass({ name: 'rot', id: 'ColorTextRot' });
}
</script>
|
|
|
|
... mit den Skripten oben werden Javascript-Funktionen gegründet, Eure selbst erstelle Class, hier ‘rot’, angegeben sowie eine ID für diese Class, die später im Text verwendet wird.
Nun verlinkt Ihr einen Text oder (wie ich hier) einen Button mit dem Javascript-Befehl void(); wie bereits weiter oben schon mal erklärt und klickt dann wieder im Link-Fenster unten links auf den Button “HTML” und fügt (unten links) diese Funktion zum Anzeigen und
(unten rechts) diese Funktion zum Zurücksetzen dieser Class “im Tag” (ab NOF 11 “innen”) hinzu.
|
|
|
... den eigentlichen Text habe ich in die HTML einen Textfeldes kopiert.
Hier wird nun die entsprechende ID in einem <span> Tag den einzelnen Text-Bereichen zugeordnet und fertig.
> Textfeld aufziehen > mit doppeltem Klick aktivieren > im Fenster “Text-Eigenschaften” auf den mittleren Button (oben) “Text” klicken
> auf den Button “HTML” klicken > und Code unten in den HTML-Code-Editor einfügen.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
... und hier soll sich dieser Text mit Klick auf einen der Buttons oben in die jeweilige Class ändern. <span id="ColorTextRot">Dieser Bereich wird mit Klick auf den entsprechenden Button dann z.B. auch rot</span> und der folgende Bereich könnte <span id="ColorTextBlau">dann auch in blau kursiv hervorgehoben werden</span>. Man kann also mit dieser Idee bestimmte Textpassagen hervorheben,
<span id="ColorTextGruen">wie z.B. auch diesen grünen und unterstrichenen Bereich</span>.
|
|
|
zur Übersicht
|
|
|
|
Einige Beispiele der Optionen
Bitte guckt für alle Optionen auf der Seite der Lytebox unter “Documentation”, da ich hier nur einige Beispiele verwendet habe und auch nur diese beschreibe. Achtet dabei auf die Unterteilung der Optionen für die entsprechenden Klassen der Lytebox.
|
|
|
Öffnet die Datei lytebox.js mit Eurem Windows-Editor. Dort könnt Ihr im oberen Bereich jede Menge Änderungen vornehmen, meine habe ich hier mal blau gekennzeichnet, ich habe also lediglich die englischen Bezeichnungen in deutsche geändert. Hier könnt Ihr aber noch viele andere Einstellungen vornehmen, wie z.B. das Farbschema (this.theme). Unten eine Teilansicht dieser Datei der Version 5.4
|
|
 |
|
|
|
... weiterhin habe ich bei Version 5.1, für die Anzeige der Anzahl der Bilder, diese .js-Datei in Zeile 782 noch von “image” “of”
in “Bild” “von” geändert. Das ist jedoch bereits in Version 5.2 korrigiert worden und muss dort nicht mehr geändert werden.
Ab Version 5.3 kann das Farbschema auch über ein kleines Skript eingestellt werden, also nicht nur in der Datei “lytebox.js”.
|
|
|
object.innerHTML = "Bild " + eval(this.activeSlide + 1) + " von " + this.slideArray.length;
|
|
|
|
|
|
|
Optionen der CSS-Klassen. Hier die Optionen, die ich auf meiner Seite verwendet habe.
|
|
|
|
|
Einzelnes Foto - drucken und nur über “Beenden-Symbol” Box schließen, also nicht mit Klick auf eine Stelle im Fenster.
Ihr fügt also der “Class” alle gewünschten Optionen nacheinander hinzu (hier drucken und nur am Symbol schließen)
|
|
|
showPrint:true forceCloseClick:true
|
|
|
|
... die gesamte “Class” sieht dann in meinem Beispiel so aus, wobei für Anführungszeichen im Text HTML-Ersatzzeichen verwendet werden müssen und <br> erzeugt einen Zeilen-Umbruch.
|
|
|
class="lytebox" data-title="Unser Eichhörnchen “Erwin” mit Drucker-Symbol und<br>diese Box schließt nur mit Klick auf das Beenden-Symbol" data-lyte-options="showPrint:true forceCloseClick:true"
|
|
|
|
|
Einzelnes Foto - drucken sowie Titel und Symbole oben. Beschreibung unten hinzugefügt, sowie einen Link mit eigener CSS-Class zum Download einer ZIP-Datei. Auch hier habe ich HTML-Ersatzzeichen verwendet.
Ihr fügt also der “Class” alle gewünschten Optionen nacheinander hinzu (hier drucken und Titel oben und Symbole oben)
|
|
|
showPrint:true titleTop:true navTop:true
|
|
|
|
... die gesamte “Class” sieht dann in meinem Beispiel so aus, wobei die Option Beschreibung (data-description) hinzugefügt wurde.
|
|
|
class="lytebox" data-title="Hibiskus" data-description="Hier unten habe ich noch die <i>description</i> Option <font color='#FFFF00'>(Beschreibung)</font> hinzugefügt.<br><b>Titel</b> und Schaltflächen oben.<br><a href="./download/Hibiskus.zip" class="LyteboxLink">Download von diesem Foto</a>" data-lyte-options="showPrint:true titleTop:true navTop:true"
|
|
|
|
|
Gruppe von Fotos - beim 2. Foto (Hibiskus) ist ein “Alert-Fenster” vorgeschaltet, das man auch beim Schließen der Box anzeigen könnte.
hierfür wurde eine Javascript-Funktion in die Layout-HTML der Seite eingefügt, die die ID “myBeforeStart()” hat. Wie Ihr diese Funktion nennt ist dabei egal. Das \n erzeugt hierbei einen Zeilen-Umbruch.
> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” und das Skript (unten) “Zwischen Head Tags” einfügen.
|
|
|
<script type="text/javascript">
function myBeforeStart() {
alert('Hier ist dieses Javascript Alert-Fenster vorgeschaltet,\nin das man einen Hinweis schreiben kann.\n\n
Man könnte dieses Fenster auch beim Schließen der Box anzeigen.\n\nMit Klick auf den OK Button startet die Lytebox.');
return true;
}
</script>
|
|
|
... nun muss diese Funktion noch in die “Class” dieses Bildes eingebaut werden.
|
|
|
beforeStart:myBeforeStart
|
|
|
|
... die gesamte “Class” sieht dann in meinem Beispiel so aus. Es gibt auch die Möglichkeit dieses Fenster beim schließen anzuzeigen.
|
|
|
class="lytebox" data-lyte-options="group:garten beforeStart:myBeforeStart" data-title="Hibiskus"
|
|
|
|
|
|
Gruppe von 6 Fotos als Diashow hinter einem Piktogramm - zusätzliche Navigation in der Box und nicht automatisch schließen.
Ihr fügt also der “Class” alle gewünschten Optionen nacheinander hinzu (hier extra Navigation und nicht automatisch schließen)
|
|
|
showNavigation:true autoEnd:false
|
|
|
|
... die gesamte “Class” sieht dann in meinem Beispiel so aus. Diese “Class” müsst Ihr dann jedem Foto der Diashow geben.
|
|
|
class="lyteshow" data-lyte-options="group:gruppe showNavigation:true autoEnd:false" data-title="Eichhörnchen"
|
|
|
|
|
|
|
|
|
|
Lytebox Farbschema individuell auf einer Seite einstellen
Seit Version 5.3 könnt Ihr ein kleines Skript in die Layout-HTML der Seite einbringen und dort das Farbschema, wie z.B. Grau, bestimmen.
Es stehen folgende Farbschemata zur Verfügung: black (voreingestellt), grey, red, green, blue, gold, orange
> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” und das Skript (unten) “Zwischen Head Tags” einfügen.
|
|
|
<script type="text/javascript">
var lyteboxTheme = 'grey';
</script>
|
|
|
|
|
|
|
|
|
|
Eigene CSS Link-Klasse verwenden
Falls der Wunsch besteht einem Lytebox-Textlink eine eigene CSS Link-Class zu geben, dann müsst Ihr lediglich diese Class noch der Lytebox-Class hinzufügen (siehe Beispiel ganz unten auf meiner Seite). Hier habe ich diese Link-Class “meinLink” genannt.
|
|
|
class="lytebox meinLink" data-title="Unser Eichhörnchen Erwin"
|
|
|
|
|
|
|
|
|
|
Bemerkungen (neueste oben):
- Im IE 8 oder früher wird der äußere Rahmen der Lytebox eckig anstatt abgerundet dargestellt.
- Die Darstellung in einem Iframe, scheinen nicht wie auf der Lytebox-Seite beschrieben zu funktionieren, sondern so wie oben beschrieben.
- Lytebox (auch ältere Versionen) kann auf einem Windows XP Rechner mit dem Firefox-Browser extrem langsam sein.
Dies liegt an der schlechten Speicher-Verwaltung vom Firefox.
|
|
|
|
|
zur Übersicht
|
|
|
|
nach oben
|
|
|
|
Guckt Euch auch die Lytebox Version 5.5 als SwissKnife for NOF - Komponente mal an.
|
|
|
Viel Erfolg!
|
|
|
|
|
