Visual Lightbox - Version 3.1 im semantischen XHTML. Thanks to Visual Lightbox for your great support!

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

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.

Direkter Einbau in NOF 11:

Ein Einbau mehrerer Galerien auf der gleichen Seite ist nicht mehr möglich.

Der Einbau bei der Version 3.1 (erschienen am 08. Februar 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 class="vlightbox" href="data/images/hibiskusgelb.jpg" title="Hibiskus gelb"><img src="data/thumbnails/hibiskusgelb.png" alt="Hibiskus gelb"/></a>

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

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

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

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

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

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

<div class="vlightbox">
<a href="data/images/eichhrnchen.jpg" title="Eichhörnchen hier mal ein Beispiel von mir, wie man einen Download selbst hinzufügen könnte"><img src="data/thumbnails/eichhrnchen.png" alt="Eichhörnchen hier mal ein Beispiel von mir, wie man einen Download selbst hinzufügen könnte"/></a><div>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</div></div>

<a id="vlb" href="http://visuallightbox.com">Lightbox2 by VisualLightBox.com v3.1</a>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>

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

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