Magento – Gute Lightbox / Light Box Vergleich

Eine Lightbox ist bei Bilddarstellung schon mehr oder weniger ein MUSS (Erweiterung zu diesem Artikel). Auch im eigenen Onlineshop soll die Bilddarstellung nicht aussehen wie aus Zeiten von Windows 3.11 und somit muss die Standardanzeige bei Magento weg und gegen eine gute Lightbox getauscht werden. Hier gibt es aber mittlerweile eine größere Auswahl und somit haben wir drei über Magento Connect gratis zu beziehende Lightboxen getestet und wollen hier kurz darüber berichten.

Getestet wurde jeweils unter Magento 1.4.1.0:

1. Die “IG LightBox” von IDEALIAGroup (für Magento 1.3-1.4.2)
2. “Magento Easy Lightbox” von TemplatesMaster (für Magento 1.4)
3. Die Lightbox “jQuery Lightboxes (FancyBox, PiroBox etc.)” von MagePsycho (für Magento 1.3-1.5.)

Standardmäßig sieht es bei Magento so aus:

1. Zu der IG Lightbox lässt sich sagen, dass sie -wie auch die anderen beiden Extensions- schnell und unkompliziert über Magento Connect zu installieren sind.
Unter System > Konfiguration wird ein neuer Eintrag erstellt, bei dem man die Lightbox einfach steuern kann.
Hier kann die Lightbox für jeden Storeview aktiviert oder deaktiviert werden, die Größe der Popups etc. frei definiert werden.
Auch die Effekte wie Fade-In und Fade-Out sind steuerbar.
Eine weiterhin sehr sinnvolle Einstellmöglichkeit besteht in der Farbwahl des Hintergrundes und der anderen Elemente. Hier kann also an die eigene Seite viel angepasst werden.

Im Frontend wird durch die Lightbox ein Popup Effekt erstellt, so dass das angeklickte Bild vergrößert und der Hintergrund mit einer (einstellbar) transparenten Farbe “verdeckt” wird. Auf Klick kann wird das Bild dann wieder klein oder es geht zum nächsten Bild. Die OrginalMagento Zoom Funktion wird automatisch abgeschaltet (was auch gut ist).

Uns persönlich hat der rote Kreis oben rechts in der Ecke (mit dem Schließen X) gestört. Dieses kann natürlich durch ein wenig Anpassung entfernt oder ausgetauscht werden (was wir zuerst auch getan haben), aber dafür gibt es ja auch noch andere Lightboxen.

2. Die Magento Easy Light Box war bis gestern noch bei uns im Einsatz. Wie oben geschrieben, lässt sie sich auch sehr leicht über Magento Connect installieren und ist dann (mglw. nach einem Neu Login in das Backend) schnell über die Konfiguration editieren.
Was direkt positiv ins Auge fällt, ist dass bei mehreren Bildern “Bild X von Y” angezeigt bzw. ganz nach Gusto auch umbenannt werden kann.

Auch hier können die Einstellungen für jeden Storeview gemacht werden und Bildgrößen, Transparenz ec. können definiert werden. Im Gegensatz zur IG Lightbox kann aber nicht mit den Farben gespielt werden.

Einen Pluspunkt gibt es jedoch noch für die Namensoption. Hier kann bei nicht ausgefüllter Bildbeschreibung der Artikelname eingeblendet werden, wenn man will.

Die Lightbox ist weiterhin schön schlicht. Negativ fiel auf, dass keine Zeichen (wie bei der IG Lightbox) sondern die Wort “NEXT” und “PREV” sowie “CLOSE” in der Lightbox verwendet werden. Diese müssten bei Bedarf ausgetauscht werden. Die Magento Zoom Funktion kann über das Backend de-/aktiviert werden.

Uns persönlich war die Lightbox ein wenig zu langsam. Man kann sie zwar über das Backend beschleunigen, das sieht dann aber nicht mehr schön aus, da es unrund läuft.

Das größte Problem entstand aber in Verbindung mit dem Internet Explorer (9), konfigurierbaren Produkten und dieser Lightbox. War die Lightbox aktiviert, konnte man konfigurierbare Produkte nicht mehr in den Warenkorb legen und steckte fest. Das war natürlich (mag es ein temporäres Problem des IE oder der Lightbox sein oder nicht) nicht akzeptabel und so sahen wir uns weiter um und fanden Kandidat Nummer 3.

