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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…