Teil 3: Lightbox-Effekt: Bilder und Videos eleganter präsentieren

Klicken Sie eines der Vorschaubilder an, startet das Lightbox-Fenster und die Bilder wechseln automatisch. Die Präsentation lässt sich über die zusätzlich eingefügte Pause-Taste unterbrechen. Konfigurieren Sie das Skript über die Datei lytebox.js: Sie legen dort beispielsweise die Geschwindigkeit der Slideshow und das Verhalten bei Erreichen des Stapelendes fest. Eine weitere Option des Skripts: Laden Sie eine komplette Webseite in den Lichtkasten. Notieren Sie dazu einen Link nach dem folgenden Beispiel:

Geben Sie bei rev die Größe und das Scrollverhalten des Anzeigebereichs an. Mehrere Seiten lassen sich als Galerie präsentieren. Fügen Sie dazu den entsprechenden Namen in eckigen Klammern zum verbindenden Parameter nach dem Muster rel="lyteframe[galeriename]" hinzu.

Lightbox für Videos

Attraktiv ist auch die Kombination von Lightbox-Effekt und Videos. Zeigen Sie beispielsweise mit dem Skript Multibox () Flash-Animationen und Videos in der Lightbox an oder lassen Sie sie die Besucher über den eingebundenen Player Audio-Files abspielen. Sämtliche Funktionen zur Steuerung der Multimediaobjekte sind ohne Einschränkung bedienbar. Das Skript erkennt automatisch das jeweilige Format.

Je nach Einsatz kann es jedoch auch helfen, den Typ des Objektes mit rel="type:..." ausdrücklich anzugeben. Stellen Sie über diverse Optionen die Gestaltung, das Anzeigeverhalten und die Funktionalität des Skripts ein. Mit onOpen und onClose lassen sich beispielsweise eigene Funktionen beim Öffnen und Schließen der Box aufrufen. Das kostenlose Skript Videobox () bietet die Möglichkeit, Videos von Portalen wie YouTube, Metacafe und Google Video über die eigenen Seiten zu legen.

Und auch eigene Flash-Videos lassen sich im Lightbox-Modus abspielen. Extrahieren Sie die Ordner des Skript-Archivs, legen Sie sie in Ihrem Web-Verzeichnis ab und verknüpfen Sie die Skriptdateien mootools.js, swfobject.js und videobox.js sowie die CSS-Datei videobox.css im Kopf Ihrer Webseite. Mit einem Link nach dem folgenden Muster rufen Sie beispielsweise ein YouTube-Video auf:

Ersetzen Sie dabei xxxxxx durch die jeweilige ID des Films. Der Parameter rel="vidbox" verknüpft den Link mit der Videobox. Der Text bei title erscheint als Beschriftung unterhalb des Anzeigebereichs. Umschließen Sie mit dem Link entweder Text oder ein kleines Vorschaubild. Eine weitere Möglichkeit: Sie verknüpfen einen Film, der im SWF-Format bereits auf Ihrem Webspace liegt, nach dem folgenden Muster:

Durch die zusätzlichen Pixelwerte bei rel legen Sie die Breite und die Höhe des Videos fest.