3. Die Lightbox von “MagentoPsycho” (im Backend hat er/sie sich dann aber “MagentoPycho” genannt 😉 Schreibfehler? Nachtrag vom 15.08.2011 dies wurde nun behoben.). Diese baut offen auf der weit verbreiteten jQuery Technik auf und bietet mit nur einer schnellen Installation über Magento Connect gleich DREI verschiedene Lightbox Varianten, die bequem über das Backend auf die übliche Weise zu administrieren sind.

Um es direkt vorweg zu nehmen: Die Probleme mit dem IE 9 waren direkt behoben.

Auch bei dieser Lightbox können je nach Storeview Einstellungen vorgenommen werden. Größen der Bilder können definiert, der Magento Zoom de-/aktiviert werden und dann zwischen den drei Darstellungsvarianten gewählt werden.

FancyBox: Im Frontend fällt sehr positiv auf, dass die Bilder direkt aus den Thumbnails zu kommen scheinen. Ein sehr schöner Vergrößerungseffekt. Durch enorm viele Einstellmöglichkeiten im Backend ist der Gestaltungsmöglichkeit kaum eine Grenze gesetzt. Transparenzen und Übergänge sind so z.B. gut einstellbar. Auch die Haupthintergundfarbe bei Vergrößerung ist einstellbar.Ähnlich wie die IG Lightbox hat diese Lightbox ein kleines “Schließenkreuz” oben rechts in der Ecke, welches hier jedoch schwarz ist und ein wenig eleganter. Wenn die Maus nicht gerade über dem Bild ist, wir nur dieses angezeigt. Bei Mouseover wird ein kleiner rechts oder links Pfeil zum nächsten oder vorigen Bild angezeigt. Einen Punktabzug gibt es für die fehlende Bildbeschreibung / Artikelnamen. Hier gibt es keine weiteren Informationen.

PrioBox: Hier kann im Backend deutlich weniger eingestellt werden. Es ist -positiv ausgedrückt-sehr übersichtlich gehalten. Aber für unsere Zwecke voll und ganz ausreichend.
Im Frontend ist diese Lightbox auch deutlich abgespeckter als die Fancybox. Kein “Elastic Effect” also ein Aufschwingen des Bildes aus dem Thumbnail o.ä.. Sie ist eher schlicht.

Der Hintergrund wird nicht dunkel überdeckt sondern weißt, das Schließenkreuz ist im Bild und hängt nicht über und die Pfeile zur Navigation sind immer sichtbar (elegant) und somit ist eine eindeutige und unmissverständliche Navigation für den Nutzer möglich.
Einen großen Pluspunkt gibt es auch für die Anzeige der Bildbeschreibung, die hier dabei ist. Sie wird aber erst angezeigt, wenn man mit der Maus über das Bild geht, steht also bei der Betrachtung nicht im Weg.

Weiterhin gibt es ein kleines Icon in diese Namensleiste, welches eine Vollbildvergrößerung in einem neuen Fenster erlaubt. Auch eine sinnvolle Erweiterung.
Einen kleinen Punkt Abzug gibt es für “X of Y” in derselben Zeile. Hier wäre eine Backenddefinition “X von Y” schön gewesen.

Lightbox Clone: Diese ist sehr ähnlich der TemplatesMaster Lightbox (wie der Name schon sagt). Es kann wieder definiert werden, ob es “Image X of Y” oder “Bild X von Y” heißen soll und Hintergrundfarbe, Transparenz und Geschwindigkeit kann definiert werden. Also auch sehr übersichtlich.

Im Frontend sieht das Ganze dann aus, wie bei der LightBox von TemplatesMaster auch. Was jedoch negativ auffällt: Die Navigation ist nicht so intuitiv. Es werden keine “NEXT”, “PREV” oder “CLOSE” Knöpfe angezeigt und auch sonst sieht es nach der abgespeckten Variante der o.g. Lightbox aus. Der Name oder die Beschreibung wird angezeigt und eben die Bildnummer. Das war es dann aber auch.

Fazit: Unsere Empfehlung geht zur letztgenannten Extension. Hier hat man die Wahl zwischen drei gut funktionierenden Lightboxen, die vielseitig editierbar sind. Unser Favorit ist hier die PiroBox, da sie sehr übersichtlich, für den Nutzer navigierbar und schnell ist.

Einen älteren Artikel hierzu gibt es auch HIER

Platz zwei und drei teilen sich die anderen beiden Extensions. Eigentlich gibt es bei diesem Vergleich keinen Verlieren sondern nur einen -subjektiven- Gewinner. Es wird auch berichtet, dass die letztgenannte Extenion unter Magento 1.5 laufen soll. Dies werde ich einmal nachreichen, wenn wir sie eingespielt haben.

Bis dahin viel Spaß beim Erleuchten!