«FooBox«, das Lighbox-Plugin für die professionelle Darstellung Deiner Bilder bekommt ein UPDATE auf Version 1.2.1! Was sich ändert, liest Du am Ende des Artikels.

Möchtest Du auf Deiner Website Bilder und Galerien professionell präsentieren, kommst Du heutzutage nicht am Lightbox-Effekt vorbei. Durch das Anklicken Links oder eines Vorschaubildes wird die Deine Webseite abgedunkelt und ein Bild, Video oder Text überlagert sie mit einem Transparenz-Effekt. Es gibt inzwischen viele verschiedene Skripte und Plug-Ins, welche die Integration in Dein Blog erleichtern und mit zusätzlichen Funktionen ausgestattet sind.
da ich in den letzten Tagen gefragt wurde, ob ich ein Lighbox-Plugin kenne, welches sich dem Responsen Design der Website anpasst und mit einfachen Wischgesten zu nutzen ist, möchte ich Dir das WordPress-Plug-In «FooBox« einmal näher vorstellen.

Was bedeutet »Anpassen an das responsive Design?«

Einfach erklärt bedeutet es, dass das Bild sich der Größe des Fensters anpasst. Ist dies nicht der Fall, ragt das Bild über den Rand hinaus und Du siehst nur den einen Teil des Bildes und im schlimmsten Fall kann das »übergroße« Bild die gesamte Darstellung der Website durcheinander bringen.
deshalb ist es gerade in der heutigen Zeit, bei der im zunehmenden Maße mit dem Handy, Smartphone und Tablet mobil im Internet gesurft wird, von großer Bedeutung, das sich das Webdesign, und somit auch die Bilder dem Ausgabemedium anpassen können.
Und genau diese Funktion muss auch das Lightbox-Plugin nutzen können. Das Bild professionell darstellen, in voller Größe, aber dem Bildschirm angepasst.

Ellen stellte in ihrem Artikel verschiedene Lightbox-Plugins für ein responsives WordPress-Theme vor, bemängelte aber, das es zu diesem Zeitpunkt keine Lightbox-Plug-Ins gibt, die eine «Swipe-Funktion« (Wischen mit dem Finger, damit innerhalb einer Galerieansicht das nächste Bild ausgewählt wird) beinhalten.

Auf T3N wird sich auch Gedanken darüber gemacht, wie Bildergalerien am besten dargestellt werden können und stellt dazu die 5 schönsten WordPress-Gallery-Plugins vor.

Einfach am Touchscreen bedienbar

Beim WordPress-Plug-In »FooBox« ist auch nicht möglich, mit einfachen Gesten durch die Galerie zu blättern. Jedoch werden je nach Einstellung, an den Seiten der Bilder einzelne Buttons (Pfeile), dargestellt, die für eine Nutzung mit dem Finger groß genug sind und somit ein »Wischen« hinfällig machen.

Einfaches Teilen der Inhalte

Eine weitere Funktion von »FooBox« ist die Integration von Social-Media-Buttons. Neben Facebook und Twitter findest Du auch Google+, Pinterest und LinkedIn.

Bildunterschriften

Was ich an diesem Plug-In gut finde ist die Darstellung der «Captions«, der Bildunterschriften innerhalb der Lightbox. Leider fehlt hier die Kommentarfunktion auf die ich aber verzichten kann, da meine Bilder nur Zusatzinhalte sind und der Leser unterhalb des Artikels kommentieren kann.

FooBox bietet viel mehr

Vorbei sind die Zeiten, wo ich in jedem Link zum Bild zusätzliche Angeben machen musste. Es gibt verschiedene Varianten um dem Script klarzumachen, dass das Bild mit einem Lightbox-Effekt geöffnet werden soll, doch die Bekannteste ist wohl der Zusatz

rel="lightbox"

der hier nun nicht mehr benötigt wird. Das erledigt das WordPress-Plugin anhand des jQuery-Scripts von ganz alleine. Das ist für mich ein sehr wichtiges Kriterium.

