Lightbox Beispiele (mit HTML-Code)

Um ein Bild oder HTML-Dokument in einer Lightbox zu öffnen, muss beim betreffenden "<a>" Tag  (Link) dem Attribut "rel" der Wert "lightbox" (rel="lightbox") zugwiesen werden. Ausserdem muss das Attribut "href" mit der (relativen) Adresse des Bildes versehen werden (href="Bilder/MeinBild.jpg"). Optional kann noch das Attribut "title" verwendet werden, um einen Text zu hinterlegen, der dann in der Lightbox unterhalb des Bildes angezeigt wird. Nachfolgend zwei Beispiele, das macht es einfacher :-).

 

Beispiel 1
Mit einem Klick auf ein kleines Bild wird  ein grosses Bild in der Lightbox geöffnet.
HTML-Code
<a rel="lightbox[gaga]" title="Schöne Blumen" href="img/lightbox/1-gross.jpg"><img src="img/lightbox/1-klein.jpg" border="0" /></a>
Beispiel 2
Mit einem Klick auf einen Text wird ein Bild in der Lightbox geöffnet.
Zum Frühstück gibt es ein Toastbrot, eine Banane und ein Glas Orangensaft. En Guete! HTML-Code
Zum <a rel="lightbox" title="Frühstück" href="img/lightbox/2-gross.jpg">Frühstück</a> gibt es ein Toastbrot, eine Banane und ein Glas Orangensaft. En Guete!


Beispiel 3
Dieses Beispiel zeigt eine Gruppierung von Bildern indem rel="lightbox2"; verwendet wird. Es können bis zu 6 Gruppierungen pro html-Dokument gemacht werden:
  • rel="lightbox"
  • rel="lightbox2"
  • rel="lightbox3"
  • rel="lightbox4"
  • rel="lightbox5"
  • rel="lightbox6"
Gruppiertes Foto 1

Gruppiertes Foto 2

Gruppiertes Foto 3
HTML-Code
<a rel="lightbox2" title="Ich und mein Grossvater" href="img/lightbox/3-gross.jpg"> Gruppiertes Foto 1</a> <br /> <br /> <a rel="lightbox2" title="Ich als Kind am Fluss" href="img/lightbox/4-gross.jpg"> Gruppiertes Foto 2</a> <br /> <br /> <a rel="lightbox2" title="Ich als Erwachsener beim angeln" href="img/lightbox/5-gross.jpg"> Gruppiertes Foto 3</a>
Beispiel 4
Wieder eine Gruppierung (dieses Mal mit  rel="lightbox3").
Nur ein einziger Text-Link  aber drei Fotos, die in der Lightbox durchgeklickt werden können. Lösung: zwei Bilder verlinken ohne einen Text anzugeben. 
Fotogalerie mit Tieren HTML-Code
<a rel="lightbox3" title="Tiger" href="img/lightbox/6-gross.jpg">Fotogalerie mit Tieren</a> <a rel="lightbox3" title="Pferd" href="img/lightbox/7-gross.jpg"></a> <a rel="lightbox3" title="Wal" href="img/lightbox/8-gross.jpg"></a>