Thickbox anstatt altmodische Popups verwenden

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.

Geschrieben von

Als typografischer Gestalter in der eigenen Grafikagentur erzähle ich aus meinem Agenturleben. Neue Apps welche mir den Alltag erleichtern können schaue ich mir immer wieder gerne an. Zur Entspannung geniesse ich die Zeit mit meinem Big Green Egg® und erzähle dazu gerne Grillgeschichten hier oder in der Community Green Grillers.

7 Kommentare

  1. Vielen Dank auch von mir. Kannst Du vielleicht auch noch mal erklären, wie man Thickbox mit dem Fotoalbum 1.4.3 einsetzen kann?

    Grüße,
    Uli

  2. Hallo Uli.
    Wie ich gesehen habe, hast du dich im Forum gemeldet. Schauen wir, ob wir da eine Lösung finden. Grundsätzlich setzt du die Thickbox korrekt ein, das Problem scheint an einem anderen Ort zu liegen.

  3. Hallo, sehr schöner Artickel … Danke!

    Noch eine Frage dazu, ich möchte ein anderes loadingAnimation.gif einsetzen z.B. das von LightBox. Wie und wo kann ich das einsetzten. Im *.js habe ich es schon gefunden nur wenn ich Thickbox starte kommt immer ein Schlitz (nicht lachen) wo die eigentliche loadingAnimation.gif abgeschpielt wird. Ist es den möglich das zu ändern und wie kriege ich das hin?

    Danke …

  4. Hallo Forono und alle anderen,

    interessanter Artikel! Die thickbox läuft bei mir ganz gut, ich würde gerne das unter dem Bild wenn es geöffnet ist ein downloadlink erscheint…Hast Du (Ihr) ne Ahnung wo ich da im Code ansetzen muss

  5. Sali Carsten

    Da kann ich dir leider nicht weiterhelfen. Grundsätzlich denke ich jedoch, dass dies nicht möglich ist, da der Text aus dem Title-Attribut bezogen wird, welcher widerum aus reinem Text bestehen muss.

Schreibe eine Antwort zu HolgerAntwort abbrechen

Close

Entdecke mehr von aportmann

Jetzt abonnieren, um weiterzulesen und auf das gesamte Archiv zuzugreifen.

Weiterlesen