|
Ich find das ja so cool bei einigen Webseiten,
wie z.b. auf www.nikon-fotos.de
oder auch im blog von Peter Eich (www.petereich.de).
Es öffnet sich bei klick auf ein kleines Foto
ein großes Foto.
| Beispiel (ohne Navigation: |
 |
Ja, is klar, das is nix besonderes, aber durch
das Javascript "Lightbox" sieht das alles
noch um einiges schöner aus und man kann auch
darin navigieren.
| Beispiel (mit Navigation: |
 |
 |
Ganz einfach, einige html-Kenntnisse vorausgesetzt:
 |
Download unter http://www.huddletogether.com/projects/lightbox2/
|
|
dann wird untenstehender Code in den Head
der html-Seite eingesetzt
<script
type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript"
src="js/lightbox.js"></script> |
|
|
und ein Link zum Lightbox-CSS
gesetzt oder aber in das vorhandene CSS eingebaut
| <link
rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen"
/> |
|
|
Nun muss noch das CSS überprüft
werden, d.h. die Bilder "prev.gif"
und "next.gif" sollten im richtigen
Ordner liegen. Ebenso sollte die "lightbox.js"
auf den Bilderpfad angepasst werden. |
|
Das Script wird aktiviert durch den tag rel="lightbox",
der jedem Bild hinzugefügt werden muss,
welches mit "Lightbox" geöffnet
werden soll. Zum Beispiel:
| <a
href="images/image-1.jpg" rel="lightbox"
title="Bildbeschreibung">
testbild.jpg</a> |
|
|
Möchte man mehrere Fotos a la Bildergalerie
mit dem "next" Button darstellen,
weist man den Bildergalerie-Fotos eine Gruppe
zu. Man kann so viele Gruppen erstellen, wie
man möchte!
Zum Beispiel:
<a
href="images/image-1.jpg" rel="lightbox[makro]">testbild1.jpg</a>
<a href="images/image-2.jpg"
rel="lightbox[makro]">testbild2.jpg</a>
<a href="images/image-3.jpg"
rel="lightbox[makro]">testbild3.jpg</a> |
|
Das war eine kleine Übersetzung der in englisch
vorliegenden Original-Version. Und hier eine kleine
Bildergalerie auf meiner Seite, umgesetzt mit "Lightbox"
Makroaufnahmen
in meinem Garten im Mai 2007
|