FooBox bietet noch mehr. Hier eine kleine Übersicht zu den Funktion des WordPress-Plug-Ins:

1. WordPress Gallery Support:
   Mit einem einfach Klick in den Einstellungen aktivierst Du den Lightbox-Effekt für Deine WordPress-Galerie.
2. Image Caption Support:
   Das hatte ich bereits beschrieben.
3. NextGen Gallery Integration:
   Du nutzt die NextGen Gallery zur Darstellung Deiner Bildergalerien? FooBox besitzt eine Unterstützung dieses WordPress-Plug-Ins.
4. Custom CSS Class Support:
   Du möchtest FooBox dem Aussehen nach Deiner Website anpassen? Kein Problem.
5. OpenGraph Meta Data Integration:
   Damit auch Facebook beim Teilen des Artikels das richtige Bild darstellt.
6. Popular SEO Plugin Integration:
   FooBox nutzt die schon vorhandenen SEO-Möglichkeiten von WordPress.
7. Auto Slideshow with Progress Bar:
   Du kannst einstellen, ob die slideshow automatisch starten soll, sobald Du innerhalb der Galerie ein Bild anklickst.
8. Keyboard Navigation Support:
   Du kannst mit den Pfeiltasten einfach durch die Galerie navigieren.
9. All Images Option:
   Das Beste. »set it and forget it«. Mit einem einfachen Klick alle Bilder »Lightbox-Fähig« machen.
10. Arrow Navigation Icon Selection:
    Unterschiedliche responsive Navigationssymbole.
11. Color Scheme Selection:
    Auswahl eines bestimmten Farbschemata möglich. Du kannst aber auch alles selbst einstellen.
12. Fit to Screen Option:
    Das Bild kann auch in »Full-Screen« angezeigt werden.
13. Show or Hide Scrollbars:
    Ist das Bild zu groß, erscheinen Scrollbalken. Diese kannst Du in den Einstellungen abschalten.
14. Show or Hide Navigation Buttons:
    Du möchtest die Navigationssymbole nicht anzeigen lassen? Auch das ist kein Problem.
15. Custom Error Message or Image:
    Sollte es mal zu einer Fehlermeldung kommen, so kannst Du nach Deinen Wünschen einstellen. »Houston, wir haben ein Problem…«
16. Show or Hide FooBox Affiliate Link:
    Mehr zum FooBox Affiliate Program.
17. Show or Hide Image Counter:
    Manche Lightbox-Scripte zeigen die Anzahl der Bilder an. Du hast die Wahl ob du das möchtest.
18. Custom Counter Message:
    Wenn du eine Anzeige des Zähltextes möchtest, so kannst Du frei aus verschiedenen Darstellungen auswählen.
19. Enable or Disable All Social Icons:
    Mit einem einfachen Klick verhinderst Du die Anzeige der Social Icons.
20. Social Icons Positioning Options:
    Die Social Icons kannst Du relativ frei positionieren.
21. Select Specific Social Networks:
    Natürlich darfst Du auswählen, welche sozialen Netzwerke Du integrieren möchtest.
22. Advanced Settings Tab:
    Einfache Menüführung durch die Einstellungen des Plugins anhand von »Tabs«.

FooBox bietet viel aber nicht alles

Das WordPress-Plug-In FooBox bietet eine ganze Reihe an Funktionen, die für mich völlig ausreichend sind. Doch der eine oder andere Websitebetreiber möchte auch seine Videos in einer »Lightbox« präsentieren. Und wenn der Leser das Gezeigte gut findet, soll er auch die Möglichkeit bekommen, direkt darunter zu kommentieren.
Doch für mich reicht die Funktionalität vollständig aus.

Fällt dir noch etwas ein, was dieses Plug-In auf jeden Fall noch integrieren sollte?

Die Installation

Die Installation ist nach dem Download des WordPress-Plug-Ins, wie bei WordPress üblich, schnell erledigt.

Einfache Installation:

