Lytebox ist eine Abwandlung des weit verbreiteten lightbox-scripts. Sie ist eine Art Popup in der die Bildausgabe anhand der aktuellen Browsergröße verkleinert dargestellt wird.
Ein wichtiger Vorteil der Verwendung von Lytebox ist, die sehr schlanke Javascript Datei [lytebox.js ] gegenüber den vier *.js Files von lightbox.
Weitere Features:
- Einzelbild Anzeige.
- Bildpräsentation mit manueller Navigation.
- Diashow mit Slideshow Effekt.
- Webseiten im Lyteframe anzeigen.
- Zu jedem einzelnen Photo können Bildbeschreibungen erstellt werden, die innerhalb der Präsentation durch anklicken des Buttons [INFO] angezeigt werden.
- Des weiteren lassen sich die EXIF-Beschreibungen des Photos, durch den Tag rev="[exif=true]" abrufen.
- Für hochauflösende Bilder gibt es die Möglichkeit, einen "RESIZE"-Button anzeigen zu lassen, der die Bilder in der Originalgröße anzeigt.
- In der Konfiguration der lytebox.js, kann eingestellt werden, ob bei einem Rechtsklick das Bild gespeichert werden darf, ob der Schließ- Info- EXIF Button angezeigt werden soll.
Lytebox kann als reine JavaScript Variante sowie als WordPress – Plugin in die Seite eingebunden werden.
Ich habe mich für die modifizierte JavaScript Variante « Lytebox 3.20 Modification » von Pavel Kuzub entschieden.
|
Einbindung des Java Script Lytebox
|
- Java Script herunterladen und entpacken.
- Auf dem Webserver ein Verzeichnis erstellen, z.B. "lytebox". Den Pfad zu diesem Verzeichnis bitte merken, da er noch für einige Einstellungen benötigt wird.
- Im Header der Webseite muss folgender Code eingetragen werden – hier den Pfad zum "lytebox" – Verzeichnis anpassen.
Beispiel Code für den Header:
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/lytebox.js"></script>
<link rel="stylesheet" href="http://www.deinewebsite.de/pfad/zu/lytebox.css" type="text/css" media="screen" />
- Nachdem alle Anpassungen vorgenommen wurden, muss die entsprechende Datei mit der Änderung im Header, auf den Webserver geladen werden.
- Alle Dateien des Java Script können nun ebenfalls in das erstellte Verzeichnis auf den Webserver geladen werden.
- Es gibt vier Möglichkeiten der Anzeige, entweder als Einzelbild, Bildpräsentation mit manueller Navigation, Diashow mit Slideshow Effekt oder Webseiten im Lyteframe darstellen.
|
|
|
Einzelbild zum Klicken auf Close-Button – rel="lytebox"
|
|
L i n k – V a r i a n t e:
Einzelbild mit Close-Button
B i l d – V a r i a n t e:
Beispiel Code:
L i n k - Variante:
<a href="http://deine.webseite.de/bild.jpg" rel="lytebox" title="Beispiel Einzelbild-Text">Beispiel Einzelbild</a>
B i l d - Variante:
<a href="http://deine.webseite.de/bild.jpg" title="Beispiel Einzelbild-Bild" rel="lytebox"><img src="http://deine.webseite/thumbs_bild.jpg" alt="Beispiel Einzelbild"></a>
|
|
|
Bildpräsentation mit manueller Navigation – rel="lytebox[xxx]"
|
|
L i n k – V a r i a n t e:
Manuelle Navigation durch die Bildpräsentation
B i l d – V a r i a n t e:
Beispiel Code:
L i n k - Variante:
<a href="http://deine.webseite.de/bild_01.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 1">Manuelle Navigation durch die Bildpräsentation</a>
<a href="http://deine.webseite.de/bild_02.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 2"> </a>
<a href="http://deine.webseite.de/bild_03.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 3"> </a>
<a href="http://deine.webseite.de/bild_04.jpg" rel="lytebox[wagenrennen]" title="Wagenrennen Bild 4"> </a>
B i l d - Variante:
<table cellpadding="0" cellspacing="0">
<tr>
<td width="170"><a href="http://deine.webseite.de/bild_01.jpg" title="Wagenrennen Bild 1" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_01.jpg" alt="Wagenrennen"></a></td>
<td width="170"><a href="http://deine.webseite.de/bild_02.jpg" title="Wagenrennen Bild 2" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_02.jpg" alt="Wagenrennen"></a></td>
<td width="170"><a href="http://deine.webseite.de/bild_03.jpg" title="Wagenrennen Bild 3" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_03.jpg" alt="Wagenrennen"></a></td>
<td width="170"><a href="http://deine.webseite.de/bild_04.jpg" title="Wagenrennen Bild 4" rel="lytebox[wagenrennen1]"><img src="http://deine.webseite.de/thumbs_bild_04.jpg" alt="Wagenrennen"></a></td>
</tr>
</table>
|
|
|
Bildpräsentation als Diashow – rel="lyteshow[xxx]"
|
|
L i n k – V a r i a n t e:
Bildpräsentation mit Slideshow Effekt
B i l d – V a r i a n t e:
Beispiel Code:
L i n k - Variante:
<a href="http://deine.webseite.de/bild_01.jpg" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]" title="Bild 1">Slideshow Effekt</a>
<a href="http://deine.webseite.de/bild_02.jpg" rel="lyteshow[diashow]" rev="[exif=true]" title="Wagenrennen Bild 2"> </a>
<a href="http://deine.webseite.de/bild_03.jpg" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]" title="Wagenrennen Bild 3"> </a>
<a href="http://deine.webseite.de/bild_04.jpg" rel="lyteshow[diashow]"" title="Wagenrennen Bild 4"> </a>
B i l d - Variante:
<table cellpadding="0" cellspacing="0">
<tr>
<td width="170"><a href="http://deine.webseite.de/bild_01.jpg" title="Wagenrennen Bild 1" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]"><img src="http://deine.webseite.de/thumbs_bild_01.jpg" alt="Wagenrennen"></a></td>
<td width="170"><a href="http://deine.webseite.de/bild_02.jpg" title="Wagenrennen Bild 2" rel="lyteshow[diashow]" rev="[exif=true]"><img src="http://deine.webseite.de/thumbs_bild_02.jpg" alt="Wagenrennen"></a></td>
<td width="170"><a href="http://deine.webseite.de/bild_03.jpg" title="Wagenrennen Bild 3" rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]"><img src="http://deine.webseite.de/thumbs_bild_03.jpg" alt="Wagenrennen"></a></td>
<td width="170"><a href="http://deine.webseite.de/bild_04.jpg" title="Wagenrennen Bild 4" rel="lyteshow[diashow]"><img src="http://deine.webseite.de/thumbs_bild_04.jpg" alt="Wagenrennen"></a></td>
</tr>
</table>
|
|
|
Laden von Webseiten im Lyteframe – rel="lyteframe"
|
|
E i n e Webseite:
- Wikio.de [Weite: 940px Höhe: 720, mit Srolling]
M e h r e r e Webseiten:
Beispiel Code:
E i n e Webseite:
<a href="http://deine.webseite.de/" rel="lyteframe" title="Dein Title" rev="width: 940px; height: 720px; scrolling: auto;">Link Name</a>
M e h r e r e Webseiten:
<ul>
<li><a href="http://www.google.de" rel="lyteframe[group]" title="Google.de" rev="width: 740px; height: 380px; scrolling: no;">Google.de</a></li>
<li><a href="http://de.yahoo.com/" rel="lyteframe[group]" title="Yahoo.de" rev="width: 1024px; height: 720px; scrolling: auto;">Yahoo.de</a></li>
<li><a href="http://www.wikio.de/" rel="lyteframe[group]" title="Wikio.de" rev="width: 1024px; height: 720px; scrolling: auto;">Wikio.de</a></li>
</ul>
|
|
|
Lytebox wird standardmäßig mit 5 Farbvarianten geliefert: grey (Standard), red, blue, gold und green. Der Austausch der Farben, kann in der lytebox.js vorgenommen werden, indem man ‘grey’ durch die entsprenden Farbe ersetzt. [siehe Abbildung]
Änderung in der lytebox.js
Problem im Internet Explorer 6
Leider reicht die Änderung für die korrekte Anzeige im IE6 nicht aus. Hier müssen noch zusätzlich einige Modifizierungen in der lytebox.css vorgenommen werden. Standardmäßig werden die Farbeintragungen von der Farbe ‘grey’ angeführt. Für die Farbeinstellung im IE6 muss die gewünschte Farbe an erster Stelle stehen. Einfach die entsprechenden Zeilen austauschen, so dass in der kompletten lytebox.css insgesamt 11 Änderungen erfolgen müssen. [siehe Abbildungen]
Original lytebox.css
Gänderte lytebox.css
|
|
|
Java Script Varianten von lytebox
WordPress-Plugin Varianten von lytebox
|
Guten Morgen
Ich habe nun das selbe Problem wie Andrezza.
Es funktioniert einfach nicht.
Ich habe jetzt Sie Site wirklich auf niedrigste Reduziert, und es geht immernoch nicht.
Link
Jetzt ist im Head auch nur die Css verlinkt. Wenn ich dort zusätzlich das Javascript verlinke, dann geht der außerhalb des Frames link.
Wenn ich beides in den eingebetteten Frame packe geht die Show innerhalb des Frames, aber das ist ja beides nciht das was ich will. Und so wie ich die website verstanden habe sollte es auch möglich sein, aus einem Frame heraus die Slideshow “Fullscreen” aufzurufen. Oder?
Danke schonmal im Vorraus
Bei mir wird der close button nicht angezeigt, obwohl es auf true steht!
@Mungter: Bei Frame oder iFrame müssen beide Dateien ins Frame und Hauptdatei eingebunden sein. bei dein Link fehlt ja die js. Klick mal auf mein namen dort findest Du ein Beispiel inkl. iFrame
@Timee:Link kann Helfen beim Helfen :O)
Beides in beidem
Beides im außenframe
Naja bei ersten öffnet sich die Box halt einfach im Frame, aber sie soll sich ja im Fullscrenn öfnnen.
@Mungter: jetzt muss noch die css datei in die frame datei eingebunden werden. es müssen immer beide eingebunden werden (css js).
die is doch drin.
Beim ersten Link ist das hier der innenframe:
innen
und das hier der aussenframe
außen
beides ist in bei dem eingebunden
was soll ich wo rausnehmen?
Wirklich super Script, läuft auch bei mir soweit gut.
Eine Frage, wurde mal ganz am Anfang gestellt aber leider nicht beantwortet.
Wie kann man einstellen das die Diashow nicht von selbst startet sondern erst nach klicken von Play. Habe schon im Script gesucht aber dies leider nicht gefunden.
Danke
Kann man Lytebox auch aus Flash 4 mit AS 3 aufrufen und wenn ja, wie?
Hallo,
ich will bei mir die lightbox ersetzen durch die lytebox. Ich habe alle Änderungen im als auch im durchgeführt, wie auf der Seite beschrieben, jedoch öffnet sich beim Klick auf ein Bild in meiner Galerie die lytebox nicht, sondern das Bild wird nur in einem Browserfenster angezeigt(zum nachschauen: http://www.photopanther.de/Landschaften.html). Ich weiß nicht warum? Vielleicht kann mir jemand weiter helfen.
Gruß,
Martin