perun.net – WordPress & Webwork



WordPress: die Wahl des Lightbox-Plugins

Von am 28. 08. 2010 um 16:37 – Aktualisiert am 21. 11. 2011 um 00:54
WP-Slimbox2 im Einsatz

WP-Slimbox2 im Einsatz

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.

Diesen Artikel weiterempfehlen:

Hinweis:
Schulungsunterlagen für WordPress
Aktuell und praxiserprobt. Als E-Book für den Privatgebrauch oder als PDF-Volumenlizenz für den geschäftlichen Einsatz.

Verwandte Artikel:

 — 


33 Kommentare

  1. 1. – Timo

    Kommentar vom 28.08.2010 um 18:28

    Bei mir kommt Fancybox zum Einsatz und bin damit sehr zufrieden. :)

  2. 2.Horst

    Kommentar vom 28.08.2010 um 19:12

    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.

  3. 3.tux.

    Kommentar vom 28.08.2010 um 19:43

    Ich nutze derzeit Easy Fancybox, weil ich die einfach hübscher finde als eine Lightbox. :)

  4. 4.Daniel

    Kommentar vom 28.08.2010 um 20:00

    Bei mir läuft auch schon seit längerem die Slimbox2 .. hat sich bei mir auch als die performanteste und gleichzeitig schickste Alternative erwiesen.

    :-)

  5. 5.dath

    Kommentar vom 28.08.2010 um 20:00

    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.

  6. 6.Perun

    Kommentar vom 28.08.2010 um 20:55

    Hi Horst,

    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.

    Und das wäre?

  7. 7.Chris

    Kommentar vom 28.08.2010 um 21:15

    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.

  8. 8.Perun

    Kommentar vom 28.08.2010 um 21:50

    @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.

  9. 9. – Ralf

    Kommentar vom 28.08.2010 um 21:52

    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.

  10. 10.Jan

    Kommentar vom 28.08.2010 um 22:01

    Ich nutze die Thickbox von WordPress zusammen mit dem dem Plugin "Auto Thickbox". Dies funktioniert bei mir sehr gut und verbraucht sehr wenig Performance.

  11. 11.Dirk

    Kommentar vom 29.08.2010 um 00:39

    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.

  12. 12.Horst

    Kommentar vom 29.08.2010 um 01:17

    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.

  13. 13.LexX Noel

    Kommentar vom 29.08.2010 um 05:24

    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. ;)

  14. 14.Dieter

    Kommentar vom 29.08.2010 um 07:23

    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. :wink:

    JavaScript to footer geht bei mir wegen JavaScripten, die im Header sein müssen, leider nicht. :(

  15. 15.Franky

    Kommentar vom 29.08.2010 um 08:12

    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:

  16. 16.Franky

    Kommentar vom 29.08.2010 um 08:13

    nochmal Link:

    http://wordpress.org/extend/plugins/wp-jquery-lightbox/

  17. 17.maxe

    Kommentar vom 29.08.2010 um 10:32

    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 :?:

  18. 18. – Gerrit

    Kommentar vom 29.08.2010 um 10:54

    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.

  19. 19. – mike

    Kommentar vom 29.08.2010 um 11:50

    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.

  20. 20.flöschen

    Kommentar vom 29.08.2010 um 16:28

    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.

  21. 21.dath

    Kommentar vom 29.08.2010 um 18:14

    Dummerweise liest das Plugin nur den Inhalt des title-Elements im Link und nicht im Bild aus.

    Das war mir bisher noch garnicht aufgefallen.
    Auf der Plugin-Webseite steht zumindest folgendes:

    Optional: Activate the ‘Shadowbox JS – Use Title from Image’ plugin to push the title from ‘img’ tags onto the parent ‘a’ tag

    Also müsstest du das zusätzliche Plugin aktivieren, dann könnte es vielleicht klappen.

  22. 22.Perun

    Kommentar vom 29.08.2010 um 21:50

    Hallo dath,

    Also müsstest du das zusätzliche Plugin aktivieren, dann könnte es vielleicht klappen.

    das ist mir gestern Abend dann auch aufgefallen, dass es einen Zusatzplugin gibt :-)

  23. 23.Torsten Landsiedel

    Kommentar vom 29.08.2010 um 21:51

    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!

  24. 24.Stephan

    Kommentar vom 30.08.2010 um 09:15

    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

  25. 25.Tom

    Kommentar vom 30.08.2010 um 11:11

    "Highslide 4 WordPress" war das kleinste und einfachste Plugin was ich damals gefunden hatte. Kann meiner Meinung auch alles, was du gefordert hast.

  26. 26.Ligthbox Matrix: das richtige Script finden | Webwork-Tools

    Pingback vom 30.08.2010 um 11:40

    [...] war neulich auf der Suche nach einem Lightbox-Script, das eine gutes Verhältnis aus Performance und gebotenen Funktionen [...]

  27. 27.Kau-Boy

    Kommentar vom 30.08.2010 um 22:53

    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.

  28. 28.Dobschat » WordPress-Links: Lightbox und W3 Total Cache

    Pingback vom 31.08.2010 um 01:32

    [...] 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. [...]

  29. 29.WordPress: Shadowbox JS als Lightbox-Plugin | perun.net

    Pingback vom 13.12.2010 um 16:59

    [...] 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 [...]

  30. 30.Heiko

    Kommentar vom 17.02.2011 um 10:33

    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

  31. 31. – Ralf

    Kommentar vom 17.02.2011 um 17:38

    @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.

  32. 32.Top-15-Artikel im ersten Halbjahr 2011 | WordPress & Webwork

    Pingback vom 19.06.2011 um 17:29

    [...] 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. [...]

  33. 33. – Dirk

    Kommentar vom 09.12.2011 um 16:39

    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

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.