Die Galerie der Visual Light Box ist einfach zu erstellen, es gibt viele Variationen einzustellen und man kann sie ganz einfach per IFrame auf der NOF-Webseite einbinden. Man benötigt KEINE Scrpite, man muss nichts in den HTML Code einfügen, das ist das Schöne an diesem Programm.

Zunächst lade ich mir die neueste Version der Visual Lightbox hier herunter und installiere es auf meinem Rechner.
Für den nichtkommerziellen Gebrauch ist das Programm kostenlos.

Dann erstelle ich mir auf meinem Desktop einen neuen Ordner. Ich kopiere alle Bilder, die in die Galerie sollen, hinein. Die Bilder sollten möglichst die gleiche Größe haben. Man kann quer- und hochformatige Bilder mischen, bei den hochformatigen Bilder wird beim Thumbnail (Kleines Vorschaubild) ein wenig abgschnitten, aber das große Bild wird komplett angezeigt. Ich erstelle außerdem den Ordner Galerie.

Für eine professionelle Webseite würde ich Bilder in der gleichen Größe wählen und auch nur hoch- oder querformatig. Bei einer Hobbyseite ist das nicht sooo wichtig.

Ich öffne das Programm Visual Light Box (derzeit Version 4.7).



 Bild1.jpg (Größe: 74,57 KB / Downloads: 116)


Die Anweisung des Programms ist eindeutig, ich klicke auf den + Button und navigiere zum Desktop zu meinem Ordner Neuer Ordner, der die Bilder enthält.



 Bild2.jpg (Größe: 124,66 KB / Downloads: 102)


Ich wähle die Bilder, die in die Galerie sollen, aus, indem ich sie anklicke.



 Bild3-1.jpg (Größe: 117,19 KB / Downloads: 85)


Mit der – Taste kann ich Bilder wieder entfernen, per Drag und Drop Bilder verschieben.

Danach geht es an die Einstellungen der Galerie.



 Bild4-1.jpg (Größe: 32,43 KB / Downloads: 66)


Zunächst gebe ich der Diashow einen Namen. Die folgenden Einstellungen muss man für sich selbst ausprobieren. Wichtig: Klickt man Enable Right Klick an, sind die Bilder später per rechte Maustaste speicherbar, lässt man das Häkchen weg, nicht. Auch das muss jeder selbst wissen, wie er das gerne hätte.



 Bild5-1.jpg (Größe: 58,65 KB / Downloads: 97)


Bei Miniaturansichten stellst du die Größe und das Aussehen deiner Thumbnails ein und, ganz wichtig, die Hintergrundfarbe, die deine Webseite hat. Voreingestellt ist weiß. Ist deine Seite also weiß, musst du hier nichts ändern. Die Zahl der Spalten habe ich bei diesem Beispiel auf 6 eingestellt. Die Größe der Miniaturansicht habe ich auf 96 x 72 eingestellt. Man muss am Anfang vielleicht etwas herumprobieren, um die Galerie für sich passend zu machen. Bei der Größe der Thumnails ist 6 oder 7 Spalten das maximale für eine 990 px breite Webseite.



 Bild6-1.jpg (Größe: 69,02 KB / Downloads: 91)


Hier wird eingestellt, wie die Bilder später aussehen, wenn sie sich nach dem Anklicken des Thumbnails öffnen. Vergiss nicht, die Größe der Bilder anzugeben.



 Bild7-1.jpg (Größe: 101,83 KB / Downloads: 89)


Hier stellst du das Verzeichnis ein, in das deine Galerie veröffentlicht werden soll, wir nehmen die Datei Galerie auf dem Desktop und klicken dann auf Veröffentlichen. Das Häkchen bei Galerie gleich im Browser öffnen muss gesetzt sein.

In deinem Browser öffnet sich nun die Galerie.

Glückwunsch, du hast deine erste Visual Light Box Galerie erstellt!

Nun geht es an die Veröffentlichung deiner Galerie.

Mit einem FTP Programm (ich nutze Filezilla), lade ich den kompletten Ordner Galerie auf meinen Webspace in den dort bereits vorhandenen Ordner html. Der Ordner html ist Teil deines NOF Projektes und enthält alle Unterseiten deiner Webseite.



 Bild10.jpg (Größe: 46,52 KB / Downloads: 92)


Der Pfad zu deiner Galerie lautet nun:
http://www.meinedomain.de/html/Galerie/index.html

->www.meinedomain.de<- musst du durch deinen Domainnamen ersetzen.

Auf der Seite deines Homepageprojektes in Netobjects, auf der die Galerie eingefügt werden soll, erstellst du nun einen IFrame mit den folgenden Maßen:

730 x 1000 px

Die Einstellungen des IFrame werden wie folgt gemacht:

Abrollen Nein
Kein Haken bei Rahmen



 Bild11.jpg (Größe: 78,35 KB / Downloads: 108)


Nun kannst du die Seite lokal publizieren. Sollten an der Seite oder unten Scrollbalken zu sehen sein, wenn du auf ein Bild klickst, sind die Maße des IFrame zu klein gewählt. Je nach Bildergröße (hier 640 X 480 px) und Bilderzahl muss man etwas herumprobieren.

Vor allem muss man die unterste Reihe der Bilder ausprobieren. Ist der IFrame zu kurz, sieht man beim Öffnen des Bildes kurz einen Scrollbalken aufblitzen.

Mehr Infos zum Gebrauch eines IFrames findest du hier in diesem Tutorial

Ist alles in Ordnung, kannst du die Seite publizieren. Fertig!

Noch ein Tipp zu den Bildern: Da man ohne Manipulation an der Javascript bzw. an der CSS Datei die Anzeige der Bildtitel nicht abstellen kann, sollte man die Bilder von vorneherein aussagekräftig benennen.

Auftritt im Altersheim am 1.1.2020 sieht doch besser aus als DSC165 _xyz.jpg, oder?


Viel Spass beim Nachbauen,


Eure Bee

Klasse, herzlichen Dank, dann wird Opa unser Versuchskaninchen

Habe nun eine kleine Demo gemacht:

http://www.nof-schule.de/visual-lightbox/

Beim Einbau im iFrame muss man sich darüber bewusst sein, dass die Abdunkelung sich nur auf dem Bereich im iFrame und nicht auf dem gesamten Bildschirm einwirkt. Ebenfalls wird die Größe des Bilds in der Vergrößerung von der Größe des iFrames beeinflusst.

Allerdings ist die Methode extrem einfach, deshalb auch von uns für Anfänger empfohlen. Man soll versuchen eine richtige Anzahl von Thumbs zu erzeugen, vielleicht vier Reihen à vier Bilder, damit der iFrame groß genug ist. Darüberhinaus ist es zu empfehlen, für helle Seiten einen hellen Template zu verwenden.

Wer die Visual Lightbox richtig in NOF integrieren möchte kann sich bei Thomas Frei-Herrmann inspirieren lassen. Es bleiben bei Tommy dem fortgeschrittenenn Anwender keine Wünschen offen:

http://www.tommyherrmanndesign.com/nof/visual-lightbox/index.html