Prinzipiell stehe ich diesen ganzen Lightbox-Scripten ein bisschen reserviert gegenüber. In sehr vielen Fällen wird der vergleichsweise geringe Nutzen wegen der Performance-Einbuße, durch die zusätzlichen Javascripte, CSS und Grafiken, in meinen Augen nicht wirklich gerechtfertigt.
Anders schaut es bei Websites aus, die sehr viele Grafiken haben oder eine besondere Ausrichtung darauf haben und wo es sinnvoll ist, die Grafiken die über den Artikel bzw. Seite verteilt sind miteinander zu “verknüpfen”: also bringt hier eine Galerie-Funktion für den Leser einen großen Nutzen.
Ich habe während des Relaunches meiner Herr der Ringe Website einige WordPress-Plugins probiert und die Erweiterungen mussten folgendes können:
- Automatische Erkennung der verlinkten Bilder, ohne das man Attribute vergeben muss.
- Galerie-Funktion: Automatische Erkennung von Bildern auf gleicher Seite.
- Der Inhalt des
title-Attributs sollte gleichzeitig auch die Bild-Unterschrift sein. - Navigation innerhalb der Galerie mit Hilfe der Tasten.
- Auto-Resize: das große Bild wird bei der Ausgabe an die Größe des Viewports angepasst.
[adrotate group=”6″]
Am Ende haben sich zwei ernstzunehmende Kandidaten herauskristallisiert:
Nach etwa zwei bis drei Tage testen habe ich mich dann für WP-Slimbox2 entschieden und zwar aus zwei Gründen. WP-Slimbox2 ist zum einen Ressourcensparender. FancyBox for WordPress benötigt 13 http-Anfragen und ca. 22 KByte mehr als WP-Slimbox2. Zum anderen arbeitet WP-Slimbox2 sehr gut mit dem Plugin Javascript to Footer. FancyBox for WordPress verweigert hierbei den Dienst.
Die Erweiterung Javascript to Footer bringt die Javascripte, der eingesetzten Plugins, die dies zulassen bzw. unterstützen, in den “Fußbereich” des HTML-Dokuments … also vor den abschließenden body-Tag. Das ist aus der Sicht der Performance besser. Skripte wie zum Beispiel wie Google Analytics bleiben aber auch weiterhin innerhalb des head-Elements.
Welches Lightbox-Skript bzw. welches -Plugin setzt ihr so ein?
Nachtrag: mittlerweile nutze ich Shadowbox JS.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Bei mir kommt Fancybox zum Einsatz und bin damit sehr zufrieden. 🙂
Ich bevorzuge lieber eine Lösung die das Vollbild dynamisch in fast jedes Browserfenster (Größenabhängig) einpasst. Die vertikalen und horizontalen Scrollbalken gibt es dann nicht.
Hi Horst,
Und das wäre?
Ich nutze derzeit Easy Fancybox, weil ich die einfach hübscher finde als eine Lightbox. 🙂
Bei mir läuft auch schon seit längerem die Slimbox2 .. hat sich bei mir auch als die performanteste und gleichzeitig schickste Alternative erwiesen.
🙂
Ich habe auch vor einiger Zeit mal mehrere Lightbox-Varianten ausprobiert. Für mich hat sich schließlich Shadowbox als Favorit herausgestellt, welches ich auch auf meinen Seiten benutze. Shadowbox kann in Kombination mit einigen Javascript-Bibliotheken eingesetzt werden, etwa jQuery oder Prototype und erlaubt es neben Bildern auch Videos (insbesondere von YouTube), Musik, oder Webseiten in einer Lightbox zu präsentieren.
Auch hier kann mit den Pfeiltasten navigiert werden, was für mich ein wichtiges Kriterium war. Mir persönlich gefällt außerdem das schlanke Design, welches ohne den typischen weißen Rahmen auskommt. Über das WP-Plugin Shadowbox JS lässt sich diese Lightbox-Variante mittlerweile auch prima in WordPress einbinden, zudem gibt es für die Shadowbox eine Deutsche-Sprachdatei.
@dath,
die Shadowbox JS habe ich vorhin getestet und das wäre ien sehr gute Alternative. Dummerweise liest das Plugin nur den Inhalt des title-Elements im Link und nicht im Bild aus. Fügt man ein Bild einzeln ein, dann landet die Bildbeschreibung innerhalb von img.
Ich benutze seit längerem Shutter Reloaded, auch eine ressourcenschonende Variante. Vielleicht nicht ganz so fancy, aber tut seinen Zweck. Automatische Verlinkung geht auch, nur leider keine Tasten-Navigation. Ein Grund mir Deinen Tipp mit WP-Slimbox2 auch mal anzuschauen.
Ich habe mir eine Lösung auf Basis von Highslide zusammengebastelt. Große Raketenwissenschaft ist es nicht. Dank der recht guten Dokumentation kann man das benötigte JS auch direkt im Theme verankern.
Das JS selber lässt sich recht gut an die eigenen Bedürfnisse anpassen. Dank des Configurators kann man je nach Ansprüchen verschiedene Features einbauen oder weg lassen. Eine späterer Änderung des Funktionsumfangs steht dann auch nichts im Weg. Einfach das Paket neu zusammen stellen und hochladen.
Es gibt zwar auch bereits vorgefertigte Plugins auf Basis von Highslide, die haben aber alle irgendwo einen kleinen oder großen Haken. Mit meiner selbst gebastelten Lösung muss ich keine Kompromisse eingehen und die paar Zeilen Plugin-Code sind auch nicht so schwer zu schreiben.
Ich nutze die Thickbox von WordPress zusammen mit dem dem Plugin “Auto Thickbox”. Dies funktioniert bei mir sehr gut und verbraucht sehr wenig Performance.
Da ich nicht nur Anbieter, sondern auch Nutzer bin, weiß ich, dass derlei Scripte vor allem eines machen: Nerven. Daher verlinke ich die Dateien immer direkt.
Sorry, ich hatte vergessen zu schreiben das ich “Fancy Gallery” benutze, nicht nur wegen der dynamischen Größenanpassung.
Diverse Einstellmöglichkeiten: Schleifenmodus, Scroll-Leisten, Zentrieren beim Scrollen, Schließen-Knopf, Milchglas-Hintergrund Transparenzgrad, Rahmenbreite, Bildtitel, Bildtitelposition, Ein- und Ausblendeffekt, Ein- und Ausblendverzögerung, Zeit der Bildgrößenanpassung
OK, diese Plugin ist sicherlich durch diese Funktionsvielfalt nicht das kleinste Plugin.
Bisher nutze ich LightBox 2 als Plugin und nach diesem Artikel werde ich mir mal ein paar weitere Plugin’s anschauen. Vielleicht ist ja was für mich dabei.
Wobei die Option, auch Videos in einer Lightbox anzuzeigen, das wäre schon was. 😉
Herzlichen Dank für den Tipp!
Im Blog benutze ich bisher das WordPress-Plugin Shutter Reloaded, werde aber mit einem Relaunch auf WP-Slimbox2 umschwenken!
Insbesondere die Tastatursteuerung und der ebenfalls relativ schlanke Code haben mich überzeugt.
Den Code der CSS-Datei werde ich allerdings in meine CSS-Datei integrieren und in der index.php des Plugins die eigene CSS-Datei auskommentieren. 😉
JavaScript to footer geht bei mir wegen JavaScripten, die im Header sein müssen, leider nicht. 🙁
Hi Vlad,
ich benutze wp-jquery-lightbox.
Brauche mich dabei nicht um die Lightbox-Eintrage (rel=) etc. zu kümmern, weil das automatisch passiert.
Jedes irgendwo eingefügte Bild wird automatisch mit dem Lightbox-Effekt versehen. Optionen dazu sind im Plugin einstellbar.
Feine und praktische Sache!
ciao
Frank 🙂
Link:
nochmal Link:
http://wordpress.org/extend/plugins/wp-jquery-lightbox/
Ich habe eine Zeit lang Lightbox2 benutzt. Nutze es erstens nicht mehr wegen der großen prototype.js und zweitens weil WP doch schon jquery mitbringt. Warum also bei der Größe auch noch fremdgehen? 😉
Jetzt nutze ich auch schon länger Slimbox2 weil’s so schön klein ist. Perun, eine Frage … Du schreibst Auto-Resize, wo bitte finde ich die Funktion in Slimbox2 ❓
Ich nutze Lightbox2 und bin eigentlich zu frieden.
Ich denke man sollte sich über den Umfang und den Einsatz vorher Gedanken machen. Hier spielen Performance und Usibility eine Rolle.
Ich kaufe mir ja auch kein Ferrari um mein Pferdeanhänger zu ziehen.
hello there,
solange man nur Bilder “lightboxen” möchte ist die Auswahl an Plugins und Codings recht groß. Für gemischten Content gibt es für mich im Moment nur das schon etwas ältere LightWindow v2.0 von Kevin Miller. Die prototype-Lib stört sich jedoch manchmal an Themes mit anderen Javascript-Frameworks. Eher die Ausnahme – kann aber passieren. Schön ist, daß ich Flash ohne großen Aufwand integrieren kann. Quicktime, Pages, inline-Content, iframes/externer Content und Formulare sind machbar. Vorallem alles miteinander vermischt in einer “gallery”.
Hier hab ich ein – leider nicht mehr erhältliches – Plugin von Benjamin Guimberteau zum download bereitgestellt (nicht irritiert sein -> Mac-Zip). Funktioniert sicher auch mit WP 3.x da es eigentlich nur das Javascript in den Header integriert (no coding). Dazu hab ich mir Quicktags angelegt die das Definieren von Inhalten sehr einfach machen.
Alternativ benutze ich Highslide JS mit dem den famosen Editor. Dieses Javscript-Wunder lässt wenig wünsche offen und ist auch performancemäßig tadellos (anpassbar über Configurator). Kompatibilitätsproblem hatte ich bisher noch keine. Für “Bilder-ohne-alles” verwende ich mitunter eine ältere Version des Plug.ins highslide-integration.
Seit einigen Monaten nutze ich jQuery Colorbox, das mit der Colorbox läuft. Es ist klein, schlank und hat wirklich sehr übersichtliche Einstellungen. Ausserdem werden einige Themes mitgeliefert, wobei die meisten mich nicht so überzeugen. Eigene Themen kann man aber basteln.
Der Nachteil ist der kurze JavaScript-Abschnitt, der in den Kopfbereich gesetzt wird. Toll hingegen ist die Möglichkeit, grosse Bilder zu verlinken und dann sie automatisch verkleinern zu lassen, indem man Maximalwerte für die Colorbox im Browserfenster angibt.
Das war mir bisher noch garnicht aufgefallen.
Auf der Plugin-Webseite steht zumindest folgendes:
Also müsstest du das zusätzliche Plugin aktivieren, dann könnte es vielleicht klappen.
Hallo dath,
das ist mir gestern Abend dann auch aufgefallen, dass es einen Zusatzplugin gibt 🙂
Ich finde ein paar Dinge problematisch bei den Lightboxen: Für eine reine Maussteuerung ist es enorm nervig, wenn 1. die Next/Prev-Buttons immer an unterschiedlicher Stelle stehen und ich so ständig mit der Maus den Button neu anwählen muss. Deshalb habe ich gerne Greybox benutzt. Leider wird die nicht mehr aktiv weiterentwickelt, so dass ich mir die Tastatursteuerung selbst dazu programmieren musste; und 2. ist bei den meisten Lightboxen der Back-Button kaputt und es ist kein direktes Verlinken auf die Lightbox möglich. Doch dazu habe ich durch Zufall beim Weitersurfen in der Lightbox-Matrix folgenden spannenden Artikel gefunden:
http://mondaybynoon.com/2009/10/12/the-trouble-with-lightbox-and-its-variants/
Eine Verbindung von SWFAddress und Shadowbox JS – sehr praktisch!
Ich nutze mittlerweile kein Plugin mehr, sondern habe die Lightbox-Variante auf Basis des Scripts von PrettyPhoto in den Blog integriert. Im Grunde kann ich damit sämtliche Dinge innerhalb einer Lightbox anzeigen – incl. Inlinecontent.
Mich stört das setzen von rel-Tags nicht, da ich dadurch genau steuern kann wie was angezeigt werden soll.
Hier kann man sich Näheres dazu anschauen.
Gruß Stephan
“Highslide 4 WordPress” war das kleinste und einfachste Plugin was ich damals gefunden hatte. Kann meiner Meinung auch alles, was du gefordert hast.
[…] war neulich auf der Suche nach einem Lightbox-Script, das eine gutes Verhältnis aus Performance und gebotenen Funktionen […]
In WordPress nutze ich Thinkbax, da es bereits in WordPress enthalten ist. Um es nur auf Seiten einzubinden, auf denen es benötigt wird, nutze ich eine kleine Funktion in der functions.php Datei meines Themes, statt ein Plugin wie “Auto Thickbox” zu verwenden.
Außerhalb von WordPress nutze ich entweder Lytebox oder zunehmen sehr gerne Shadowbox, da es bei vorhandensein eines Frameworks sehr klein ist und für jede Sprache und jeden Anwendungszweck in einer minimalen Größe persönlich erstellt werden kann. Mir fehlt hier nur im Vergleich zu Lytebox die Navigation mit den Cursor-Tasten.
[…] WordPress: die Wahl des Lightbox-Plugins | perun.net Ein Lightbox-PlugIn sucht doch fast jeder, oder? Bei perun hat am Ende WP-Slimbox2 gegen FancyBox for WordPress gewonnen. […]
[…] habe im August während des Redesigns meiner Herr der Ringe Website hier über die Suche nach dem passenden Lightbox-Plugin für WordPress geschrieben. In diesem Artikel habe ich auch geschrieben, welche Voraussetzungen das […]
Also ich hatte mich nach dem Artikel auch für WP-Slimbox2 entschieden und bin dann aufgrund der Optik wieder zu Lightbox geschwankt. Nachdem ich festgestellt habe, dass letzteres fast 200 kB an Ladedaten in Anspruch nimmt (vor allem die prototype.js) , fiel die Entscheidung doch wieder auf die Slimbox. Und die Sache mit der ‘Optik’ war auch unbegründet – gibt keinen Unterschied.
Das einzige Manko bzw. Feature was ich mir wünschen würde, wäre ein Aufruf des Scripts nur auf Seiten, auf denen Bilder mit der Slimbox geöffnet werden können… auf der Startseite bspw. ist es überflüssig… ohne in der index.php zu schreiben, habe ich auf die Schnelle noch keine Lösung finden können. Nun ja, auf jeden Fall Danke für den Tipp!
VG Heiko
@Heiko: Wie wäre es die Abfrage
if( is_home() ){ return; }in das Plugin einzubauen?Habe es jetzt zwar nicht getestet, wenn die Abfrage jedoch in der index.php direkt nach dem Lizenz-Block eingefügt wird, ist das Plugin nur auf den Seiten aktiv, die nicht die Home/Startseite sind.
Wenn du hier im Blog etwas stöberst, findest du bestimmt auch den einen oder anderen Artikel wie man das mit den “Sachen in Abhängigkeit von der Seite ausgeben” macht. Ich meine mich dunkel erinnern zu können das Perun schon mal was dazu geschrieben hatte.
[…] WordPress: die Wahl des Lightbox-Plugins Lightbox-Plugins für Bilder gibt es wie Sand am Meer, welches davon ist aber Ressourcen-schonend. siehe auch den Folgeartikel: WordPress: Shadowbox JS als Lightbox-Plugin. […]
Super, der Beitrag hat mein Layout gerettet. Der Smooth Slider hatte nämlich einen kleinen Konflikt mit dem Lightbox Gallery Plugin. Jetzt funzt der Slider und die Lightbox, nur das Java-Script to Footer musste ich wieder rausnehmen. Alle-drei-zusammen 😉 wollten dann auch wieder nicht so wie ich es wollte. Naja, Problem erkannt – Problem gelöst – Dank deines Beitrags.
Viele Grüße und nochmals Danke
Dirk