Video Lightbox 2.1 mit individuellen Thumbnails

Kitty

YouTube Video

Im Riff

 

Es bestand der Wunsch ein Bild direkt auf der Seite aufzuziehen um die Video Lightbox zu starten, anstatt das Bild im Code, wie von der Video Lightbox generiert, zu verwenden. Dadurch ist man in der Lage die Thumbnails ganz individuell zu positionieren.

Zieht Euch das Bild, wie gewohnt, auf der Seite auf und dann müsst Ihr die DIV-Class der Video Lightbox um das Bild herum bauen.

Ihr markiert also das Bild und klickt im Fenster “Bild-Eigenschaften” auf den Button “HTML”.

In meinem Beispiel verlinke ich hier auf zwei Videos und habe den von der Video Lightbox generierten Code aus der “BODY section” wie folgt verwendet.

Beispiel YouTube Video:

Vor dem Tag

<div class="videogallery"><a class="voverlay" href="http://www.youtube.com/v/0Bmhjf0rKe8?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer">

Nach dem Tag

</a></div>

Beispiel eigenes Video:

... an dieser Stelle herzlichen Dank an Wolfgang N., der mir dieses Video für meine Seite zur Verfügung gestellt hat.

Vor dem Tag

<div class="videogallery"><a class="voverlay" href="index_videolb/player.swf?url=video/WofgangN-001.flv&volume=100">

Nach dem Tag

</a></div>

Dann zieht Ihr Euch noch ein Textfeld unter den verwendeten Thumbnails auf und fügt die Skripte mit den Verlinkungen zu den Javascript-Dateien der
Video Lightbox in den HTML-Code Editor dieses Textfeldes ein, sodass diese unter den Bildern stehen.

<script src="index_videolb/jquery.tools.min.js" type="text/javascript"></script>
<script src="index_videolb/videolightbox.js" type="text/javascript"></script>

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik