Achtung!

Der Webbaukasten wird nicht mehr aktiv betreut und nicht mehr weiter entwickelt. Verwenden Sie stattdessen das CMS-Angebot des RRZE.
Die Dokumentation des CMS-Angebotes finden Sie auf der Website wordpress.rrze.fau.de.

Inhalt

1. Beispiel

Beispielbild  Beispielbild

nach oben

2. 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

3. Installation

  1. Laden Sie sich zuerst die aktuellen Lightbox2-Dateien von Externer Link:  http://www.lokeshdhakar.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 werden nun folgende Zeilen eingefügt:
    <script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/js/lightbox.min.js"></script>
    <link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
    

nach oben

4. Aktivierung

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

<a href="/img/beispielbild.jpg" data-lightbox="image-1" data-title="mein Bild">Bild 1</a>

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

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

<a href="/img/beispielbild1.jpg" data-lightbox="roadtrip" data-title="erstes Bild">Bild 1</a>
<a href="/img/beispielbild2.jpg" data-lightbox="roadtrip" data-title="zweites Bild">Bild 2</a>

nach oben

5. Links

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

nach oben