NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann
[Version 1.9] [Version 3.0] [Version 3.1] [Version 3.1 Text] [Version 3.1 Thumb] [Version 5.0] [Standard Ansicht] [Andere Ansichten] [Slideshow] [Video] [HTML5 Video]

Visual Lightbox (Visual Ansicht) - hier Version 1.9.0.5 (Version 3.1 im semantischen XHTML hier)

hier eine Variante der Lightbox, die mittels des Programms von “VisualLightbox.com”,
das Ihr hier downloaden könnt, total einfach und selbsterklärend alle Bilder, Piktogramme, Skripte und Konfigurationen in nur 6 Schritten selbst erstellt.

Hier mal zwei Beispiele und unten meine Erklärungen dazu, sowie den Konflikt mit der NOF-Navi.

  • Im Garten ...

 

  • Ibiza ...

 

 

 

 

Erklärung:

Diese Variante der Lightbox scheint mir bisher die wirklich am einfachsten zu verstehende zu sein.

Nachdem Ihr Euch “Visual Lightbox” heruntergeladen habt, erstellt Ihr Euch eine Galerie.

Ihr erhaltet dann eine

index.html

sowie die beiden Ordner:

data        (mit Euren Fotos und Thumbnails)
engine    (mit allen für die Lightbox notwendigen Skripten)

Falls Ihr die “Visual Lightbox” nicht in einem “Inlineframe” anzeigen wollt, kopiert Ihr diese beiden Ordner in den Ordner, in dem Ihr die Seite habt, auf der Ihr “Visual Lightbox” einbauen wollt.

Also, falls Ihr das auf Eurer Startseite (index.html) macht, dann gehören diese beiden Ordner in das Stammverzeichnis Eures Projektes.

Falls Ihr das auf einer Unterseite macht, dann gehören diese beiden Ordner in Euren Ordner HTML. Natürlich jeweils im Ordner der “Lokalen Publizierung” als auch auf dem Server (mittels FTP-Programm auf den Server kopieren).

Nun müsst Ihr noch Teile des Codes aus der vom Programm generierten index.html kopieren und in Eure Seite einbauen.

Guckt Euch den Code genau an und kopiert diesen Teil in die HTML des Layouts Eurer Seite.

> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML”
> “Zwischen Head-Tags

<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
<script src="engine/js/prototype.js" type="text/javascript"></script>
<script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="engine/js/lightbox.js" type="text/javascript"></script>

<style>
.gallery {
zoom:1;
width:616px;
}
.gallery a {
display:block;
float:left;
margin:5px;
opacity:0.87;
text-align:center;
}
.gallery a:hover {
opacity:1;
}
.gallery a img {
border:none;
display:block;
}
.gallery a#vlightbox{display:none}
</style>
<!-- End VisualLightBox.com HEAD section -->

 

... und für die Fotos selbst, zieht Ihr ein Textfeld auf, demarkiert es und markiert es anschließend durch einfachen Klick.

Fügt dann diesen Teil aus der generierten index.html “vor dem Tag” in die HTML des Textfeldes ein. Also so (siehe Code-Beispiel meiner Galerie “Ibiza” unten):

> Fenster “Text-Eigenschaften” > Button “HTML” > “Vor dem Tag” einfügen

... achtet auf den [Gruppennamen], hier [ibiza].

Lasst Ihr überall den gleichen Gruppennamen, dann wird Lightbox alle Fotos auf dieser Seite abspielen. Ändert Ihr den Gruppennamen für jede Galerie, dann spielt Lightbox auch nur die gewählte Galerie ab, eben so wie auf dieser Seite hier.

<!-- Start VisualLightBox.com BODY section -->
<div class="gallery">
<a href="./data/images/p_0001.jpg" rel="lightbox[ibiza]" title="Ibiza, unser zweites Zuhause"><img src="./data/thumbnails/p_0001.png" /></a>
<a href="./data/images/p_0002.jpg" rel="lightbox[ibiza]" title="Cala Salada"><img src="./data/thumbnails/p_0002.png" /></a>
<a href="./data/images/p_0003.jpg" rel="lightbox[ibiza]" title="Cala d'Hort mit Insel Es Vedra"><img src="./data/thumbnails/p_0003.png" /></a>
<a href="./data/images/p_0004.jpg" rel="lightbox[ibiza]" title="Cala Salada am Nebenstrand"><img src="./data/thumbnails/p_0004.png" /></a>
<a href="./data/images/p_0005.jpg" rel="lightbox[ibiza]" title="Typischer Bodendecker auf Ibiza, Hottentottenfeige"><img
 src="./data/thumbnails/p_0005.png" /></a>
<a href="./data/images/p_0006.jpg" rel="lightbox[ibiza]" title="unsere Sala"><img src="./data/thumbnails/p_0006.png" /></a>
<a href="./data/images/p_0007.jpg" rel="lightbox[ibiza]" title="Blick von unserer Terrasse auf die Bucht von San Antonio"><img
 src="./data/thumbnails/p_0007.png" /></a>
<a href="./data/images/p_0008.jpg" rel="lightbox[ibiza]" title="unser Patio"><img src="./data/thumbnails/p_0008.png" /></a>
<a href="./data/images/p_0009.jpg" rel="lightbox[ibiza]" title="an der Cala Galera"><img src="./data/thumbnails/p_0009.png" /></a>
<a href="./data/images/p_0010.jpg" rel="lightbox[ibiza]" title="Sonnenuntergang am Haus"><img src="./data/thumbnails/p_0010.png" /></a>
<a href="./data/images/p_0011.jpg" rel="lightbox[ibiza]" title="Paella an der Cala d'Hort"><img src="./data/thumbnails/p_0011.png" /></a>
<a href="./data/images/p_0012.jpg" rel="lightbox[ibiza]" title="Sonnenuntergang"><img src="./data/thumbnails/p_0012.png" /></a>

<!--[if lte IE 6]><script src="engine/js/pngfix_vlb.js" type="text/javascript"></script><![endif]-->
<a id="vlightbox" href="http://visuallightbox.com/">Photo Gallery Script by VisualLightbox.com</a>
</div>
<!-- End VisualLightBox.com BODY section -->

 

... ach ja, und hier noch die Erklärung zu der Download-Option des Fotos, was ich hier händisch hinzugefügt habe.

Ihr könnt HTML-Befehle aber auch direkt in das Fenster Bildbeschreibung, welches der
title="hier steht Euer Text" Befehl ist, der Software einfügen - also alles was unten blau markiert ist.

Ihr schreibt einfach den Link (hier zu einer .zip Datei) mit in den “title” Befehl. Dies könnte dann natürlich auch ein Link zu einer anderen internen oder externen Seite sein. Unten mal der Code von meinem Foto “Eichhörnchen” (<br> erzeugt einen Umbruch).

title="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"

 

ACHTUNG:

Leider gibt es einen Konflikt zwischen der NOF-eigenen rollover.js (bis Version 11 von NOF) und den
Javascript-Dateien von dieser Lightbox-Variante.

Daher kommt es beim Versuch die NOF-eigene Navi zu verwenden zu einem Skriptfehler.

Ich persönlich habe, hier auf dieser Seite, einfach eine Text-Navigation selbst erstellt. Die NOF-eigene “Text-Navigation” funktioniert ebenfalls, da ja dort die “rollover.js” nicht angesprochen wird.

Ihr könnt also weder den Rollover-Effekt noch die Klappleisten verwenden. Hakt Ihr dies in den Navigationsleiste-Eigenschaften ab, dann könnt Ihr auch Eure bisherige Navigationsleiste weiter verwenden (Bild unten).

... ach übrigens, den Schriftzug “VisualLightbox.com” kann man bei der gekauften Version entfernen.

... weitere Lightbox-Varianten findet Ihr hier.


Viel Erfolg!

nach oben

zurück

 

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik