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.
Donnerstag, 5. Juni 2014
Serendipity - Lytebox oder Lightbox installieren
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
• Die Lightbox 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):
• 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:
Die ganze Zeile sollte nun etwa so aussehen:
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.
• 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>
<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>
<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.
• So sieht`s nun aus:
• 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:
• 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):
• 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:
Als Bildbezeichnung sollte für jedes Bild ein eindeutiger Name vergeben werden.
Die ganze Zeile sollte nun etwa so aussehen:
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.
• 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
• 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>
<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>
<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.
Trackbacks
Trackback-URL für diesen Eintrag
Keine Trackbacks
WinFuture News
