Visual Lightbox - Version 3.0 (was ist neu) im semantischen XHTML.

hier das Beispiel der Version 3.0 (Released 27. Januar 2010) im semantischen XHTML
von “VisualLightbox.com”, das Ihr hier downloaden könnt

Unten meine Erklärungen zum Einbau im Inlineframe und zum direkten Einbau dazu,
sowie eine Anmerkung zur Datei rollover.js von NOF.

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

weitere Besonderheiten
Lightbox-Fenster folgt dem Scroll
Beliebige HTML-Befehle können in die Bildbeschreibung eingebracht werden.

Unsere Katze
Thumbnail-Ansicht mit Titel im “Vista-Look”, große Fotos im “Dark Glass-Look”

und im “nur Text Look” oder mit der Galerie hinter nur einem Foto

Erklärung zum Einbau in allen NOF-Versionen (mittels Inlineframe):

Es gibt -wie immer- verschiedene Wege, wie man vorgehen kann. Der einfachste, vielleicht nicht der eleganteste Weg ist schlicht ein neues Verzeichnis wie z.B.:

Lightbox/galerie/

auf Eurem Server zu erstellen und dort sämtliche Ordner und Dateien, die von der “Visual Lightbox” erstellt wurden, mittels FTP-Programm (wie z.B. Filezilla) hin zu kopieren.

Das sind:

1) Datei index.html (aufzurufende Startseite)
2) Ordner data (Ordner mit allen Fotos)
3) Ordner engine (Ordner mit den Skripten der Lightbox)

Dann zieht Ihr Euch an beliebiger Stelle Eurer Seite ein “Inlineframe” auf und gebt die URL zu der von der “Visual Lightbox” erstellten index.html als externen Link an oder verlinkt eben direkt zu der Galerie
(ohne Inlineframe) und fertig. Also ungefähr so:

http://www.DeineDomain.de/Lightbox/galerie/index.html

Dann braucht Ihr Euch um keinerlei weitere Einstellungen Gedanken zu machen und Ihr müsst auch nicht auf XHTML umstellen, da das ohnehin erst ab NOF 11 möglich ist.

Diese Galerie (unten) wird in einem Inlineframe angezeigt (im Gegensatz zu den obersten beiden).

Ibiza
Thumbnail-Ansicht im “Mac-Look”, große Fotos im “Vista-Look”

Bemerkung:
Im Inlineframe werden die großen Fotos und die Lightbox-Effekte natürlich maximal nur die Größe des Inlinframes erreichen können.

Direkter Einbau in NOF 11:

Der Einbau bei der Version 3.0 (erschienen am 27. Januar 2010) weicht insofern von älteren Versionen ab, dass man hier auf “Semantisches XHTML” umstellen muss, da sonst einige Scripte nicht korrekt ausgeführt werden. Die Umstellung des Layouts auf XHTML ist erst ab NOF 11 möglich.

> Klickt auf das Layout > wählt bei “HTML-Ausgabe” im Dropdown-Menü “Semantisches XHTML”

... ansonsten funktioniert der Einbau ganz genauso wie bei meinem Beispiel der Version 1.9 - guckt bitte auch dort. Weitere nützliche Infos gibt es auf der FAQ-Seite der “Visual Lightbox”.

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

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

<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style type="text/css">#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->

Die Fotos selbst werden dann wieder im “Body-Bereich” in die HTML “vor dem Tag” eines Textfeldes eingetragen, genau wie bei der Version 1.9 auch.

<!-- Start VisualLightBox.com BODY section -->
<div id="vlightbox">

<a rel="lightbox_vlb" href="data/images/hibiskusgelb.jpg" title="Hibiskus gelb"><img src="data/thumbnails/hibiskusgelb.png" alt="Hibiskus gelb"/></a>

<a rel="lightbox_vlb" href="data/images/hibiskusrot.jpg" title="Hibiskus rot"><img src="data/thumbnails/hibiskusrot.png" alt="Hibiskus rot"/></a>

<a rel="lightbox_vlb" href="data/images/klatschmohn.jpg" title="Klatschmohn"><img src="data/thumbnails/klatschmohn.png" alt="Klatschmohn"/></a>

<a rel="lightbox_vlb" href="data/images/margerite.jpg" title="Margerite"><img src="data/thumbnails/margerite.png" alt="Margerite"/></a>

<a rel="lightbox_vlb" href="data/images/peonie.jpg" title="Peonie"><img src="data/thumbnails/peonie.png" alt="Peonie"/></a>

<a rel="lightbox_vlb" href="data/images/sonnenhut.jpg" title="Sonnenhut"><img src="data/thumbnails/sonnenhut.png" alt="Sonnenhut"/></a>

<a rel="lightbox_vlb" href="data/images/tulpe.jpg" title="Tulpe"><img src="data/thumbnails/tulpe.png" alt="Tulpe"/></a>

<span rel="lightbox_vlb"><a href="data/images/eichhrnchen.jpg" title="Eichhörnchen mit Download"><img src="data/thumbnails/eichhrnchen.png" alt="Eichhörnchen mit Download"/></a><p>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><span>Download</span></a> selbst hinzufügen könnte</p></span>

<a id="vlb" href="http://visuallightbox.com">Lightbox2 by VisualLightBox.com v3.0</a>

<script src="engine/js/visuallightbox.js" type="text/javascript"></script>

</div>
<!-- End VisualLightBox.com BODY section -->
 

Neu ab dieser Version 3.0:

What's new:

* Flickr support. Add flickr photostream, photoset or a single photo
  to your gallery!
  See the example with images from flickr.com:
  http://visuallightbox.com/jquery-lightbox-dark-glass-demo.html

* HTML in the caption. Now you can add any html tags to image caption,
  i.e. links, text formatting etc..

* New Dark Glass template:
  http://visuallightbox.com/jquery-lightbox-dark-glass-demo.html

* The option to specify the number of columns in your photo gallery.

* Overlay shadow color and page background color.

* You can save thumbnails in PNG or JPG format and specify the
   quality of the generated thumbnail images now.
 

Anmerkung (nur für den “direkten” Einbau in NOF 11):

in früheren Versionen der “Visual Lightbox” gab es beim Einbau in die NOF-Seite ein Problem mit der Datei

rollover.js

von NOF (diese Datei ist für das Verhalten der Navigations-Leiste verantwortlich). Dieses Problem scheint nun gelöst.

Verwendet man jedoch Klappleisten in der Navi (Navi klappt aus), dann lässt sich die Seite mittels:

> Häkchen im Fenster “Layout-Eigenschaften” > “im Browser zentrieren”

nicht mehr zentrieren.

Ihr müsstet dann den HTML-Befehl zum Zentrieren in die HTML des Layouts oder Master-Rahmens einfügen:

“Beginn des Haupttextes”

<div align="center">

“Ende des Haupttextes”

</div>


Die Klappleisten funktionieren auch so noch nicht im Firefox-Browser im semantischen XHTML, dies ist ein Bug von NOF und hat nichts mit der “Visual Lightbox” zu tun. Ich habe mir daher mit folgendem “Trick” beholfen:

Ich habe einen zusäztlichen “Layout-Bereich” auf die Größe meiner Navi aufgezogen und diesen
zusätzlichen “Layout-Bereich” im Fenster “Layout-Eigenschaften” unter

> HTML-Ausgabe > auf “festes Seiten-Layout” gestellt.

Dann habe ich meine Navi auf diesen “Layout-Bereich” gesetzt und kann nun auch im Firefox-Bowser und allen anderen Browsern meine Klappleisten und meinen Rollover-Effekt der Navi weiter benutzen.

nach oben

zurück