Bilder per LyteBox anzeigen
3294 - snk - 30.04.2009 15:01 Uhr - Version: 3 - - verlinken als BB-Code
Ich will euch hier in 3 einfachen Schritten erklären, wie ihr Bilder in eure Homepage einbindet die per Klick auf einen entsprechenen Link oder auch einer kleinen Grafik in einer schönen Animation geöffnet werden OHNE dass sich dabei ein neues Fenster öffnet.
Solche Animationen kennt ihr sicherlich von diversen Seiten wie zb. den VZ's und MySpace
Die benötigten Dateien dafür sind unter www.dolem.com/lytebox/ kostenlos erhältlich. Da nun aber nicht jeder so gut Englisch beherrscht will ich euch das kurz nochmal erklären...
1. Schritt: Download und entpacken
Man gehe auf die oben genannte Seite und lade sich das ZIP Archiv. Der Inhalt wird in einem Ordner eurer Wahl innerhalb des gewünschten Projektes entpackt. In meinem Beispiel liegt die index.html im Rootverzeichnes des Projektes und dort erstelle ich einen Ordner "lytebox". Weiterhin existiert dort ein Ordner "bilder" in dem die Dateien bild1.jpg bis bild5.jpg enthalten sind. Das ganze sieht dann so aus:
../index.html
../bilder/bild1-5.jpg
../lytebox/(entpackte Dateien)
2. Schritt: Einbinden in die HTML Datei
In der HTML Datei wo die Bilder per Animation geöffnet werden sollen werden im <head> Bereich folgende Zeilen hinzugefügt. In meinem Beispiel möchte ich die Bilder schon auf der index Datei animieren:
1 |
<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
|
Wenn ihr andere HTML Dateien verwendet müsst ihr nur den Pfad zur lytebox.js bei "src" und zur lytebox.css bei "href" entsprechend anpassen...
3. Schritt: Verknüpfen der Bilder mit der LyteBox
Es gibt nun 3 Möglichkeiten Bilder mit der LyteBox zu verknüpfen (+ 1 für HTML Dateien)
1 - Einzelne Bilder
2 - Gruppierte Bilder
3 - Slideshow für gruppierte Bilder
4 - Frame für HTML Dateien (Darauf gehe ich hier aber nicht weiter ein)
Einzelne Bilder: lytebox
1 |
<a href="bilder/bild-1.jpg" rel="lytebox" title="Beschreibung">Bild #1</a>
|
Gruppierte Bilder: lytebox[Gruppenname]
1 |
<a href="bilder/bild-1.jpg" rel="lytebox[Gruppenname]" title="Beschreibung">Bild #1</a>
|
Slideshow für gruppierte Bilder: lyteshow statt lytebox
1 |
<a href="bilder/bild-1.jpg" rel="lyteshow[Gruppenname]" title="Beschreibung">Bild #1</a>
|
Falls ihr mit iframes arbeitet müsst ihr den 2. Schritt aufteilen:
Im Hauptdokument das Stylesheet lytebox.css angeben und im iframe das Script lytebox.js
Bei Fragen und Problemen stehe ich zur Verfügung
Viel Spass damit - Danke sagen tut nicht weh!
MfG snk
Edit:
Im Offlinebetrieb der Seite wird nur eine leere Box in der grösse des Bildes gezeigt - das Bild selbst wird nur in der Online Variante der Seite angezeigt!
Ich empfehle daher auch die direkte Pfadangabe bei den Links zu verwenden (mit http://www.deineurl.de/...) und nicht nur die relative Variante wie oben in den Beispielen von mir angegeben, die sollten nur der Verständlichkeit dienen.