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 - Version 5.0 - Bitte guckt auch hier für ein Beispiel mit Hintergrund

Bemerkung Januar 2017: Die Visual Lightbox scheint eingestellt zu sein. Zur Zeit kann man die freie Version noch hier downloaden: http://visuallightbox.com/visuallightbox-free-setup.zip

Hier das Beispiel der Version 5.0 (Released 15. November 2011) von “VisualLightbox.com”,
die Ihr hier downloaden könnt. Für Version 5.4 (Released 16. Januar 2013) guckt bitte hier.

Hier könnt Ihr Euch mein Tutorial-Video zum Einbau der Visual Lightbox angucken.

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.

Eichhörnchen hier mal ein Beispiel von mir, wie man einen Download selbst hinzufügen könnte
Eichhörnchen
hier mal ein Beispiel von mir,
wie man einen Download selbst hinzufügen könnte
Hibiskus gelb Hibiskus Rot Klatschmohn Margerite Peonie Sonnenhut Tulpe
 

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

 

Bitte hier für die Galerie klicken

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.

Ich habe hier 2 Funktionen eingebracht, da ich hier einmal das einzelne Thumbnail habe und auch den verlinkten Text. Jede Funktion muss ihre eigne ID erhalten.

<!-- Funktion für mein einzelnes Thumbnail mit meiner ersten ID -->
<script type="text/javascript">
function showLightBox1()
{ Lightbox.start(document.getElementById('firstImageGal1'));}
</script>

<!-- Funktion für meinen Textlink mit anderer ID -->
<script type="text/javascript">
function showLightBox2()
{ Lightbox.start(document.getElementById('firstImageGal2'));}
</script>

Zunächst habe ich mir mein Thumbnail (hier die Tulpe) ganz normal als Bild auf meiner Seite aufgezogen.
Den Code unten habe ich wieder in den “HTML-Code Editor” eines Textfeldes eingebracht.

Im Code verweise ich dann auf die ID "firstImageGal1", die ich im Head-Skript als Funktion gegründet
habe. Somit kann ich hier angeben, welches Bild zuerst in der Box erscheinen soll.

Mein Code sieht hier so aus:

Nun müsst Ihr noch diesen Code mit der Javascript-Funktion showLightBox1() dem Bild zuweisen. Dazu markiert Ihr das Thumbnail (hier die Tulpe) und fügt den Code unten in die HTML “im Tag” des Bildes ein.

> Thumbnail markieren > Fenster “Bild-Eigenschaften” > Button “HTML” > “im Tag” (ab NOF 11 “innen”)

onClick="javascript:showLightBox1()" title="Bitte hier für die Galerie klicken" style="cursor: pointer;"

... und für meinen Textlink mache ich es ganz genauso, nur verwende ich hier die andere ID, die ich im Head-Skript als Funktion gegründet habe, hier "firstImageGal2"

Nun müsst Ihr noch diesen Code mit der Javascript-Funktion showLightBox2() dem Link zuweisen. Dazu markiert Ihr den Textlink und fügt den Code unten in die HTML “im Tag” des Links ein.

> Text markieren > Fenster “Text-Eigenschaften” > Button “Link” klicken

Hier wählt Ihr bei “Linktyp” > Externen Link und wählt bei “Neuer Link” > javascript:

... dann schreibt Ihr als Befehl

void(0);

in die Eingabezeile, wie im Bild unten zu sehen.

Nun müsst Ihr noch diesen Code mit der Javascript-Funktion showLightBox2() dem Link zuweisen. Dazu klickt Ihr in dem gleichen Fenster (Link-Fenster) unten links auf den Button “HTML” und fügt den Code unten in die HTML “im Tag” (ab NOF 11 “innen”) des Links ein.

onClick="javascript:showLightBox2()" title="Bitte hier für die Galerie klicken" style="cursor: pointer;"

Damit die Thumbs nicht angezeigt werden, müsst Ihr die dazugehörige CSS-Datei etwas ändern.
Die CSS-Dateien findet Ihr im Ordner > engine > css, der jeweiligen Galerie.

Links die Original CSS-Datei meiner Galerie. Bei mir habe ich sie nur “vlightboxnone” genannt, für diejenigen, die in meinen Quellcode gucken. Dort ersetzt Ihr display:inline-block; mit display:none;
so wie rechts in der modifizierten CSS-Datei zu sehen.

#vlightbox1 {
width:733px;
zoom:1;
}
#vlightbox1 .vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:0px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#vlightbox1 .vlightbox1 a{
margin:0;
}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
text-decoration:underline;
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}

nach oben

Viel Erfolg!

zurück

 

#vlightbox1 {
width:733px;
zoom:1;
}
#vlightbox1 .vlightbox1 {
display:-moz-inline-stack;
display:none;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:0px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#vlightbox1 .vlightbox1 a{
margin:0;
}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
text-decoration:underline;
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik