Beispiel

Beispielbild  Beispielbild

Inhalt

1. Einleitung

Lightbox2 ist ein einfaches Skript, das Bilder öffnet und sie über die Seite legt. Es können sowohl Einzelbilder als auch Bilder aus Sets nacheinander angezeigt werden. Gehen Sie folgendermaßen vor:

nach oben

2. Installation

  1. Laden Sie sich zuerst die aktuellen Lightbox2-Dateien von Externer Link: http://www.huddletogether.com/projects/lightbox2/#download herunter.
  2. Extrahieren Sie dann die Dateien der zip-Datei in den jeweiligen websource-Ordner, also z. B. lightbox.css nach /css/lightbox.css und effects.js nach /js/effects.js. Die Bilddateien aus der zip-Datei werden nach /img extrahiert.
  3. In die Datei /ssi/head.shtml wird nun folgende Zeilen eingefügt: 
    <script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
  4. Anschließend müssen noch die Pfade zu den Bilddateien angepasst werden. Dazu ändern Sie mit einem Texteditor in der Datei /js/lightbox.js die Zeilen 49 und 50: 
    fileLoadingImage:        'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
    um in: 
    fileLoadingImage:        '/img/loading.gif',
fileBottomNavCloseImage: '/img/closelabel.gif',
    und in der Datei /css/lightbox.css ändern Sie die Zeilen 16 und 17: 
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
    um in: 
    #prevLink:hover, #prevLink:visited:hover { background: url(/img/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/img/nextlabel.gif) right 15% no-repeat; }

nach oben

3. Aktivierung

Für die Großansicht eines Elements (Bild, Text) legen Sie

<a href="/images/beispielbild.jpg" rel="lightbox" title="mein Bild">Bild 1</a>

um den Image Tag oder um den Text. Bei „title“ kann optional eine Bildbeschreibung angegeben werden, die dann unter dem Bild erscheint.

Sollen mehrere Bilder in einem Set vereint werden, fügen Sie rel=“lightbox[roadtrip]“ in den <a>-Tag ein. Beispiel:

<a href="/images/beispielbild1.jpg" rel="lightbox[roadtrip]" title="erstes Bild">Bild 1</a>
<a href="/images/beispielbild2.jpg" rel="lightbox[roadtrip]" title="zweites Bild">Bild 2</a>

nach oben

Links

Einige weitere Beispiele sowie Benutzungshinweise finden sich auf der Seite Externer Link: http://www.huddletogether.com/projects/lightbox2.

nach oben