Lightbox mit TinyMCE

Einleitung

Ziel dieses Tutorials ist das einfache Einfügen von Bildern mit dem TinyMCE -Editor, die in einer Lightbox vergrößert dargestellt werden. Dieses Tutorial arbeitet mit der Slimbox die ein wenig schlanker ist als die original Lightbox oder die LightboxV2. Die Ladezeiten sind kürzer, was dem Besucher eurer Seite zu gute kommt. Die Integration der Lightbox in den TinyMCE übernimmt das Plugin directResize.

Wie ist die Funktion im Prinzip aufgebaut?

Das Slimboxscript schaut im HTML-Code nach Links in denen das Wort "lightbox" vorkommt. Beispiel ich habe ein Vorschaubild das als Link ausgeführt ist:

<a href="großes Bild"><img src="Vorschaubild"></a>

Bei dieser Schreibweise passiert noch gar nichts, die Slimbox wird nicht ausgeführt sondern nur das großes Bild angezeigt. Damit die Slimbox funktioniert muss im Link rel="lightbox" stehen, so dass die Slimbox ausgeführt und der Link letztendlich so aussieht.

<a rel="lightbox" href="großes Bild"><img src="Vorschaubild"></a>

So ein Linkbild im TinyMCE zu erstellen ist kein Problem. Man lädt sich einfach die beiden Bilder hoch und konstruiert sich einen Link. Allerdings muss man danach in den HTML Modus wechseln und rel="lightbox" per Hand einfügen. Außerdem muss vor dem Hochladen ein Vorschaubild erstellt werden. Hier kommt das directResize Tool zum Zug. Es sorgt dafür, dass das kleine Bild automatisch erstellt wird und rel="lightbox" in den Quellcode hinzugefügt wird.

Installation der Slimbox

Ladet euch hier die Slimbox 1.31 herunter. Die Slimbox in der aktuellen Version erhält man auf http://www.digitalia.be/software/slimbox. Für die aktuelle Slimbox 1.41 werden jedoch die MooTools v1.11 benötigt. In MODx 0.96 sind aber nur die MooTools v1.00 integriert. MooTools v1.11 können im Augenblick nicht ohne weiteres in MODx integriert wird, da sonst Komplikationen mit der MaxiGallery und QuickEdit entstehen.

Weiter geht's. In deiner MODx-Installation unter assets einen neuen Ordner anlegen z.B. repository/slimbox. Die entpackten Ordner css und js aus dem Slimbox-Archiv dort hinein kopieren. In den Headerbereich eures Templates folgende Zeilen hinzufügen:

<script type="text/javascript" src="manager/media/script/mootools/js/mootools.js"></script>
<script type="text/javascript" src="assets/repository/slimbox/js/slimbox.js"></script>

Außerdem wenn gewünscht die mitgelieferte CSS-Datei mit einbinden

<link rel="stylesheet" href="assets/repository/slimbox/css/slimbox.css" type="text/css" media="screen" />

Konfiguration Slimbox

An der Slimbox müssen weiter keine Einstellungen mehr vorgenommen werden. Eventuell den Parameter resizeDuration in der slimbox.js in Zeile 11 könnte dem eigenen Geschmack anpassen und die Übersetzungen von Bild 2 von x in Zeile 144. Über die slimbox.css lässt sich das Aussehen anpassen.

Installation von directResize

Als nächstes ladet ihr euch unter http://netambition.dynalias.org/dr/ Telechargements.html den directResize von alphanono herunter. Die Installationsanleitung der Homepage ist auf französisch deswegen das Wichtigste noch einmal auf Deutsch.

Legt euch einen Ordner z.B. directresize unter assets/plugins an. Dort hinein ladet ihr die Dateien aus dem directResize-Archiv. Den Inhalt von directResize.plugin.php in eine neues Plugin kopieren und nicht vergessen am Anfang das "<?php" und am Ende "?>" entfernen. Unter Systemereignisse noch einen Haken bei OnWebPagePrerender machen damit das Plugin beim Vorrändern geladen und ausgeführt wird.

Konfiguration von directResize

In dem Plugin directResize lassen sich einige Parameter editieren. Hier werden nur die Wichtigsten angeführt, die für die Funktion innerhalb dieses Tutorials wichtig sind. Die Konfiguration findet im Editorfenster des Plugins statt.

Parameter Beschreibung

Parameter	Beschreibung
$path	Gibt den Pfad zum Cache an, in dem dann die Thumbs erzeugt werden. Dieser Ordner muss existieren und Schreibrechte für den Webserver haben. Standard: assets/images/cache
$lien_base	Ist der Ordner inkl. Unterordner in dem sich die Bilder befinden, auf die die Lightbox angewendet werden darf. Die Angabe dieses Ordners ist wichtig, damit nicht auch Hintergrundbilder in der Lightbox dargestellt werden wenn bei $lightbox Option 2 gewählt wurde. Standard: assets/images
$lien_plugin	Gibt den Pfad zu der Plugindatei directResize.php an.
$lightbox	Legt fest, auf welche Weise die Lightbox aktiviert werden soll 0 Keine Aktivität 1 Lightbox wird dann ausgeführt, wenn zwischen den <img> Tags "lightbox" steht. Das können alle Bilder sein, die sich im Ordner bzw. Unterordner befinden, der unter $lien_base angegeben wurde. 2 Alle Bilder, die sich im Ordner inkl. Unterordner befinden, der unter $lien_base definiert wurde, werden in der Lightbox dargestellt.
$lightbox_w	Maximale Breite der gezoomten Bilder
$lightbox_h	Maximale Höhe der gezoomten Bilder
$lightbox_g	Gibt an ob das Gruppieren von Bildern, die sich auf einer Seite befinden aktiviert werden soll oder nicht. 0 nicht Aktiviert 1 Aktiviert

Anwendung

Für die Verwendung der Lightbox im TinyMCE wird immer die Option $lightbox="1" verwendet. Die anderen Optionen können benutzt werden, wenn directResize als Galerie eingesetzt wird. Damit nun zwischen den <img> Tags ein "lightbox" erscheint und die Lightbox funktioniert, muss eine Einstellung im Manager vorgenommen werden.

Beim Reiter Werkzeuge wird Benutzeroberfläche gewählt. Dort steht am Seitenende die Option CSS-Selektoren. Dort wird ZoomImage=lightbox; eingetragen. ZoomImage kann auch anders benannt werden, es ist nur der Name für eine CSS-Klasse (class="lightbox"), die zwischen den <img> Tags erscheint. Zum testen jetzt einmal irgendwo ein Bild mit dem TinyMCE einfügen. Im Fenster zum Einfügen des Bildes unter dem Reiter Erscheinungsbild die CSS-Klasse ZoomImage auswählen. Diese wird nun bei jedem Bild ausgewählt, bei dem eine Lightbox gewünscht ist. Die Größe des kleinen Bildes stellt man über Größe ein. In dieser Größe wird dann auch ein kleines Bild im Ordner $path gespeichert.

Login