Lytebox – Eine Modifikation von Lightbox mit Slideshow Effekt

photo pingalerie — Tue, 01 Jan 2008 16:00:39 +0000

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:

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:
rel="lytebox" title="Beispiel Einzelbild-Text">Beispiel Einzelbild
 
B i l d - Variante:
rel="lytebox">

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:
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 1">Manuelle Navigation durch die Bildpräsentation
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 2"> 
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 3"> 
rel="lytebox[wagenrennen]" title="Wagenrennen Bild 4"> 
 
B i l d  -  Variante:

    
        
        
        
        
    rel="lytebox[wagenrennen1]"> rel="lytebox[wagenrennen1]"> rel="lytebox[wagenrennen1]"> rel="lytebox[wagenrennen1]">

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:
rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]" title="Bild 1">Slideshow Effekt
rel="lyteshow[diashow]" rev="[exif=true]" title="Wagenrennen Bild 2"> 
rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]" title="Wagenrennen Bild 3"> 
rel="lyteshow[diashow]"" title="Wagenrennen Bild 4"> 
 
B i l d  -  Variante:

    
        
        
        
        
    rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info]"> rel="lyteshow[diashow]" rev="[exif=true]"> rel="lyteshow[diashow]" rev="[info]Hier kommt die INFO rein.[/info][exif=true]"> rel="lyteshow[diashow]">

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:

Google.de [Weite: 740px Höhe: 380, ohne Srolling]
Pingalerie.de [Weite: 1024px Höhe: 720, mit Scrolling]
Photogalerie [Weite: 1024px Höhe: 720]

Beispiel Code:

E i n e  Webseite:
rel="lyteframe" title="Dein Title" rev="width: 940px; height: 720px; scrolling: auto;">Link Name
 
M e h r e r e  Webseiten:

    rel="lyteframe[group]" title="Google.de" rev="width: 740px; height: 380px; scrolling: no;">Google.de
    rel="lyteframe[group]" title="Yahoo.de" rev="width: 1024px; height: 720px; scrolling: auto;">Yahoo.de
    rel="lyteframe[group]" title="Wikio.de" rev="width: 1024px; height: 720px; scrolling: auto;">Wikio.de

Anmerkungen und Tipps

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

Weitere interessante Artikel:

Photos oder Bilder mit Lightbox anschaulicher darstellen – Anleitung
Sowohl mit dem Greybox – Plugin, als auch mit dem Java Script Lightbox, kann man auf eine schöne Art, Bilder und Photos anschaulicher darstellen …

Mit Shadowbox.js lassen sich nahezu alle Dateien inline anzeigen
Bisher habe ich bei der Anzeige von Bilder auf das Lightbox2 Javascript by Lokesh Dhakar gesetzt. Lief auch großartig, bis ich für eine übersichtliche …

Greybox Plugin fuer WordPress
Es gibt für mich im Web immer wieder Neues zu entdecken, so zum Beispiel das JavaScript/CSS Skript Greybox, ein eindrucksvolles PopUp-Fenster der …

DANKE FÜR DAS ABONNIEREN MEINES FEED !

Photo Pingalerie » lytebox

Lytebox – Eine Modifikation von Lightbox mit Slideshow Effekt