ModX Tutorial

Changing the net, one site at a time…

Lightbox integrieren
www-iconseitenende-iconachtung-icon
   
1. Lightbox Downloaden und entpacken
   
Auf der Homepage von "lightbox" die Download Option wählen und die ZIP-Datei auf dem Rechner laden.
 lightbox-01
   
Das Paket enthält vier Dateien: die Ordner css, images und js sowie eine Index.html. Die Index.html erläutert die Installation, der wir - angepasst auf ModX - folgen werden.
   
2. Ordner lightbox auf den Server laden

   
Als erstes laden wir den gesamten Ordner Lightbox in das Verzeichnis, das die .css und .js Dateien enthält, die unser Template stylen.

In unserem Falle heißt der Ordner rw_common, in ihm befindet sich der Ordner themes, der wiederum das Thema arrange beinhaltet, das die oben genannten Dateien bereit stellt.
lightbox-02
 top-icon  
3. .JS-Dateien in den Template-Header einfügen
   

Der Anleitung der Lightbox folgend, kopiert man nun die folgenden drei JavaScript Befehlszeilen in den Header des Templates, das die Seite stylt.

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

Im Screenshot zu sehen sind die drei Befehlszeilen, die auskommentiert sind.

Die drei Befehlszeilen könnten aber auch auf der Seite, die die Lightbox enthalten soll, mittels eines HeaderInclude TV (< Tutorial) eingefügt werden, so dass im Code des Headers dann nur noch der Call für dieses TV auftaucht.

lightbox-03
   
4. Link zum Stylesheeet einfügen / anpassen
   

achtung-iconUnter den frei JS-Befehlen im Head  muss nun der Pfad zum Stylesheet für die Lightbox individuell angepasst werden. Wie Im Screenshot oben zu sehen, muss der Pfad zum Stylesheet lightbox.css der Ordnerstruktur nach wie folgt lauten:

 <link rel="stylesheet" href="rw_common/themes/arrange/lightbox/css/lightbox.css" type="text/css" media="screen" />

   
5. Image-Tvs erstellen 
   
Um die Bilder für die Lightbox auf der Seite selbst einfügen zu können, erzeugen wir ein Image TVs (< Tutorial). Wir werden hier so viele TVs erzeugen, wie wir Bilder in die Lightbox laden wollen.
lightbox-04
Für diese Image -TVs erzeugen wir im nächsten Schritt ein Snippet, das diese parst.
lightbox-05
 top-icon  
6. Button erzeugen, der die Lightbox aufruft
   
slideshow-icon Um die Lightbox aufzurufen und um nicht den Aufruf händisch einbetten zu müssen, erzeugen wir einen Button und nennen ihn slide_show.png.
   

Der Button namens slide_show.png, den das Snippet aufruft, und der über einen Chunk Call aktiviert wird, liegt im Ordner images, der im Ordner assets liegt, welcher wiederum im Rootverzeichnis von Modx liegt.

Schaut man sich den Screenshot rechts an, so ergibt sich unten stehender Dateipfad für die img src des Snippets:
lightbox-011
   
<img src=\"assets/images/00-buttons/slide_show.png\"
   
7. Snippet erstellen lightboxGen

   
Zum Erstellen des Snippets navigieren wir zu Elemente > Elemente Verwaltung > Snippet und wählen die Option Neues Snippet.
lightbox-08
   
Dieses Snippet nennen wir lightboxGen (oder wählen einen anderen sinnvollen Namen).
lightbox-09
   

Wir kopieren nun den Code des Snippets (unten im Downloadbereich) setzen es in den Snippet-Code Bereich ein  und sichern es. Dieses ruft unsere Image TVs auf und gibt sie in der Lghtbox aus.  Doch unser Snippet ist noch cleverer, es importiert auch eine Grafik, die den Output der Lightbox aktiviert. Der Dateipfad ergibt sich aus dem jeweiligen Speicherort des Buttons slide_show.png.

lightbox-010
 top-icon  
8. Chunk lightboxOutput erstellen
   
Zur Ausgabe der Bilder erstellen wir einen Chunk namens lighboxOutput. Dieser ruft das Snippet lightboxGen auf, welches wiederum die Bilder parst.
   
Der rechts stehende Code addresssiert die Bilder, die wir in unsere Lightbox einfügen wollen. Um mehr als sechs Bilder - wie hier im Beispiel zu sehen - zu erzeugen, muss man dem Chunk lediglich weitere Befehlszeilen hinzufügen und die dazugehörigen Images TVs erstellen. lightbox-07
   

[ [lightboxGen?&imgid=`img6` &id=``]]

Der Chunk hat zwei Argumente:

lightboxGen?&imgid=`img6` ruft das Snippet und die Image ID6 auf.

id=`
ruft über den Platzhalter [ +id+] die Seite auf, auf der sich die TV, die es erzeugt, befindet.

   
9. Chunk-Call in Ressource einsetzen
   
   Zum Schluss noch den Call { {} } an einer beliebigen Stelle, an der die Lightbox auf der Seite erscheinen soll, in den Content-Bereich einer Ressource einsetzen und schon funzts!
   
  
   
download-iconCode für den Header-Include
download-iconCode dür das Snippet (Pfad zum Button "slide_show.png" anpassen!!!)
download-icon Code für den Chunk

 

 

top-icon