So stellen Sie Mediainhalte elegant dar

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

<a href="ordner/bild01gr.jpg" rel="lyteshow[xyz]" ><img src="ordner/bild01kl.jpg"></</a>

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:

<a href="seite.html" rel="lyteframe" rev="width: 400px; height: 300px; scrolling: yes;">Text</a>

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.

Bilder und Videos eleganterpräsentieren

© Archiv

Zeigen Sie mit dem Skript Videobox Filme populärer Videoportale im Lichtkasten an.

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:

<a href="http://www.youtube.com/watch?v=xxxxxx" rel="vidbox" title="Text"> Text</a>

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:

<a href="http://www.ihredomain.de/name.swf" rel="vidbox 400 300" title="Bezeichnung"><img src="vorschaubild.jpg"></a>

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

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".