Visual Lightbox - Version 5.0


Thanks to Visual Lightbox for your great support!


Hier das Beispiel der Version 5.0 (Released 15. November 2011) von “VisualLightbox.com”,
die Ihr hier downloaden könnt.

Hier könnt Ihr die Visual Lightbox in einer Tabelle mit dynamischer Anpassung der Breite sehen.

Im Garten
Eichhörnchen mit Download-Link, Thumbnail-Ansicht im “Schatten-Look”, große Fotos im neuen “Noble-Look”

weitere Besonderheiten und Neuheiten der Version 5.0
Rechte Maustaste kann aktiviert werden um Fotos downloaden zu können und andere kleinere Neuerungen.
Mit Version 5.0 ist es möglich mehrere Galerien auf ein und der gleichen Seite darzustellen.
 Das große Fenster kann nun auch mit der Esc-Taste geschlossen werden.
Der von “Visual Lightbox” generierte HTML-Code kann seit Version 4.0 direkt in die eigene HTML-Seite integriert werden,
was aber mit NOF nicht funktioniert, da NOF die HTML-Seiten ja immer neu generiert.

Unsere Katze
Thumbnail-Ansicht im “No Frame Rounded-Look”, große Fotos im “Noble-Look”

Im Garten
Hier nur ein Thumbnail, hinter dem sich die Galerie verbirgt

Im Garten
Hier ein Text-Link, hinter dem sich die Galerie verbirgt

Direkter Einbau in NOF 11:

Der Einbau bei der Version 5.0 (erschienen am 15. November 2011) weicht insofern von älteren Versionen ab, dass man nicht zwingend auf “Semantisches XHTML” umstellen jedoch das Layout auf eine erweiterte HTML-Ausgabe umsetzen muss, damit die Darstellungen im IE8 nicht im “Quirks-Modus” verfälscht werden.

NOF 11 hat noch nicht diese Einstellmöglichkeit. Wie man diesen “DOCTYPE” in NOF einfügen kann, habe ich bei meiner “Fancy Box” gleich oben beschrieben. Bitte guckt für den “DOCTYPE” dort.

ACHTUNG - bis NOF 11 (ab NOF 12 schon) funktioniert die Klappnavi bei dieser Visual-Lightbox Version dann nicht mehr im Firefox-Browser. Bitte hakt im Fenster “Navigationsleiste-Eigenschaften” unter “Stil” die Rollover-Eigenschaften ab. Die Datei “rollover.js” wurde diesbezüglich in NOF 12 korrigiert.

In die HTML des Layouts “Zwischen Head Tags” gehört dann wieder der von der “Visual Lightbox” erzeugte Teil aus der index.html, der “Head-Bereich” (siehe unten). In meinem Beispiel liegen die Ordner:

engine und data in dem gleichen Verzeichnis, wie die Seite auf der Ihr das eingebaut habt.

In dem Code unten, habe ich auch noch einen Link zu der zweiten CSS-Datei, meiner zweiten Galerie der Katze (hier mal rot markiert). Ihr müsst also für jede Galerie hier auf deren eigene CSS-Datei verweisen.

> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML”
> Skript (unten) “Zwischen Head Tags” einfügen.

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

Die Fotos selbst werden dann im “Body-Bereich” in die HTML “vor dem Tag” (NOF 11 “vorher”) oder besser in den “HTML-Code-Editor” eines Textfeldes eingetragen. Hier habe ich auch noch zentriert, damit meine Galerie mittig auf der Seite steht.

Bei dem zusätzlichen Code innerhalb der Titel-Beschriftung, kann man auch HTML-Code mit einbringen, wie Umbrüche oder Verlinkungen. Die Software erstellt den DIV-Container für den Code selbst. Beispiel:

Eichhörnchen <br>hier mal ein Beispiel von mir, <br>wie man einen
<a href=http://www.tommyherrmanndesign.com/nof/visual-lightbox/data/images/DownloadEichkater.zip>Download</a>
selbst hinzufügen könnte

Ich habe nun, hier in diesem Beispiel, 2 unterschiedlichen Galerien auf einer Seite, nämlich die Galerien “Garten” und “Katze”. Für die nächste Galerie zieht Ihr Euch dann wieder ein Textfeld auf und fügt den Code wieder in die HTML des Textfeldes ein. Um die Galerien unterschiedlich und mit der eigenen Anzahl der Fotos (hier jeweils 8) darstellen zu können, müsst Ihr folgendes tun:

Erstellt nun Eure erste Galerie und wählt bei “Gallery ID” die Zahl “1” für diese erste Galerie aus. Bei der nächsten (zweiten) Galerie wählt Ihr dann dort die Zahl “2”. So erstellt die Software für jede Galerie eine eigene “ID”, CSS-Datei sowie eigene Ordner für die Fotos und Thumbnails.

In der, von Visual Lightbox generierten, index.html findet Ihr dann auch eine neue Verlinkung zu der passenden CSS-Datei, die dann z.B. “vlightbox2.css” heißt (für die 2. Galerie). Diese Verlinkung tragt Ihr dann zusätzlich in den “Head” Bereich Eurer Seite ein. Es steht dann also für jede Galerie eine eigene
CSS-Datei im “Head” der Seite, in meinem Beispiel hier sind es zwei, wie Ihr oben im “Head” sehen könnt:

<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />

... dementsprechend wird dann bei der ID, der CSS-Class sowie bei den Ordnern immer auf diese zweite Galerie verwiesen (unten im Code schwarz markiert).

Wenn Ihr eine Galerie hinter nur einem Thumbnail verbergen wollt, dann müsst Ihr noch ein zusätzliches Skript für diese Funktion mit in den Head-Bereich (“Zwichen Head-Tags”) der Seite einbringen.

<script type="text/javascript">
var started;
function showLightBox()
  {
    if (started) return;
    started = setTimeout(function(){
        Lightbox.start(document.getElementById('firstImage'));
        started;
    },500);
  }
function stopShowLightBox(){
    if (started) {
        clearTimeout(started)
        started = 0;
    }
  } 
</script>

... und dann sieht der Code für den “Body Bereich” im Textfeld so aus. Das anzuzeigende Tumbnail wird oben eingefügt, alle anderen Tumbnails werden mit style="display:none;" verborgen und das zuerst anzuzeigene große Bild in der Lightbox erhält die id="firstImage"

... und bei meinem Text-Link sieht der Code für den “Body Bereich” im Textfeld so aus. Der Text-Link wird oben eingefügt, alle Tumbnails werden mit style="display:none;" verborgen und das zuerst anzuzeigene große Bild in der Lightbox erhält die id="firstImage"

Anstatt nun jedem Thumbnail den Befehl style="display:none;" einzeln zu verpassen, könnt Ihr auch anstelle dessen, die zu dieser Galerie passende CSS-Datei ändern und den Befehl dort eben nur einmal einbringen. Die CSS-Dateien findet Ihr im Ordner > engine > css, der jeweiligen Galerie.

Links die Original CSS-Datei meiner Galerie, dort ersetzt Ihr display:inline-block; mit display:none;
so wie rechts in der modifizierten CSS-Datei zu sehen.