Tutorial Visual Lightbox Version 5.4 vom 16.01.2013

Der Einbau neuerer Versionen funktioniert ganz genauso. Getestet bis Version 5.7 vom 21.08.2013

Bitte guckt für meine Einbau-Anleitungen zunächst diese Visual Lightbox Tutorials von mir an, denn ich beschreibe hier nur die Neuheiten der Version 5.4 sowie das Verhalten in NOF 2013, mit dem ich diese Seiten erstellt habe. Unten könnt Ihr Euch noch einen Film von mir als Tutorial angucken

Mit dieser “Visual Lighbox Version 5.4” wird vom Programm nur noch ein Verzeichnis für sämtliche Skripte und Bilder erstellt:

  • index_files

Wenn Ihr dieses Verzeichnis öffnet, dann könnt Ihr erkennen, dass “Visual Lightbox” für jede meiner 3 Galerien eigene Verzeichnisse erstellt hat.

Das ist eine schöne Neuerung, denn dadurch wird es möglich jeder Galerie, auch wenn sich diese (wie bei mir) auf der gleichen Seite befinden, ein eigenes Aussehen zu geben. Im Verzeichnis vlb_engine werden ebenfalls für jede Galerie eigene Javascripts erstellt, sodass eine ganz individuelle Konfiguration jeder Galerie möglich wird.

Dafür müsst Ihr aber folgende Voraussetzungen beachten:

Ihr müsst jede neue Galerie immer in das bereits mit der ersten Galerie erstellte Verzeichnis vlb_engine mit “Visual Lightbox” publizieren, nur so erstellt das Programm die Verzeichnisse und Dateien korrekt. Ihr müsst also jeder neuen Galerie eine eigene ID geben, im Screenshot unten für meine 3. Galerie.

Weiterhin musste ich beim Einbau in NOF feststellen, egal in welcher HTML-Ausgabe ohne Tabellen, dass eine jQuery-Datei der “Visual Lightbox” nicht mit jenen von NOF korrespondiert. Daher habe ich die Verlinkung “Zwischen Head Tags” zu der Datei

  • visuallightbox.js

der “Visual Lightbox” weggelassen.

Ihr müsst auch jede Verlinkung zu jeder Galerie in den <Head> Eurer Seite eintragen (hier also 3), wie Ihr an meiner “HEAD section” erkennen könnt.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="index_files/vlb_files1/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="index_files/vlb_files1/visuallightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="index_files/vlb_files2/vlightbox2.css" type="text/css" />
<link rel="stylesheet" href="index_files/vlb_files2/visuallightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="index_files/vlb_files3/vlightbox3.css" type="text/css" />
<link rel="stylesheet" href="index_files/vlb_files3/visuallightbox.css" type="text/css" media="screen" />
<script src="index_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->

Dafür habe ich die oben weggelassene Verlinkung zu der Datei visuallightbox.js im <>Code Editor der Seite, den Ihr unten links auf jeder Arbeitsseite aufrufen könnt,  in den Bereich [Custom4] eingefügt. Somit steht diese jQuery-Datei unter denen von NOF.

Solltet Ihr Probleme mit dem z-index haben - also z.B. die Visual Lightbox hinter Eurer Navigationsleiste aufgehen, dann legt unter Eure Navi einen neuen Layoutbereich, den Ihr auf die HTML-Ausgabe “HTML 4.01” (festes Seitenlayout) stellt.

Die zusätzliche Funktion einer Galerie hinter einem einzelnen Thumbnail und des Textlinks habe ich auf meiner Seite der Version 5.0 beschrieben. Guckt bitte auch zusätzlich auf der Support-Seite der Visual Lightbox.

Alles andere bleibt gleich wie z.B. bei der von mir beschriebenen Version 5.0. Die “Visual Lightbox 5.4” wird im IE 8 oder älter nicht korrekt angezeigt.

 

Hier könnt Ihr ein Video auf YouTube zum Einbau der Visual Lightbox von mir sehen
Guckt Euch auch mal meinen Tutorial-Film zur Video Lightbox an

 

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik