Thorsten Schäfer
Content Manager, Berlin

StartseiteSoftware ›› CMS REDAXO

(jQuery)-Lightbox-Galerie für Redaxo

Wer Bilder in seine Website integriert, tut dies meist in der richtigen Größe. Manchmal ist es aber wünschenswert, ein oder mehrere Bilder als Galerie-Thumbnails verkleinert anzubieten und es dem Besucher zu ermöglichen, per Klick eine vergrößerte Detailansicht aufzurufen. Natürlich funktioniert auch in Redaxo die Variante “kleines Bild einbinden und mit großem Bild verlinken”, es geht aber auch schöner.

jQueryLightbox ermöglicht die Einbindung großer Bilder in einer verkleinerten Vorschau. Die Bilder werden automatisch nach Einbindung verkleinert und verlinkt. Durch den Lightbox-Effekt wird bei modernen Webbrowsern und eingeschaltetem JavaScript die Website mit dem Bild überlagert (wie im Beispielbild vom Anhalter Bahnhof zu sehen).

Anhalter Bahnhof, Berlin

Anhalter Bahnhof, Berlin

Bei Redaxo kann die jquerylightbox als AddOn eingebunden werden. Das erleichtert deutlich die Handhabung der JavaScript-Bibliotheken innerhalb der Templates. Allerdings braucht es spezieller Module, um die Bilder auch entsprechend mit Lightbox-Effekt einzubinden. Diese Module gibt es jedoch zum freien Download zuhauf.

Für die folgenden Bilder – die im Übrigen alle von mir gemacht wurden – wurde beispielsweise das Modul “MagazinLayout” von Andreas Eberhard verwendet…

Am Lietzensee in Berlin kann man auch mal die Ruhe genießen - oder gar Einsamkeit erfahren
Die Winter in Berlin können ganz schön kalt sein; dieser vereiste Ast hing am Lietzensee
Eine der vielen Kirchen Berlins, genauer: die Kirche auf dem Tempelhofer Feld
Der Berliner Lietzensee im Winter...
Das 'Schloss' am Berliner Lietzensee ist eigentlich ein normales Wohn-/Geschäftshaus
Berlin ist die Stadt der Schmetterlinge...
Diese Laterne steht im Lietzenseepark in Berlin-Charlottenburg

jquery als JavaScript-Bibliothek ist im Backend von Redaxo 4.2.1 fest eingebunden, um die Erstellung von AddOns zu erleichern, im Frontend ist es nicht automatisch verfügbar. Dies ändert sich mit der Einbindung der jquerylightbox.

jquerylightbox oder Lightbox mit Prototype?

Hier ist dann auch der Punkt, an dem Vorsicht geboten ist. Wer seine modernen Ajax-Anwendungen gerne mit Hilfe der Prototype-Bibliothek erstellt, sollte statt der jquerylightbox lieber das ebenfalls kostenlos downloadbare “normale” Lightbox-AddOn nutzen, das auf Prototype in Verbindung mit Scriptaculous basiert. jquery und Prototype laufen nicht konfliktfrei nebeneinander, da beide das $ zur Initialisierung verwenden.

Der Effekt und die Möglichkeiten sind dieselben. (Auch auf dieser Website wird die Prototype-Lightbox verwendet.)