Kommentare 38

Lightbox-Plugins für responsive WordPress-Themes

Wenn du einzelne Fotos oder eine Bildergalerie mit Hilfe einer Lightbox präsentieren möchtest, solltest du bei einem responsive WordPress-Theme darauf achten, dass auch die gewählte Lightbox deine Fotos je nach Bildschirmgröße skalieren kann. Am einfachsten ist es natürlich, wenn du ein WordPress-Plugin für die Integration der Lightbox nutzen kannst.

Shadowbox JS WordPress-Plugin

Das Shadowbox JS Plugin hat mir unter den WordPress-Plugin am besten gefallen. Das WordPress-Plugin verwendet Shadowbox.js für die Lightbox-Umsetzung. Allerdings ist die Bedienung der Galerie-Buttons leider noch nicht unbedingt optimal für die Benutzung auf einem Touchscreen, da die Buttons sehr klein sind.

Shadowbox Lightbox iPad

Die Shadowbox Lighbox in der Tablet-Ansicht. Das Bild skaliert sich, je nach Screen-Format.

Für private, nicht-kommerzielle Projekte ist die Nutzung von Shadowbox.js kostenlos. Für kommerzielle Zwecke kann auf der Plugin-Webseite eine Developer-Lizenz des Javascript-Plugins erworben werden.

Fancybox Version 2

Wenn du die Lightbox nicht unbedingt über ein WordPress-Plugin integrieren möchtest, kannst du auch die neue Version 2 der beliebten Fancybox-Lightbox für dein responsive Webdesign verwenden und den benötigten Code direkt einbinden. (Für die Fancybox Version 2 gibt es noch kein vorbereitetes WordPress-Plugin und die Fancybox 1 ist leider nicht responsive).

responsive jQuery Lightbox Fancybox

Die Fancybox-Lightbox in der Tablet-Ansicht.

Die Fancybox-Lightbox funktioniert meiner Ansicht nach noch etwas schöner im responsive Design. Allerdings sind auch hier wieder die Buttons sehr klein geraten für die direkte Bedienung mit dem Finger. Die Fancybox-Lizenz ist fast gleich wie bei der Shadowbox, kostenlos für private Webseiten und gegen Gebühr auch für kommerzielle Webseiten zu erhalten.

Leider bieten beide Lightbox-Optionen in der Galerie-Variante keine Swipe-Funktion für Touchscreens. Kennst du eventuell eine Lightbox-Lösung, die dieses Feature bereits anbietet? Über dein Feedback und deinen Erfahrungsbericht bei der Integration von Lightbox-Plugins in responsive WordPress-Themes freue ich mich sehr!

