Andi Portmann – Web, Print, iPhone

2. Februar 2009, 7 Kommentar(e)

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.

Tweet

Schlagwörter: jquery, popup, sefrengo, thickbox

Verwandte Artikel: Keyword- und Description-Meta nachträglich anpassen, Die Finale 1.4.1 erschienen, Vorabversion von Version 1.4.1 verfügbar, Benutzername in einer neuen Installation, Dateirechte für Ordner einstellen

Zurück zum Seitenanfang

Vergrösserungen von Vorschaubildern lassen sich in Sefrengo einfach realisieren mit jQuery und Thickbox.

RSS Abonnemente

• Kompletter Feed
• Appotheke Feed
• Kommentar-Feed

Suche

Gezwitscher

• jede rappe zählt ... auch bei adrian stern #plagiat #cover #inspiration #titelsong 9. Februar 2012
• sachen gibts die gibts nicht. ein monat nach garantieablauf knistert eine der audioengine 5-boxen 8. Februar 2012
• @siorpaesas danke :) 8. Februar 2012
• @siorpaesas gleich mal aufschreiben. balmorhea habe ich auch paar alben 8. Februar 2012
• @siorpaesas dann hätte ich noch max richter ... sonst noch ein tipp in diese richtung? 8. Februar 2012
• @fossil12 @slith76 @path also mich haben sie gnadenlos ignoriert, als ich sie wegen löschen ungeschrieben habe 8. Februar 2012
• @siorpaesas du bist auch der erste, welcher nils frahm in meinem umfeld nennt. er ist genial, wenn auch nicht so genial wie olafur arnalds 8. Februar 2012
• sicherheitscode ab streichliste für e-banking: fuqk ein zeichen? 8. Februar 2012
• was soll die verarsche. da steht, dass trine chf 1.00 kostet zurzeit, und dann das. http://t.co/1Eu2cf7r 8. Februar 2012
• Unboxing 2.0: Out of the Box http://t.co/nlnh2w7U 8. Februar 2012

Folge «aportmann» auf Twitter