
Die Installation von Lytebox oder Lightbox gestaltet sich in Serendipity sehr einfach.
Im folgenden Beispiel installieren wir die Lytebox, wer dagegen Lightbox bevorzugt, wird im zweiten Teil dieses Artikels weiter unten fündig.
•
Die Lytebox installieren
• Zuerst laden wir uns die Lytebox auf der Herstellerseite herunter
http://lytebox.com und entpacken die ZIP-Datei.
• Nun legen wir im Root-Verzeichnis von Serendipity ein neues Verzeichnis
"lytebox" an und laden die entpackten Lytebox-Dateien
lytebox.css,
lytebox.js sowie den Ordner
images in dieses Verzeichnis hoch.
• Jetzt müssen die beiden css- und js-Dateien in das Serendipity-Template eingebunden werden. Dazu die index.tpl des aktuellen Templates öffnen und im <head>-Bereich folgende Zeilen einfügen (Sollte das verwendete Template keine eigene index.tpl zur Verfügung stellen, sind die Änderungen in der index.tpl des default-Templates vorzunehmen):
<link rel="stylesheet" href="/lytebox/lytebox.css" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="/lytebox/lytebox.js"></script>
• So, damit ist die Einbindung der Lytebox bereits erledigt! Als letzten Schritt muss bei den entsprechenden Bildern nur noch der Verweis zur Lytebox hinzugefügt werden:
VOR dem, von Serendipity generierten, <img>-Tag einfügen:
<a href="/uploads/GROSSES-BILD.png" class="lytebox" data-title="TITEL" target="_blank">
NACH dem <img>-Tag einfügen:
</a>
Die ganze Zeile sollte nun etwa so aussehen:
<a href="/uploads/GROSSES-BILD.png" class="lytebox" data-title="TITEL" target="_blank"><img class="serendipity_image_center" width="100" height="80" src="/uploads/bild.png" title="Titel" alt="bild.png" /></a>
Hinweis: Ich habe hier zusätzlich das Attribut
target="_blank" hinzugefügt, um das große Bild bei deaktiviertem Javascript in einem neuen Tab anzeigen zu lassen.
•
Die Lightbox installieren
• Die Installation von Lightbox ist ähnlich wie oben beschrieben: Zuerst die Lightbox von der
Herstellerseite herunterladen und die ZIP-Datei entpacken.
• Nun legen wir im Root-Verzeichnis von Serendipity ein neues Verzeichnis
"lightbox" an und laden die drei Lightbox-Ordner
css,
img und
js in dieses Verzeichnis hoch.
• Benötigt werden am Server nur folgende Dateien, alle anderen Dateien sowie der komplette Unterordner
"demopage" mit den Demo-Bildern können gelöscht werden:
• css / lightbox.css
• js / jquery-1.11.0.min.js, lightbox.min.js
• img / close.png, loading.gif, next.png, prev.png
• Jetzt müssen die css-Datei und die beiden js-Dateien in das Serendipity-Template eingebunden werden. Dazu die index.tpl des aktuellen Templates öffnen und im <head>-Bereich folgende Zeilen einfügen (Sollte das verwendete Template keine eigene index.tpl zur Verfügung stellen, sind die Änderungen in der index.tpl des default-Templates vorzunehmen):
<link rel="stylesheet" href="/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="/lightbox/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript" src="/lightbox/js/lightbox.min.js"></script>
• Damit ist die Einbindung der Lightbox bereits erledigt! Als letzten Schritt muss bei den entsprechenden Bildern nur noch der Verweis zur Lightbox hinzugefügt werden:
VOR dem, von Serendipity generierten, <img>-Tag einfügen:
<a href="/uploads/GROSSES-BILD.png" data-lightbox="BILDBEZEICHNUNG" data-title="TITEL" target="_blank">
NACH dem <img>-Tag einfügen:
</a>
Als Bildbezeichnung sollte für jedes Bild ein eindeutiger Name vergeben werden.
Die ganze Zeile sollte nun etwa so aussehen:
<a href="/uploads/GROSSES-BILD.png" data-lightbox="BILDBEZEICHNUNG" data-title="TITEL" target="_blank"><img class="serendipity_image_center" width="100" height="80" src="/uploads/bild.png" title="Titel" alt="bild.png" /></a>
Hinweis: Ich habe hier ebenfalls zusätzlich das Attribut
target="_blank" hinzugefügt, um das große Bild bei deaktiviertem Javascript in einem neuen Tab anzeigen zu lassen.