Darstellung von Bildern in Rails-Applikation mit ThickBox

Die Darstellung von Bildern, die per Mausklick auf eine Miniaturform (Thumbnail) vergrößert dargestellt werden, ist auf Websites üblich. Um dies möglichst schön (d.h. ohne Seitenwechsel und ohne Browser-Popup) zu lösen, gibt es verschiedene JavaScript-Tools (z.B. Lightbox oder das mit Effekten überladene Lightbox2), die den Hintergrund abdunkeln und das vergrößerte Bild im Vordergrund darstellen.

Für eine Rails-Applikation suchte ich eine einfach einzubindende Möglichkeit der Bilddarstellung. Erste Anlaufstelle war das Plugin RedBox. Dieses stellt eine Portierung der Lightbox-Idee auf Basis der JavaScript-Bibliothek Prototype dar, was prinzipiell eine gute Idee ist, da Prototype der Kern der AJAX-Funktionalität von Rails ist und man somit keine zusätzliche Bibliothek einbinden muss. RedBox hat aus meiner Sicht jedoch ein paar ärgerliche Nachteile:

• Es ist zusätzliches Markup notwendig, da man versteckte HTML-Elemente einrichten muss. Es gibt zwar Helper-Methoden, die das übernehmen, dafür aber ein valides Markup erschweren (es wird ein div-tag erzeugt, das ja nicht überall im DOM erlaubt ist).
• Das Einblenden der Bilder erscheint mir zu langsam und es flackert ein wenig (auch in aktuellen Browsern).
• Ein eingeblendetes Bild lässt sich durch Scrolling der Seite aus dem sichtbaren Bereich heraus verschieben, was unschön ist.
• RedBox hat mit der aktuellen Prototype-Version 1.5.1 Schwierigkeiten in Form eines StackOverflowErrors, mit Version 1.5.0 klappt es hingegen.

Es ist durchaus möglich, dass einige dieser Probleme mit etwas mehr Initiative meinerseits hätten bereinigt werden können. Ich bin dann aber über die Alternative ThickBox 3 gestolpert, die obige Nachteile nicht hat und außerdem zusätzliche Features enthält: Man kommt ohne zusätzliches Markup aus, kann mehrere Bilder zu Serien zusammenfassen und einiges mehr. In den Beispielen wird dies schön demonstriert.

Allerdings: “ThickBox” basiert auf der JavaScript-Bibliothek jQuery, die zusätzlich eingebunden werden muss (in komprimierter Form sind das 20kb). jQuery verursacht jedoch ein Problem in Rails-Anwendungen: Es gibt eine Unverträglichkeit mit Prototype, da beide Bibliotheken Funktionsaufrufe mittels “$()” abwickeln. Nach dem Einbinden von jQuery geht also die sonstige AJAX-Funktionalität der Rails-Anwendung verloren. Aber es gibt eine Lösung dafür:

1) Shortcut von jQuery abschalten

In jQuery kann man den Shortcut “$()” deaktivieren, so dass man stattdessen die Aufrufe mit der Langform “jQuery()” erledigt. Hierzu ist nach dem Einbinden von jQuery folgendes JavaScript-Statement abzusetzen:

jQuery.noConflict();

2) jQuery-Aufrufe von ThickBox anpassen

Damit ThickBox auch ohne den Shortcut funktioniert, müssen dort überall die “$()”-Aufrufe durch “jQuery()”-Aufrufe ersetzt werden. Ein einfacher Suchen-Ersetzen-Durchlauf durch thickbox.js genügt. Dies ist natürlich jedesmal notwendig, wenn man zukünftig ein Update von ThickBox einbindet. Den veränderten Code kann man anschließend mit einem JavaScript-Packer selbst komprimieren.

Voilá, ThickBox funktioniert nun tadellos auch in einer Rails-Anwendung.

Nebenbei: Es gibt Bestrebungen, jQuery und Rails grundsätzlich besser zusammen zu bringen: Einerseits entsteht zur Zeit das Rails-Plugin jQuery on Rails, andererseits gibt es auch Möglichkeiten, ohne zusätzliches Plugin auszukommen, wenn man ein paar Dinge beachtet.