In den Teilen 1 und 2 wurde schon so einiges bewältigt. Alles ist bereit für Verwendung von Bildern mit dem WYSIWYG-Editor. Für den Redakteur ist ist es nun ein Leichtes, Inhalte mit Bildern zu versehen. Widmen wir uns nun dem angestrebten Lightbox-Effekt zur Klickvergrößerung.

Diese Serie gliedert sich in vier Teile:

• Teil 1: Module auswählen, herunterladen und entpacken
• Teil 2: Module aktivieren und konfigurieren
• Teil 3: Fancybox einbinden
• Teil 4: Anleitung für Redakteure

Teile 3: Fancybox einbinden

Zunächst muss das Plugin von der Website herunter geladen werden: http://fancy.klade.lv/

Anschließend wird die Zip-Datei entpackt und das Verzeichnis "fancybox" z. B. nach sites/all/ kopiert, sodass nun das neue Verzeichnis sites/all/fancybox existiert, in dem die Javascript-, CSS- und Bilddateien der Fancybox liegen.

Im verwendeten Theme muss nun für die Einbindung der Dateien gesorgt werden. Dazu öffnet man die info-Datei des Themes, z. B. mytheme.info (z. B. in sites/all/themes/mytheme/mytheme.info) und fügt folgendes ein (den passenden Stellen):

stylesheets[all][]   = ../../fancybox/jquery.fancybox-1.2.6.css

scripts[] = ../../fancybox/jquery.fancybox-1.2.6.pack.js
scripts[] = main.js    

Die Datei main.js gibt es vermutlich noch nicht. Deshalb wird sie nun im Theme-Verzeichnis angelegt, und zwar mit folgendem Inhalt:

$(document).ready(function() {
    $("a.gross").fancybox({
            "overlayShow": true, 
            "zoomSpeedIn": 300, 
            "zoomSpeedOut": 300
    });
}); 

Als Klasse für den das Bild umschließenden Link habe ich hier "gross" gewählt, damit sich der Redakteur das leicht merken kann. Wenn du eine andere Klasse als Selektor verwenden willst, musst du diese Zeile entsprechend anpassen:

$("a.gross").fancybox({

Wenn man dem Redakteur die Vergabe einer CSS-Klasse ganz sparen möchte, kann man das javascript etwas erweitern:

$('a[href] img').each(function() {
    var linkTarget = $(this).parent().attr("href");
    var imgSrc = $(this).attr("src");
    if(linkTarget.match(/\/files\/images\/*.*/) && imgSrc.match(/\/files\/images\/*.*/))
    {
        $(this).parent().fancybox({
            "overlayShow": true,
            "zoomSpeedIn": 300,
            "zoomSpeedOut": 300
        });
    }
}); 

Jetzt werden alle Bilder, die unterhalb des Verzeichnisses /files/images/ liegen, und die in einen Link mit dem Attribut href="/files/images/..." eingeschlossen sind automatisch mit dem Fancybox-Effekt versehen.

Damit die neue .info-Datei eingelesen wird, am Besten einmal die Konfigurationsseite des aktiven Themes aufrufen (Verwalten / Strukturierung / Themes). Das wär's schon. Im Header-Bereich des HTML-Quelltextes der Website sollten die soeben eingebundenen Dateien sichtbar sein (auch, wenn man nicht als Admin eingeloggt ist, bitte überprüfen).

Nun muss der Redakteur nur noch wissen, wie er mit den neuen Werkzeugen umzugehen hat. Eine Anleitung dazu liefert der vierte und letzte Teil dieser Serie.