1. Logge Dich in WordPress ein, gehe zum Abschnitt installierter Plugins > Plug-In installieren > hochladen auswählen
2. Lade das Zip-Archiv »FooBox« hoch und aktiviere das Plug-In.
3. Mit den Standardeinstellungen werden die wichtigsten Funktion übernommen und die Bilder in einer »Lightbox« dargestellt.
4. Gehe zu Menü Einstellungen > FooBox-Einstellungen um Deine persönliche Vorgaben zu aktualisieren.

Manuelle Installation:

1. Nach dem Entpacken des Zip-Archivs lädst den «FooBox-Ordner« anhand eines FTP-Programms in den Ordner /wp-content/plugins/.
2. In der Übersicht der installierten Plug-Ins aktivierst Du »FooBox«.
3. Der Rest verhält sich gleich mit der einfachen Installation.

FooBox-Einstellungen und Tutorial

Auf dem folgenden Video und den Bildern möchte ich Dir die einfach gehaltenen und selbsterklärenden Einstellungen des WordPress-Plug-Ins verdeutlichen.

Gibt es Probleme mit FooBox?

Mir sind bisher keine großen Probleme mit »FooBox« bekannt. Das einzige Mal, wo ich auf nicht funktionierende Buttons angesprochen wurde, hatte sich herausgestellt, dass es nicht das WordPress-Plug-In war, sondern zusätzliche geladene Skripte des Themes, die eine einwandfreie Anwendung nicht ermöglichten. Der Lightbox-Effekt wurde zwar angezeigt, doch die Buttons besaßen keine Funktion.

Das Wichtigste zum Schluss: Wo bekomme ich FooBox?

Nähere Informationen zum WordPress-Plug-In sowie weitere Bedingungen kannst Du auf der Website von FooBox bekommen.
Ich möchte es gleich vorwegnehmen: FooBox ist nicht kostenlos.

Für mich geht der Preis von umgerechnet 14 Euro völlig in Ordnung. Dass FooBox alle meine Wünsche und noch viel mehr zu meiner Zufriedenheit vollständig erfüllt, kann ich guten Gewissens sagen, dass das Geld gut angelegt ist.
Ungerne gebe ich Geld für Plugins aus, zumal ich keines habe… ;) Doch manche Arbeiten sind wirklich eine Spende oder auch einen Kauf wert.

Habe ich Dich jetzt überzeugt oder kennst Du ein noch besseres Plugin als FooBox? Das interessiert mich sehr. Bisher habe ich kein vergleichbares Plugin entdecken können.
Was hältst Du vom Lightbox-Effekt und reicht es Dir auch aus, dass Bilder und Galerien so dargestellt werden?
Hast Du auch schon Geld für ein Plugin ausgegeben und wenn ja, für welches?
Ich freue mich auf Deine Antworten.

FooBox-UPDATE am 09.11.2012 auf Version 1.2

Changelog

2012.09.16 – version 1.1.5
————————–
* changed the order in which the image preloading was working
* takes the title from the anchor if it has one, and then the thumbnail
* escaped all js options that could potentially cause issues
* fixed placement issue with social icons on bottom

2012.09.17 – version 1.1.6
————————–
* allow HTML image captions
* ignores empty titles that are empty or only whitespace

2012.10.05 – version 1.1.7
————————–
* allow image deeplinking for better image sharing
* improved unbinding of other lightboxes
* improved swipe support on mobile devices
* support added for attachment images within pages and post
* added support for titles and captions for images
* better support for WordPress image captions
* click image to hide social buttons and captions
* no longer requires the link to have an image to init the foobox
* moved image counter to below the foobox and centered

2012.10.27 – version 1.1.8
————————–
* improved facebook sharing to not rely on open graph meta tags

2012.11.05 – version 1.1.9
* changed the way preloading works – only the prev and next images are preloaded when the image is displayed
* Updated translations
* improved pinterest sharing
* refactored generated JS

2012.11.06 – version 1.2
* minor fixes and changes to translationsChangelog.txt des Plugins