NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Visual Lightbox - Version 3.1

... hier noch eine von mir modifizierte Version mit “nur Text” als Link zu den großen Fotos.

Achtung: Diese von mir modifizierte Version läuft nicht in älteren Versionen als 8.0 vom Internet Explorer, da dort die Thumbs dennoch erscheinen.

Thanks to Visual Lightbox for your great help and support to make this possible!

Im Garten
Eichhörnchen mit Download-Link, nur Text-Link hinter dem sich alle Fotos der Galerie verstecken, große Fotos im “Dark Glass-Look”

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

Galerie Garten (8 Fotos)
Hibiskus gelb Hibiskus rot Klatschmohn Margerite Peonie Sonnenhut Tulpe
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
Lightbox2 by VisualLightBox.com v3.1

 

Direkter Einbau in NOF 11:

der Einbau dieser Variante mit einem Text-Link, hinter dem sich die gesamte Galerie “versteckt”, benötigt einen “händischen” Eingriff in den Code und eine der CSS-Dateien der Visual Lightbox, ansonsten ist alles gleich wie bei Version 3.1 beschrieben.

<!-- 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 sonst auch.

Allerdings mit folgender Besonderheit:

Wir fügen noch den Text-Link ein (hier habe ich diesen rot markiert):

<a href="javascript:Lightbox.start($('#firstImage'))">Galerie Garten (8 Fotos)</a>

... und wir müssen dem Skript noch beibringen, welches das zuerst anzuzeigende Foto der Galerie sein soll, das machen wir mit der ID “firstImage” (unten blau markiert).

<!-- Start VisualLightBox.com BODY section -->

<a href="javascript:Lightbox.start($('#firstImage'))">Galerie Garten (8 Fotos)</a>

<div id="vlightbox">

<a class="vlightbox" href="data/images/hibiskusgelb.jpg" title="Hibiskus gelb" id="firstImage"><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 -->

... damit die Thumbnails (Piktogramme) auch nicht angezeigt werden, müssen wir nun auch noch eine
CSS - Datei der “Visual Lightbox” händisch ändern. Dies ist die Datei:

vlightbox.css

die Ihr im Ordner:

/engine/css

finden werdet. Öffnet diese Datei mit Eurem Windows-Editor und dann bitte oben diesen Teil:

.vlightbox {
        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;
}

mit dem Code unten ersetzen (display:none; lässt die Thumbnails nicht mehr erscheinen):

.vlightbox {
        display:-moz-inline-stack;
         display:none;
        zoom:1;
        *display:inline;
        position:relative;
        vertical-align:top;
        margin:3px;
        width:160px;
        font-family:Trebuchet,Tahoma,Arial,sans-serif;
        font-size:11px;
        font-weight:normal;
        text-decoration:none;
        text-align:center;
        opacity:0.87;
}

... für den gleichen Effekt mit einem einzelnen Thumbnail guckt Ihr bitte hier.

nach oben

zurück

 


Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik