Imagezoom ist ein weiteres MooTools Skript um Bilder mit overlay darzustellen. Dieses Skript ist ähnlich wie die jQuery Version von Highslide. Im folgenden Artikel möchte ich nun erklären wie man imagezoom in TYPOlight (Contao) einbinden kann. Ich werde außerdem noch kurz erläutern wie die Mediabox damit ersetzt wird.

Die Funktionsweise des imagezooms wird auf der Projektseite beschrieben. Diese ist ähnlich der verschiedenen lightbox Varianten.

Installation

Als erstes müssen wir uns die benötigten Dateien herunterladen (rechts oben). Wir entpacken das zip Paket und laden alle Dateien in unser TL Verzeichnis. Ich habe mir dafür in der Dateiverwaltung von TYPOlight (Contao) ein verzeichnis für js Dateien angelegt, diese sieht folgendermaßen aus:

tl_files/res/js/

Hier lege ich den kompletten imagezoom Ordner ab, dieser beinhaltet das js (imagezoom.js) ein css (imagezoom.css) und einige Bilder welche sich im images Verzeichnis befinden.

Template erstellen

Der erste Schritt ist getan. Wir müssen nun ein Template anlegen um das Script zu initialisieren. Wir wechseln im Backend auf Templates und erstellen uns dort ein neues. Als Vorlage habe ich hier die moo_mediabox.tpl ausgewählt. Diese Datei benennen wir in moo_imagezoom um (Bleistiftsymbol klicken). Dieses sieht bei mir nun folgendermaßen aus:

window.addEvent("domready", function() {
	initImageZoom();
});

Seitenlayout bearbeiten

Wir müssen nun noch 2 Dinge machen. 1. Das Template, welches wir erstellt haben einbinden und 2. den Aufruf des Scriptes in den Tag einfügen.
Wie nicht schwer zu erraten klicken wir im Backend auf Seitenlayout, dieses bearbeiten wir und scrollen zu zusätzliche Tags runter. Dort fügen wir nun den Pfad zur JavaScript Datei und CSS des imagezoomers ein.

Nun müssen wir noch das vorher erstellte Template auswählen und speichern.

Ausprobieren

Jetzt sind wir bereit für den ersten Test. Wir legen uns einen Artikel an und fügen dort mittels TinyMCE ein Bild ein. Dieses erledigen wir einfach mit dem “Bild einfügen” Button anschließend müssen wir das Bild noch verlinken, nur so können wir ein rel Attribut vergeben welches wir benötigen. Hierzu klicken wir auf das “Link Symbol” (Kette). Jetzt kommt der spanende Teil.

Bild einfügenLightbox Variante einfügen

Zuerst wählen wir die Datei die angezeigt werden soll wenn auf das Bild geklickt wird (hierzu verwende ich das Dropdown), anschließend müssen wir noch unter “Lightbox” den Wert imagezoom eintragen, im Dropdown das Feld (value) wählen und eben imagezoom eintragen.

Nun noch speichern und schon haben wir unser Bild mit imagezoom.

Generell imagezoom verwenden

Das imagezoom Skript unterstützt das rel=”lightbox” generell. Diese wird bei TYPOlight (Contao) verwendet wenn zB die Option ein “Bild hinzufügen” gewählt wird.
Wenn über den TinyMCE die Lightbox Variante gewählt wird, wird auch das rel Attribut vergeben, somit könnten wir hier dann einfach “einzelnes Element” auswählen und würden dann unseren imagezoom verwenden.

Template anpassen

Damit das möglich ist müssen wir unser vorher angefertigtes Template anpassen. Diese finden wir im TYPOlight (Contao) Backend unter Templates (moo_imagezoom). Wir berbeiten den Quelltext und fügen folgendes ein.

window.addEvent("domready", function() {
	initImageZoom({rel: 'lightbox'});
});

Ähnliche Beiträge