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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.