Mit dem Javascript Lightbox kann man die Präsentation von Bildern auf einer Webseite sehr unkompliziert aufbohren. Zum Ausprobieren einfach mal das Bild anklicken.
Das Ganze funktioniert natürlich nur, wenn Javascript im Browser aktiviert wurde. Das Gute an der lightbox ist, dass die eigentliche Funktionalität auch dann gegeben ist, wenn Javascript ausgeschalten wurde oder nicht verfügbar ist. Dann öffnet sich das Bild einfach im aktuellen Fenster.
Die Implementierung ist kinderleicht. Mehr dazu gibt es nach einem Klick.
Das Skript nutzt das Ajax Framework Prototype sowie die Effektbibliothek Scriptaculous.
Im Kopfbereich einer Webseite müssen folgende Dateien eingesetzt werden:
<!-- Prototype Framework -->
<script type="text/javascript" src="pfad/prototype.js"></script>
<!-- Effektbibliothek -->
<script type="text/javascript" src="pfad/scriptaculous.js?load=effects"></script>
<!-- Lightbox Skript-->
<script type="text/javascript" src="pfad/lightbox.js"></script>
<!-- CSS Datei -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Der Bildaufruf im Seitenbereich sieht dann so aus:
<a href="/pfad/grosses-bild.jpg" rel="lightbox" title="Testbild">
<img src="/pfad/vorschaubild.jpg" alt="Vorschaubild" width="150" height="200" />
</a>
Anhand des rel Attributes sucht das Skript sich die Bilder im Quelltext heraus und öffnet das größere Bild dann direkt im Fenster. Das title Attribut im Link wird als Titel des Bildes verwendet. Weitere Optionen findet man auf der lightbox Seite.
Die Lightbox2, inklusive aller notwendigen Bibliotheken, kann man hier herunterladen. Man findet im Netz auch noch viele andere ähnliche Scripte wie z.B. thickbox oder greybox. Einfach mal googlen. ;o)
