Bilder in einem neuen Browserfenstern (Popup) vergrössert darzustellen ist Schule von gestern. Heutzutage wird dies schicker und vor allem barrierefrei gelöst.

Um kleine Vorschaubilder bei Mausklick ansehnlich im Grossformat zu präsentieren, gibt es inzwischen viele verschiedene Lösungen. In der folgenden Anleitung wird Thickbox in ein bestehendes Sefrengo-Template integriert.

Arbeitsweise

Sefrengo bietet die Möglichkeit, Javascript- und CSS-Dateien mit Hilfe des Systems zu verwalten. Da das CSS-System veraltet ist und die Dateibearbeitung nicht sonderlich intuitiv ist, werden im nachfolgenden Beispiel sämtliche Dateien «hart» im Layout eingebunden. Somit findet die Dateiverwaltung über einen FTP-Clien statt.

Dateien beschaffen und hochladen

Als Erstes müssen die benötigten Dateien von der Thickbox-Website bezogen werden. Es ist anzuraten, sowohl von jQuery wie auch von Thickbox die komprimierte Variante zu verwenden, um nicht unnötige Ressourcen zu verschenken.

Folgende Dateien werden für die nächsten Schritte benötigt:

• jquery-latest.pack.js
• thickbox-compressed.js
• thickbox.css
• loadingAnimation.gif
• macFFBgHack.png

Als nächstes müssen die Dateien auf den FTP geladen werden. Folgende Ablage ist zu empfehlen:

• jquery-latest.pack.js und thickbox-compressed.js nach projekt/cms/js
  thickbox.css nach projekt/cms/css
  loadingAnimation.gif und macFFBgHack.png nach projekt/cms/img

Dateien anpassen und einbinden

An den bestehenden Dateien müssen noch zwei Pfadangaben angepasst werden. In der Datei projekt/cms/js/thickbox-compressed.js muss in Zeile 8 der Pfad zu der Grafik, welche während dem Laden des Bildes angezeigt wird, angepasst werden. Im vorliegenden Fall ist var tb_pathToImage = "cms/img/loadingAnimation.gif"; die korrekte Pfadangabe.
Ebenso benötigt die Datei projekt/cms/css/thickbox.css eine kleine Änderung. In Zeile 37 muss der Pfad für das Bild «macFFBgHack.png» in url(../img/macFFBgHack.png) geändert werden. Gleichzeitig kann in der Klasse .TB_overlayBG die Farbe für den Abblendeeffekt festgelegt werden.

Nun sind die nötigen Anpassungen erledigt und die Dateien können im Sefrengo-Backend unter dem Bereich «Layout» eingebunden werden. Wird die Thickbox nur auf wenigen Seiten der Website verwendet, lohnt sich der Einsatz des Plugins Add Headerelement in Zusammenarbeit mit dem Modul ChangeHeader. Mit dieser Kombination können die benötigten Dateien nur auf denjenigen Seiten eingebunden werden, auf welchen sie auch wirklich benötigt werden.

Wird die Thickbox durch die ganze Website verwendet, so bindet man die benötigten Dateien fest im Layout ein. Zu beachten sind die Pfadangaben sowie die Reihenfolge der Javascript-Dateien.

<link rel="stylesheet" href="cms/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="cms/js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="cms/js/thickbox-compressed.js"></script>

Thickbox verwenden

Nun sind sämtliche Vorbereitungen abgeschlossen und die Thickbox kann verwendet werden. Grundsätzlich geschieht dies über die Ergänzung der Klasse «Thickbox» bei einem beliebigen Link, welcher ein «grosses Bild» als Ziel hat.

In Contentflex könnte ein Template wie folgt aussehen:

<a class="thickbox" href="{imageurl:1}">{imagethumb:1}</a>

Die Thickbox kann auch mittels WYSIWYG-Editor verwendet werden. Das nachfolgende Beispiel geht von dem Editor TinyMCE aus, welcher sich mit dem TinyMCE4SF-Hack in Sefrengo integrieren lässt. Mit dem Standard-Editor FCKeditor dürfte der Weg ähnlich sein.

• Vorschaubild über «Bild einfügen» im WYSIWYG-Editor auswählen und einfügen
• Vorschaubild markieren und das Symbol «Link einfügen/bearbeiten» wählen
• Grossansicht auswählen, öffnen und unter dem Reiter «Erweitert» im Feld Klassen «Thickbox» eintragen

Um die Klasse nicht immer manuell eintragen zu müssen, gibt es im TinyMCE-Verzeichnis die Datei tinymce4sf_content_overwrite.css. Hier kann eine leere Klassen (.thickbox {}) angelegt werden, welche danach im Editor zur Verfügung steht. Voraussetzung dafür ist jedoch, dass in der Konfigurationsdatei tinymce4sf_config.php die Funktion $TinyMCE4SFconfig['DisableSFCSSclasses'] in Zeile 34 auf true gesetzt ist.