Lytebox Flash-Galerie-Beispiel - schließen über den Schließen-Button möglich und über den Hintergrund

Hier die modifizierte Version der Lytebox-Konfiguration zum Schließen nur über den Button.
Hier die von “Panda” modifizierte Version der “lytebox.js” Datei ohne Rahmen des Frames.

Für das Tutorial dieser Lytebox guckte bitte hier und auf der Seite "Panda". Weitere Beispiele, wie auch Lyteframe, unten oder auch eine Galerie hinter einzelnen Thumbs oder einem “Pseudo-Hotspot”.

• ... oder auch ein einzelnes Foto hinter diesem Text-Link

• Oder auch mit der “Lyteframe” Variante zu anderen Seiten
  
  ... z.B. zu einer externen Seite wie: Wikipedia
  
  ... oder z.B. zu einer internen Seite wie meinem Kontakt-Formular

Für das “Lyteframe-Fenster” schreibt Ihr in die Objekt-HTML “In dem Link”

anstelle von...

rel="lytebox" title="Dein Titel hier"

... eben nur “lyteframe” und die Breite und Höhe vom Fenster eingeben:

rel="lyteframe" title="Dein Titel hier" rev="width: 600px; height: 500px; scrolling: auto;"

• ... oder auch ein einzelnes Foto, hinter dem sich weitere Fotos verbergen
      das letzte Foto “Eichhörnchen”, im Beispiel unten, kann man auch downloaden. Erklärung dafür hier

Im Beispiel oben verlinkt Ihr das 1. Foto (hier “garten001.jpg”) ganz normal mittels “Datei-Link”. Dann klickt Ihr in diesem Fenster “Link” unten auf den Button “HTML”.
Achtet darauf, dass der ['Guppenname'] hier ['garten'] immer gleich sein muss. Wollt Ihr einzelne Bilder darstellen, lasst Ihr den ['Guppennamen'] einfach weg.

In die “Objekt-HTML” von diesem Link gehört dann:

“In dem Link” (NOF 11 “innen”)

rel="lytebox['garten']" title="Peonie<br><br>klicke unten auf &#8220;weiter&#8221; oder &#8220;zurück&#8221; um fortzufahren<br>... oder verwende die Richtungspfeile<br>oder auch das -n- oder -p- der Tastatur<br><br>"

“Nach dem Link” (NOF 11 “nachher”)

<a href="../assets/images/lytebox/garten/garten002.jpg" rel="lytebox['garten']" title="Tulpe"></a>

<a href="../assets/images/lytebox/garten/garten003.jpg" rel="lytebox['garten']" title="Rhododendron und Goldregen"></a>

<a href="../assets/images/lytebox/garten/garten004.jpg" rel="lytebox['garten']" title="Sonnenhut"></a>

<a href="../assets/images/lytebox/garten/garten005.jpg" rel="lytebox['garten']" title="Margerite"></a>

<a href="../assets/images/lytebox/garten/garten006.jpg" rel="lytebox['garten']" title="Hibiskus"></a>

<a href="../assets/images/lytebox/garten/garten007.jpg" rel="lytebox['garten']" title="Sternmagnolie"></a>

<a href="../assets/images/lytebox/garten/garten008.jpg" rel="lytebox['garten']" title="Klatschmohn"></a>

<a href="../assets/images/lytebox/garten/garten009.jpg" rel="lytebox['garten']" title="Hibiskus"></a>

<a href="../assets/images/lytebox/garten/garten010.jpg" rel="lytebox['garten']" title="unser Eichhörnchen &#8220;Erwin&#8221;"></a>

Wollt Ihr, anstatt manuell zu blättern, lieber eine Dia-Show, dann ersetzt Ihr ...

rel="lytebox['garten']"

... an allen Stellen mit:

rel="lyteshow['garten']"

... für einzelne Fotos lasst Ihr den Gruppennamen einfach weg:

rel="lytebox"

Bemerkung: Die HTML Zeichencodierung &#8220; und &#8221; stellt Anführungsstriche dar.

Bemerkung zum Hotspot:

Da die Lytebox eine “Link-HTML” benötigt um das “rel” Attribut zu den Lytebox-Skripten zu setzen und ein “Hotspot” keine “Link-HTML” besitzt, habe ich mir hier folgendermaßen beholfen.

Ich habe einen extra “Layout-Bereich” aufgezogen, den ich auf “Festes-Seiten-Layout” gestellt habe, um zwei Bilder übereinander platzieren zu können. Dann habe ich mir ein kleines .gif-Bild erstellt, das lediglich ein tranparentes Rechteck ist und über dem Kopf der Katze platziert und dann dieses transparente .gif wieder “ganz normal” mit dem “rel” Attribut der Lytebox versehen und dem großen Foto verlinkt, wobei ich hier mal eine Formatvorlage erstellt habe, die bei “Mausüber” einen gepunkteten Rahmen um das transparente .gif legt. Das sieht dann inklusive dem “rel” Attribut so aus:

onMouseover="this.className='dottedFrame'" onMouseout="this.className='normalFrame'" rel="lytebox" title="Hotspot-Link in Lytebox öffnen"

nach oben

... und hier ein weiteres Beispiel, die Visual Lightbox, die ein kleines Programm ist und Euch (fast) die gesamte Arbeit abnimmt.


... wie Ihr die Erscheinung der Lytebox individueller gestalten könnt beschreibt Strunz hier.

Weitere Beispiele und andere Varianten findet Ihr hier

ACHTUNG:

Beachtet bitte notwendige Änderungen der CSS-Datei der Lytebox, wenn Ihr einen anderen DOCTYPE als

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

verwendet, da es sonst im Internet Explorer 8.0 zu einer falschen Darstellung kommen kann.

Bitte guckt Euch auch die neue Lytebox-Version hier an und eine eigene Komponente für NOF
SwissKnife for NOF,  Lytebox 3.22

zurück