Sowohl mit dem Greybox – Plugin, als auch mit dem Java Script Lightbox, kann man auf eine schöne Art, Bilder und Photos anschaulicher darstellen.
Die Lightbox gibt es als reine JavaScript Variante, sowie als WordPress – Plugin.
- JavaScript Variante Lightbox JS v2 by Lokesh Dhakar
- WP Lightbox JS WordPress PlugIn by Safirul Alredha
- WP Lightbox JS WordPress PlugIn by m3nt0r.de
Anhand von Beispielen, möchte ich hier kurz erklären, wie man die JavaScript Variante von Lokesh Dhaka einfach in seine Webseite einbinden kann. Sie funktioniert mit allen modernen Browser.
Neu in der Version 2:
- Bilderserien / Fotos in Gruppen
- Visuelle Übergangseffekte
Einbindung des Java Script Lightbox
- Java Script herunterladen und entpacken.
- Auf dem Webserver ein Verzeichnis erstellen, z.B. "lightbox". Diesen Pfad 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 "lightbox" – Verzeichnis anpassen.
Beispiel Code für den Header:
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/prototype.js"></script> <script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/lightbox.js"></script>
- Damit auch die CSS – Datei von Lightbox JS v2 in die Webseite geladen wird, muss sie ebenfalls im Header eingebunden werden.
Beispiel Code für das Laden der CSS – Datei:
<link rel="stylesheet" href="http://www.deinewebsite.de/pfad/zu/css/lightbox.css" type="text/css" media="screen" />
- Diese Eintragungen sollten jetzt im Header vorgenommen sein.
Zusammenfassung für den Beispiel Code im Header:
<html>
<head>
<link rel="stylesheet" href="http://www.deinewebsite.de/pfad/zu/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/prototype.js"></script>
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.deinewebsite.de/pfad/zu/lightbox.js"></script>
</head>
</body>
</html>
- Nun müssen noch die Pfade zu den Bilddateien blank.gif, prevlabel.gif und nextlabel.gif in der lightbox.css angepasst werden. Die Datei öffnen und
Beispiel Code für die lightbox.css:
folgende Zeilen
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block; }
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
mit den vollständigen Pfadangaben ergänzen.
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://www.deinewebsite.de/pfad/zu/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block; }
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.deinewebsite.de/pfad/zu/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.deinewebsite.de/pfad/zu/images/nextlabel.gif) right 15% no-repeat; }
- Auch in der lightbox.js müssen noch die Pfade zu den Bilddateien loading.gif and close.gif angepasst werden, also wieder die Datei öffnen und
Beispiel Code für die lightbox.js:
folgende Zeilen var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif"; mit den vollständigen Pfadangaben ergänzen. var fileLoadingImage = "http://www.deinewebsite.de/pfad/zu/images/loading.gif"; var fileBottomNavCloseImage = "http://www.deinewebsite.de/pfad/zu/images/closelabel.gif";
- Nachdem nun alle Dateien erfolgreich angepasst wurden, müssen diese in das erstellte Verzeichnis auf den Webserver geladen werden.
- So, der schwierigste Teil ist nun geschafft. Wie nutzt man nun Lightbox JS v2 mit seinen Effekten?
- Es gibt zwei Möglichkeiten der Anzeige, entweder als Einzelbild oder als Bilderserie, in der man navigieren kann.
Beispiel 1: Einzelbild
Ausgangs - Bild <a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg"></a> Ausgangs - Text <a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox" title="Description">Klicke diesen Link</a>
Beispiel 2: Bilderserie
Beispiel Code für die Nutzung von lightbox als Bildserie, wobei die Anzahl der Bilder keine Rolle spielt. Wichtig ist nur, darauf zu achten, dass lightbox[serie] überall eingetragen wurde, wobei "serie" durch jedes x – beliebige Wort ersetzt werden kann.
Ausgangs - Bilder
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg" alt="Serie: image 1 0f 3 thumb"></a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg" alt="Serie: image 2 0f 3 thumb"></a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description"><img src="http://www.deinewebsite.de/bild_klein.jpg" alt="Serie: image 3 0f thumb"></a>
Ausgangs - Texte
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description">Bild 1</a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description">Bild 2</a>
<a href="http://www.deinewebsite.de/bild_gross.jpg" rel="lightbox[serie]" title="Description">Bild 3</a>
Natürlich kann Lightbox noch an seine Bedürfnisse angepasst werden.
Viel Spass mit dem Java Script und der kleinen Anleitung.
Have no enough cash to buy a house? Worry no more, because that’s possible to get the loans to work out such kind of problems. Thus get a car loan to buy everything you require.