Plugins, Responsive Webdesign, WordPress

Lightbox-Plugins für responsive WordPress-Themes

von

Ellen Bauer

•

11. Juni 2012

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.

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

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!

von

Ellen Bauer

Plugins, Responsive Webdesign, WordPress

Kommentare

Daniel Riemer

•

11. Juni 2012

Antworten

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!
Matthias

•

11. Juni 2012

Antworten

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

•

11. Juni 2012

Antworten

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

•

11. Juni 2012

Antworten

Ich finde diese Galerie Klasse: http://codecanyon.net/item/flare-responsive-mobileoptimized-lightbox-plugin/2392703
Gerhard

•

11. Juni 2012

Antworten

Ich verwende für blog.grid.de das Plugin jQuery Lightbox for Native Galleries zusammen mit dem Piha Theme. http://www.viper007bond.com/wordpress-plugins/jquery-lightbox-for-native-galleries/
Caspar

•

11. Juni 2012

Antworten

Ist zwar kein Plugin, könnte aber leicht eins werden: die Modal-Komponente von Twitter‘s Bootstrap. Schön responsive und quasi fertig gestyled. Mit ein bisschen jQuery… ;)
Johannes

•

11. Juni 2012

Antworten

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

•

12. Juni 2012

Antworten

@alle: Vielen Dank für die vielen weiteren Vorschläge. Ich werde die Lightboxen ausprobieren und dann den Artikel noch weiteren :) Viele Grüße, Ellen
Felix

•

12. Juni 2012

Antworten

Es gibt auch noch die folgende, aber ich weiß nicht, ob diese auch auf Android-Geräten richtig funktioniert: http://neteye.github.com/touch-gallery.html
Thorsten

•

13. Juni 2012

Antworten

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
Horst

•

14. Juni 2012

Antworten

Hi,
prima Artikel, – kommt sehr passend zum gerade erworbenen Waipoua-Theme :-)

Und hier noch ein Kandidat: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/. Lässt sich vielseitig anpassen, braucht nur ein rel-attribut im a-tag, hat album-support und vieles mehr.

Viele Grüße,
Horst
Joël

•

14. Juni 2012

Antworten

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
Phil

•

15. Juni 2012

Antworten

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

•

16. Juni 2012

Antworten

@Phil: Nein ich habe die Flare Slideshow noch nicht mit Waipoua zusammen verwendet. Ich finde auch, dass die js-Datei viel zu groß geraten ist.
Tim

•

17. Juni 2012

Antworten

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 :-)
Timm

•

22. Juni 2012

Antworten

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
Felix

•

23. Juni 2012

Antworten

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

•

29. Juni 2012

Antworten

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

•

30. Juni 2012

Antworten

Also ich habe auf meinen Seiten meist „Shadowbox JS“ im Einsatz.

Nehmt doch einmal Kontakt zu den Entwicklern auf. Vielleicht können sie die swipe-Funktion noch einbauen.
Felix

•

1. Juli 2012

Antworten

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

•

4. Juli 2012

Antworten

Hallo,
ich habe die PrettyPhoto-Gallery ins Waipoua-Theme integriert. Wer es sich einmal anschauen möchte: Waipoua mit PrettyPhoto. Im Artikel mit den Beschreibungen dort ist auch ein Zip-Archiv mit dem kompletten ChildTheme verlinkt.
1. Sebastian
  
  •
  
  8. Juli 2012
  
  Antworten
  
  Hallo Horst,
  
  sieht sehr gut aus. Danke für die Anleitung.
  1. Horst
    
    •
    
    14. Juli 2012
    
    Antworten
    
    Hallo Sebastian,
    
    danke für die Rückmeldung. Ich versuche noch die Kommentieren-Funktion zu integrieren. Aber im Javascript-Teil (Pretty-Photo) funktioniert es noch nicht. Du bist nicht zufällig fit in JavaScript ;-)
Stéphanie

•

2. August 2012

Antworten

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 !!
André

•

5. August 2012

Antworten

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é
Timo

•

10. September 2012

Antworten

Hallo Ellen,

vielen Dank für den Hinweis auf das Shadowbox JS WordPress-Plugin!! Genau das habe ich gesucht!

Viele Grüße!
Timo
Felix

•

9. Oktober 2012

Antworten

Was sagt ihr zu dieser Bildergalerie?
http://cubiq.org/swipeview
Weitere Informationen dazu gibt es hier:
http://www.drweb.de/magazin/swipeview-bildergalerie-mit-gestensteuerung-35071/
Heiko

•

11. Oktober 2012

Antworten

@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 ;
Martin Zimdars

•

24. Oktober 2012

Antworten

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!
Timm

•

25. Oktober 2012

Antworten

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
Claudio

•

14. November 2012

Antworten

Hallo allerseits,

ich suche eine Lightboxlösung (am besten mit weißem Hintergrund und ohne Rand), in der man auch ein Formular einbinden kann. Jemand eine Idee?

Danke
Claudio
Diana

•

6. Mai 2013

Antworten

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
Torsten

•

19. Juli 2013

Antworten

Ein guter Weg ist auch die NextGen-Gallery, die mit mehreren Lightboxen kommt bzw. genutzt werden kann:
http://wordpress.org/plugins/nextgen-gallery/

Und dazu das Photoswipe-Plugin, um für Smartphones eine optimierte Swipe-Steuerung zu ermöglichen:
http://wordpress.org/plugins/photoswipe-for-nextgen-gallery/

Für http://www.photoswipe.com/ gibt es auch noch andere Plugins. Damit kann auch die in WP eingebaute Galerie versehen werden.
macbaumi

•

12. August 2013

Antworten

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

•

11. Januar 2014

Antworten

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
Michael

•

6. Februar 2014

Antworten

Warum eigentlich nicht jQuery UI Dialog verwenden? Ist bereits an Bord und wird, anders als ein Lightbox-Plugin, auch nicht auf jeder Seite mitgeladen, wenn man es richtig einbindet.
Toni

•

24. März 2014

Antworten

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
Luca

•

12. Oktober 2015

Antworten

Ich habe auch noch ein schönes Plugin gefunden:

https://wordpress.org/plugins/simplelightbox/

Für alle die es interessiert ;)