38 Kommentare

  1. Danke für den Artikel.
    Ich habe gute Erfahrungen mit Galleria (http://galleria.io) gemacht. Zwar nicht im WP-Umfeld, aber das sollte ja kein Problem sein. Die responsive-Funktionen sind sehr ausgereift und funktionieren – zumindest auf meinen vorhandenen Testgeräten – mit Touch-/Swipe-Gesten einwandfrei. Die Library ist im Vergleich zu den anderen “üblichen Verdächtigen” mehr ein Galerie-Framework. Zudem ist das Script sehr gut dokumentiert. Fazit: Sehr runde und professionelle Software!

  2. Ich verwende auf den meisten Blogs die WP jQuery Lightbox. Diese Lightbox hat zwar auch keine Swipe-Funktion, passt sich aber sehr gut an mobile Endgeräte an und lässt sich auch auf kleinen Displays noch gut bedienen. Und im Vergleich zu einigen anderen Lightbox-Plugins produziert sie auch keine Konflikte mit anderen Plugins und keine 404-Fehler. Wer das Plugin mal testen will: in diesem Artikel verwende ich es, um die Screenshots anzuzeigen.

  3. Hallo Ellen,

    wieder ein informativer Artikel! Ich verwende seit einiger Zeit Lightbox 2 in Verbindung mit NextGEN-Gallery. Das ist bisher die Variante, die am reibungslosesten funktioniert. Leider gibts auch hier keinen Swipe-Effekt.

  4. Das Problem, was ich persönlich noch bei responsiven Lightboxen sehe, ist, dass ich sie auf bestimmten Auflösungen nicht ausschalten kann. Denn auf dem Desktop-Rechner mit einer Auflösung von 1920*1080 ist eine Lightbox echt klasse, doch schon auf dem Netbook nimmt sie eher Platz weg, als das Bild größer darzustellen und auf dem Smartphone ist sie meist eher im Weg. Deswegen bleibe ich vorerst bei einer Lösung ohne Lightbox, mal schauen, was die Zeit so bringt.

  5. Thorsten

    Hi,
    toller Artikel!

    Hat jemand eine sich anpassende Lightbox (beim Begriff „responsiv“ bekomm’ ich ‘nen Würgreflex) schon mit dem „Adaptive Images“-Script hinbekommen? AI funktioniert ohne eine Lightbox hier prima (funktionsmäßig), mit einer sich anpassenden Lightbox aber nicht, da das Lightbox-Script die größe dynamisch anpasst.

    Bekommt man die beiden Sachen zusammen?

    Viele Grüße

    Thorsten

  6. Hallo Ellen,
    ich denke gerade darüber nach die SlideShowPro von http://slideshowpro.net/ in einem aktuellen Kundenprojekt einzusetzen. Dabei handelt es sich allerdings mehr um ein Foto-CMS. Es gibt einen tollen Swipe-Effekt für mobile Geräte. In der Desktop Ansicht wird die Darstellung mit Flash realisiert. Das gefällt mir noch nicht. Kostenlos ist es auch nicht.
    Beispiele gibt’s beim emerge mag z.B. unter http://www.emerge-mag.com/2012/06/salar/

    Gruß,
    Joël

  7. Phil

    @Felix Hast Du die (wirklich sehr schöne*) Flare Slideshow schon mit Waipoua zusammen verwendet? Ich versuche das hier gerade, und die Resultate sind noch nicht wie gewünscht: normal eingebunden wird die Slideshow irgendwo weit unterhalb des Browserfensters geöffnet (geschätzt: 1000 Pixel tiefer), und bewegt sich bei jeder Transition nochmals tiefer. Wenn ich wp_enqueue_script( ‘fitvids'; und/oder wp_enqueue_script( ‘placeholder’); im Header auskommentiere, wird Flare offenbar nicht mehr aktiviert, die Thumbnails linken dann geradewegs aufs Originalbild.
    Werde wohl heute nicht mehr schlau daraus.
    (*Was mir an Flare übrigens nicht so gefällt: die min-js Datei bringt immer noch 124kB auf die Waage)
    Gruss, Phil

  8. Tim

    Ich verwende für meine Seiten in der Regel “Auto Thickbox”. Greift auf die bereits mitgelieferte Lösung von WordPress zurück. Hab’s mir noch ein bisschen angepasst und jetzt find ichs super :-)

  9. Wie sieht es denn mit der Slimbox Slideshow aus? Da ich es nicht prüfen kann, wüsste ich gerne, inwieweit dieses Plugin in einem responsive Theme genutzt werden kann.
    Zur Zeit bin ich sehr zufrieden damit, doch das sehe ich nur am PC.
    Vielen Dank für eure Antworten.
    LG Timm

  10. Felix

    @Ellen:
    Du hast geschrieben, dass du die verschiedenen Lightboxen ausprobieren wirst.
    Könntest du dann die verschiedenen Testseiten online stellen?
    Dann könnte jeder die verschiedenen Seiten mit seinem Smartphone auf die Benutzerfreundlichkeit, die Handhabung und die Ladegeschwindigkeit testen.

    @Timm: Die Slimbox funktioniert auf jeden Fall auf dem iphone nicht. Bei anderen Smartphones glaube ich auch nicht.

  11. Hallo Ellen,

    ich habe vor ein paar Tagen das Plugin WordPress jQuery Lightbox auf der Location Seite der WP Camp installiert. Die darin verwendete Colorbox eignet sich mit dem Design #2 hervorragend für die Bedienung auf einem Touchscreen. Allerdings kann man das Plugin noch nicht großartig anpassen. Dazu werde ich das Plugin wohl selbst etwas erweitern müssen.

  12. Felix

    Hallo Ellen!
    Du hast doch gemeint, dass du die verschiedenen Lightbox-Systeme vergleichen und dann darüber berichten möchtest.
    Bestimmt hast du viel zu tun und daher habe ich etwas zusammengestellt, damit man Shadowbox, colorbox, fancyBox, prettyPhoto und die touch-gallery direkt vergleichen kann.
    Ich habe über alle die gleichen Fotos verwendet, die Skripte auf genau die gleiche Weise eingebunden und auch sonstigen Schnickschnack verzichtet.
    Das ganze kannst du hier herunter laden: http://www.multiupload.nl/CJVSI9B4E1
    vielleicht möchtest du oder jemand anderer meine Ausführungen ergänzen. Und natürlich kannst du die Dateien auf eurer Internetseite veröffentlichten.
    Wenn die Datei herunter geladen hast, könntest Du diesen Beitrag löschen.

  13. Vielen dank für diesen Artikel !! Ich habe Shadowbox probiert und es sieht ganz gut aus.
    Es gibt sehr viel Lightbox plugins, aber so wenig sind Responsive. I hoffe Fancybox wird die version 2 benutzen, das wäre schön. Villeicht werde ich auch mein einiges Fancybox 2 plugin entwickeln wenn ich Zeit habe :)

    Thanks for sharing !!

  14. Hallo Ellen,

    Wahnsinn, es gibt ja fast kein WordPress-Problem zu dem es bei Dir kein Tutorial gibt. Werde morgen mit Deinem Tutorial aus 2010 meine Kommentarfunktion anpassen.

    Vielen herzlichen Dank für die tollen Tipps!!!

    Viele Grüße,
    André

  15. @felix die qubic Lösung gefällt mir gut. Müsste nur noch als wp plugin verfügbar sein. Ich find ja eine seemless Gallerie mit swipe klasse. So a la einer responsive amazon Gallerie, wo man einfac schiebt und gut.
    Ne gute wp lösung wäre klasse. Noch jemand Tipps?

    –ohne swyype getippt ;

  16. Als Dozent von existenzgründerseminaren kann ich nur sagen: Vorsicht bei den Bildergalerien; die Herkunft der Bilder muss eindeutig klar sein und gekennzeichnet werden. Zudem gilt: Kein Kopieren von den Bilderngalerien anderer, das wird zu oft gemacht, da dann doch besser auf kommerzielle Anbieter von Bildergalerien zurückgreifen!

  17. Pingback: Lightbox-Plugin für responsive WordPress-Themes › NetzBlogging.de › By Timm

  18. Hallo Ellen,
    inzwischen habe ich ein Plugin entdeckt, welches sich sehr gut auf den mobilen Geräten bedienen lässt.
    Die Bilder werden responsive Dargestellt und neben dem Bild gibt es Navigationsbuttons, die groß genug sind, damit selbst ich mit meinen großen Fingern, bequem durch die Galerie navigieren kann.
    Das WordPress-Plugin “FooBox” habe ich auf meinem Blog näher vorgestellt.
    Das ich keine Videos innerhalb der Lightbox darstellen kann, stört mich nicht. Deshalb kann ich es durchaus empfehlen.
    LG Timm

  19. Diana

    Hallo zusammen, ich brauche Hilfe…

    Ich habe für einen Kunden eine WordPress-Seite erstellt und für seine Referenzen die nextgen-gallery installiert mit der Einstellung “[Show picture list]“, so weit alles super und klappt auch einwandfrei. Jetzt möchte mein Kunde die Einstellung “[Show picture list]” auf der Referenzenseite so lassen, aber in der Lightbox die Bilder als Diashow eingestellt haben, so dass die Bilder von alleine laufen und der Betrachte sie per klick stoppen oder weiterlaufen lassen kann.
    Also zusammenfassend brauche ich eine visuelle Lightbox für ngg, so dass die Bilder per Diashow/Slideshow in der Lightbox angezeigt werden.

    Wie kriege ich das bei ngg hin, ohne hoffentlich großen Aufwand. Ich hoffe, mir kann jemand helfen.

    Viele Grüße
    Diana

  20. Hi Ellen
    Ich suche schon lange ein Lightbox Plugin. Ich bin auf folgendes Plugin gestossen. Zwar nicht gratis, aber erfüllt alle meine Wünsche. http://getfoobox.com
    Die foobox ist eine “Responsive Image Lightboxes for WordPress with Built-In Social Sharing”. So wird es vom Entwickler selbst genannt. Mein Tipp also.

  21. Michel

    Hallo Ellen,
    auf Deiner Seite habe ich schon viele Tipps und Lösungen für meine Arbeit mit WP gefunden.
    Daher möchte ich heute auch mal einen heißen Tipp hier hinterlassen.
    Und zwar möchte ich die ” Responsive Lightbox ” empfehlen . Das WP-Plugin tat nach der Installation sofort seinen Dienst. In den Einstellungen (alles auf deutsch) kann man u.a. mit verschiedenen Lightbox-Darstellungen herumspielen. Einfacher gehts m.E. nicht.
    Ob das Teil so “responsive” ist, wie es sich selbst nennt, kann ich leider (noch) nicht sagen. Ich habe es noch nicht mit Smartphone, Tablets und dergleichen ausprobiert.
    Herzliche Grüße
    Michel

  22. Toni

    Hallo Ellen,

    ich bin relativ neu bei den Elmastudio-Themes und ich mag sie wirklich sehr, weil sie so eine schlichte Schönheit haben. Leider fehlen mit für die Präsentation von Fotos noch ein paar Features wie Galerien, die ich gerne mit Plugins einbauen möchte. Leider sind die Galerien, Slider und Lightboxes aber meist sehr geschmacklos überladen und passen sich so gar nicht in euer tolles Design ein. Deswegen meine Frage, hast du Tipps für solche Plugins, die gut zu euren Themes passen. Ich suche im Prinzip so was Schlichtes wie die Galerien in Wells von Squarespace (http://wells-demo.squarespace.com). Da gibt es eine Masonry-Grid-View und im Wechwel eine Vollansicht des Bildes ohne Box und Schnickschnack in einer Art Slider mit ganz simpler Navigation. Ich denke, so was würde z.B. perfekt zu Moka passen aber es ist nirgends zu finden. Ideen? Tipps?

    Lieben Dank schon mal und viele Grüße,
    Toni

Schreibe eine Antwort