PCHelp GreyboxJS

Die PCHelp Greybox ist ein simples script welches für Bild Overlays benutzt wird. Es ist einfach zu installieren und arbeitet auf allen aktuellen Browsern.

basierend auf Javascript

Beispiele

Einzelne Bilder

Image Set

Plants: image 1 0f 4 thumb
Plants: image 2 0f 4 thumb
Plants: image 3 0f 4 thumb
Plants: image 4 0f 4 thumb

Wie man es einsetzt

Part 1 - Installation

  1. Sie müssen diese drei Javascript Dateien im Header inkludieren (in dieser Reihenfolge).
    <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>
    
  2. Inkludieren Sie die Greybox CSS Datei (oder erweitern Sie Ihre bestehende).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
  3. Überprüfen Sie die CSS Datein ob sichprev.gif und next.gif an der richtigen Stelle befinden. Vergewissern Sie sich ebenfalls das loading.gif und close.gif welche am Anfang von lightbox.js stehen ebenfalls an der richtigen Stelle sind.

Part 2 - Aktivierung

  1. Fügen Sie ein rel="lightbox" Attribute an einen Link an um Light Box zu aktivieren. Zum Beispiel:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    
    Optional: Benützen Sie das title Attribut wenn Sie einen Kommentar angeben wollen.
  2. Wenn Sie eine Menge zusammenhängender Bilder gruppieren möchten gehen Sie genau so wie in Schritt 1 vor, allerdings können Sie zusätzlich einen Gruppennamen im rel Attribut in eckigen Klammern angeben. Zum Beispiel:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    
    Es gibt keine Limitierung der Anzahl der Bilder welche gruppiert werden können.