Bilder mit Lightbox Effekt

Fotoquelle : Kellermeister | photocase.com

Heute habe ich den Lightbox-Effekt in diesem weblog installiert. Das Anzeigen eines Bildes mit durchscheinendem Overlay habe ich schon eine ganze Weile bewundert und dachte immer, dass das wohl ziemlich kompliziert sein muss.

Ist es aber nicht. Im Gegenteil – Lightbox ist in gemütlichen 5 Minuten installiert.
Klick doch mal auf das Bild von der Physalis … :-)

Das Originalskript von Lokesh Dhakar ist hier zu finden.
http://www.huddletogether.com/projects/lightbox/

Dieses Skript lässt sich auf jeder Webseite einbinden.

Das .zip Archiv runterladen, entpacken und die darin enthaltenen Dateien entweder im Root oder einenm Verzeichnis ablegen.
Im head der Datei folgende Codezeile einfügen:
<script src="lightbox.js" type="text/javascript"></script>

(Pfad anpassen nicht vergessen, wenn die Dateien in einen x-tra Ordner gelegt wurden.
Man kann die Lightbox auch über .css noch „verschönern“.
Dann im head der Datei auch den Pfad zum .css stylesheet einbinden.
<link href="lightbox.css" rel="stylesheet" type="text/css" media="screen" />

Jedes Bild, bzw. jeder Link auf ein Bild, welches sich in einer vergrößerten Ansicht mit dem Overlay zeigen soll, muss dann im Quellcode das rel=“lightbox“ Attribut erhalten.

Eine etwas umfangreichere Variante der Lightbox ist die Greybox, die ich aber noch nicht getestet habe. Hier können ganze Fotogalerien in einem Overlay weitergeschaltet werden.
http://orangoo.com/labs/GreyBox/

Für Wordress geht es aber noch einfacher.

Den virtuosen Plugin-Machern sei Dank :-)
Im Weblog von Christian Fischer gibt es ein Plugin.

Das Plugin wie üblich in den Plugin-Ordner von WordPress hochladen.

Dann ein Bild über die Upload Funktion einfügen und Bild zum Editor senden.Anschließend in die Code-Ansicht des Editors gehen und dem a-Element das Attribut rel=“lightbox“ hinzufügen.

That’s it.