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 ein Thumb 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.

Direkter Einbau in NOF 11:

der Einbau dieser Variante mit einem Thumbnail, 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.

Im Head-Bereich fügen wir noch den hier blau markierten Code hinzu:

<!-- 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>

<script type="text/javascript">
           function showLightBox()
           {
                      Lightbox.start(document.getElementById('firstImage'));
           }
</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 das zu zeigende Thumbnail (Piktogramm) ein (hier habe ich dieses rot markiert):

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

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

<img src="data/thumbnails/eichhrnchen.png" onClick="javascript:showLightBox()" title="Bitte hier für die Galerie klicken" style="cursor: pointer;">

<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" id="firstImage"><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 Text-Link guckt Ihr bitte hier.

nach oben

zurück