Tutorials von Thomas Frei-Herrmann

Video LightBox Version 2.01 in XHTML

Dies ist die Version 2.01 vom 19.03.2012 der Video LightBox, die Ihr hier downloaden könnt.

Der Einbau funktioniert ganz genauso wie bei der Version 1.9. Bitte guckt daher mein Tutorial zu Video LightBox 1.9 an.

Der einzige Unterschied ist, dass hier für sämtliche Skripte und Dateien nur noch ein Ordner generiert wird, dies ist der Ordner:

index_videolb

Nun kopiert Ihr diesen Ordner in den Ordner Eurer Lokalen Publizierung und mittels FTP-Programm natürlich auch auf den Server, in dem sich auch die Seite befindet auf der Ihr das alles einbauen wollt, also normalerweise ist das dann der Ordner html.

Öffnet die vom Programm generierte index.html und kopiert Euch die Codes der markierten Bereiche “Head section” und “Body section”, wie in meinem Tutorial zu Video LightBox 1.9 erklärt, in die HTML Eurer NOF-Seite.

ACHTUNG:

Bitte verwendet auch hier wieder den validen erweiterten DOCTYPE im “Head-Bereich” Eurer Seite, da im Standard-Modus (“Quirks”) von NOF die Skripte der “Video LightBox” nicht korrekt funktionieren.

Wie man einen DOCTYPE (HTML-Ausgabe) in NOF ändert, erkläre ich hier.

Auch die HTML-Ausgabe XHTML oder “Festes Seitenlayout” (HTML 4.01) funktionieren mit dieser “Video LightBox” nicht korrekt, da die alten Javascripte von NOF nicht mit den modernen Skripten der “Video LightBox” korrespondieren. Dies könnt Ihr aber so ändern.

Verwendung in XHTML oder HTML 4.01 oder HTML5

Bitte kopiert die Skripte der “Video LightBox”, die mit “HEAD section” markiert sind, nicht in die HTML des Layouts (wie gewohnt), sondern auf der Seite in den <>Code Editor, den Ihr unten links auf jeder Arbeitsseite aufrufen könnt in den Bereich [custom4].

<!-- Start VideoLightBox.com HEAD section -->
   <link rel="stylesheet" href="../index_videolb/videolightbox.css" type="text/css" />
   <link rel="stylesheet" type="text/css" href="../index_videolb/overlay-minimal.css"/>
   <script src="../index_videolb/jquery.js" type="text/javascript"></script>
   <script src="../index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->

Nun müsst Ihr noch die Javascript-Datei der Navigationsleiste nochmals unter diese “Head section”, ebenfalls im Bereich [custom4], kopieren da sonst die Navigationsleiste nicht angezeigt werden würde.

<script type="text/javascript" src="../assets/navbars.js"></script>

nach oben

Hier noch ein Beispiel mit der individuellen Platzierung der Thumbnails.

Guckt Euch auch mal bei Bedarf meinen kleinen Tutorial Film zum Einbau an.

Viel Erfolg !