Galerie mit Lightbox in WordPress

Für WordPress gibt es einige Galerieplugins, die mehr oder weniger umfangreich sind. Ab Version 2.5 kann WordPress aber auch ganz alleine Galerien erzeugen. Wie du dieses Feature nutzen kannst, um eine schnelle Galerie umzusetzen, möchte ich heute mal zeigen.

Wie im Beitrag “Herbstfarben” soll die Galerie im Beitrag die Vorschaubilder anzeigen und mittels Klick auf jene soll das Bild komplett geöffnet werden. Was du dazu brauchst, sind zwei zusätzliche Plugins (oder nur eins – siehe ganz unten in diesem Artikel das Update vom 10.03.10):

  • Cleaner Gallery
    Das sorgt dafür, dass der eingebaute Code der Galerie so umgebaut wird, dass wir das nächste Plugin benutzen können
  • Lightbox2
    Das sorgt für den den typischen Effekt.

Beide Plugins kommen – wie immer – ins Plugins-Verzeichnis und werden dann über den Adminbereich aktiviert.

Cleaner Gallery konfigurieren

Zuerst müssen die Einstellungen bei Cleaner Gallery gesetzt werden, damit die Bilder ordungsgemäß verlinkt werden. Außerdem unterstützt Cleaner gallery seit ein paar Versionen noch andere lightboxartige Scripte. Hier gehts aber um Lightbox2 und daher muss das auch eingestellt werden. Die Einstellungen für Cleaner Gallery sind nicht, wie üblich, unter “Einstellungen” zu finden, sonder unter “Design”.

Dort muss im Abschnitt “Gallery Settings” der “Image Link” auf “Full” gestellt werden, was bedeuted, dass die Vorschaubilder einfach auf die Originalbilder verlinkt werden. Wenn dort nichts eingestellt ist, werden die Bilder auf der Anhangsseite geöffnet und der Lightboxeffekt funktioniert nicht.

Und dann muss Lightbox2 noch aktiviert werden. Das geschieht im Abschnitt “JavaScript Settings”. Dort einfach unter “Image Script”die Lightbox2 auswählen. Die Änderungen speichern und weiter gehts mit der

Erstellung der eigentlichen Galerie im Artikel

Jetzt wird die Galerie erstellt. Das geht auch ganz einfach. Im Beitragseditor im WordPress gibt es diese Schaltfläche:
wordpress_galerie_bilder_hochladen

Über diese kannst du all deine Bilder auf einmal hochladen. Wenn du alle Bilder hochgeladen hast, wechselst du auf die Registerkarte Galerie (die nur erscheint, wenn du mehr als ein Bild hochgeladen hast):

wordpress_galerie_einfuegen

Dort hast du jetzt die Möglichkeit, jedem Bild den passenden Titel und eine Beschreibung zu geben. Bist du fertig damit, klickst du ebenfalls in dieser Registerkarte unten erst auf “Alle Änderungen speichern” und zum Schluß auf “Galerie einfügen”. Damit du auch siehst, an welcher Stelle im Beitrag die Galerie eingefügt wurde, siehst du diesen gelben Kasten im Editor:wordpress_galerie_platzhalter_wysiwyg

So, das wars schon. Viel Spaß beim Ausprobieren und zeigt doch mal eure Ergebnisse.

Update vom 15.10.09: Einstellungen für Cleaner Gallery ergänzt
Update vom 19.02.09: Screenshots angepasst an WordPress 2.7

Update vom 10.03.10:

Seit Version 2.92 des Lightbox2-Plugins ist es nicht mehr nötig, Cleaner-Gallery zu verwenden, wenn du nur den Lightbox-Effekt einsetzen möchtest. Denn das Plugin fügt jetzt von sich aus schon die entsprechenden Tags in die Bilderlinks ein, wenn die entsprechende Option aktiviert ist. So muss die Einstellung dazu aussehen:

Wichtig ist allerdings, dass du in den Galerieeinstellungen im jeweiligen Blogartikel die Bilder auf die Dateien und nicht auf die Anhangsseite linken lässt.

Ähnliche Artikel

40 Antworten auf Galerie mit Lightbox in WordPress

  1. Und der Lightbox-Effekt wird dann von allein eingefügt? Wäre ja cool.

  2. micha sagt:

    Der Lightboxeffekt wird durch das Lightbox-Plugin eingefügt.

  3. Ja, schon klar. Ich dachte nur, man muss an der Galerie selbst noch etwas ändern. Hatte Lightbox bislang nur in normalen PHP-Websites eingesetzt.

  4. micha sagt:

    Wenn du einfach so vorgehst, wie ich oben beschrieben habe, sollte es funktionieren. Es gibt in den Einstellungen zur Lightbox sogar die Möglichkeit zwischen vier verschiedenen Themes (Farben) zu wählen: weiss, grau, dunkelgrau und schwarz.

  5. Pingback: Fehlende Screenshots » audio-freeware

  6. Martin sagt:

    Danke fürs Beschreiben der Vorgehensweise, das Ergebnis sieht einfach gut aus!

  7. Roberth sagt:

    Sorry, aber ich hab´ s genau nach Anweisung gemacht – und nix passiert. Ich sehen keine Bilder. Wo liegt das Problem? Ich benutze WP 2.7

  8. micha sagt:

    Auch in Version 2.7 funktioniert das so, wie oben beschrieben. Ich setze es erfolgreich in verschiedenen Blogs ein. Beschreib doch mal genau, was du gemacht hast.

  9. Achim sagt:

    Ich finde unter WP 2.7 “Datei auswählen: Galerie” nicht. Bei mir wird angezeigt: “Bild einfügen: Vom Computer, Von URL, Mediathek; NextGEN-Gallery”. Auch wenn ich NextGen-Gallery deaktiviere funktioniert es nicht. Vermute die Galerie-Funktion gibt es unter WP 2.7 nicht mehr.

  10. micha sagt:

    Im Gegenteil. Auch in 2.7 funktioniert das, wie ich einen Kommentar über deinem geschrieben habe.

    Lad einfach ein paar Bilder hoch und klick im Hochladefenster auf “Änderungen speichern” und warte ab. Es sollte schließend ein Button “Galerie einfügen” da stehen.

  11. Achim sagt:

    Ach, ich habe es. Man muss erstmal mehr als eine Datei auf einen Schlag uploaden, erst dann erscheint der Menüpunkt “Galerie(x)”. Werde jetzt Deinen Vorschlag testen, vielen Dank für die Anleitung.

  12. micha sagt:

    Da haben sich unsere Kommentare überschnitten. Ja, mehr als ein Bild muss schon sein, ansonsten macht eine Galerie ja auch keinen Sinn.

    Obwohl es mit nur einem Bild auch geht. Dann muss in der Link-Url des Bildes einfach der “Aktuelle Link” eingetragen sein.

  13. Linley sagt:

    Hi Micha,

    irgendwie scheint das Update von Cleaner Gallery jetzt meine Galerie nicht mehr zu mögen, hast du da nen Tip?

  14. Ben sagt:

    Hallo,

    bin deinem Tutorial Schritt für Schritt gefolgt allerdings passiert bei mir immer folgendes: Klick auf das Bild (oder die Bilder) im Beitrag und es öffnet sich eine neue Seite wo das Bild in voller Größe dargestellt wird…nicht so schön anzusehen. Woran könnte es liegen?

  15. micha sagt:

    Da wird wohl nicht das richtige Javascript ausgewählt sein. Schau mal unter “Darstellung (oder Design)/Cleaner Gallery” nach, ob du unten auch Lightbox2 ausgewählt hast.

  16. Hallo micha!
    Bin gerade dabei das Plugin in eine Website zu integrieren. dai hc ein eigenes Theme für das Blog erstellt habe, legt er mir leider keine Spalten an, obwohl ich es in den Einstellungen festlege. Ich nehme mal na mir fehlt noch en Stückchen Code, kannst du mir da evenetuell weiterhelfen?

    Grüße…
    Martin

  17. Achso, wenn ich das Standardtheme verwende funktioniert es.

  18. micha sagt:

    Es kann sein, dass in deinem CSS-File die entsprechenden Klassen fehlen. Welche das sind, erfährst du, wenn du dir das CSS-File des Standardthemes anschaust. Evtl. steht auch was im WordPress-Codex dazu drin.

  19. Steffen sagt:

    Hallo Micha,
    ich muss das Thema noch mal eröffnen. Habe deiner Beschreibung nach die beiden Plugins installiert und aktiviert. Erscheinen auch beide im Adminbereich. Funktionieren aber nicht im Frontend. Dort werden die Bilder einfach nur als Link dargestellt, der dann auf eine neue Seite mit dem Thumbnail verlinkt. Thumbnail anklicken und Bild erscheint in voller Größe, aber leider nicht als Lightbox. (WP 2.7, die beiden Skripte als jeweils neueste Auflage) Woran kann das liegen?
    Viele Grüße
    Steffen

  20. micha sagt:

    Hast du denn in den Einstellungen zu Cleaner Gallery auch die Lightbox eingestellt? Das muss so aussehen (Screenshot). Ansonsten gib mal einen Link, wo ich mal nachschauen kann.

  21. Steffen sagt:

    Danke für die schnelle Antwort. Ich hatte die Lightbox 2 in den Einstellungen bereits ausgewählt. Hier der Link zum Blog: http://windwork.de/
    Interessant ist ja vielleicht noch, dass ich die Darstellung deines letzten Screenshots (den Platzhalter) nicht sehe. In meinem Editor steht dann lediglich gallery in den eckigen Klammern.

  22. micha sagt:

    Ich hab mal bei dir nachgeschaut. Es liegt sicher daran, dass du in den Cleaner Gallery-Einstellungen nur auf die Anhangsseite verlinkst und nicht aufs Bild ansich. So muss es aussehen, damit es klappt.

    Ich habe oben im Artikel nochmal die Einstellungen für Cleaner Gallery ergänzt. Als ich damals den Artikel geschrieben hatte, gab es die vielfältigen Einstellungsmöglichkeiten bei dem Plugin noch nicht.

    Achso, den Platzhalter mit [gallery] sieht du nur, wenn du im Editor rechts oben den HTML-Tab aktiviert hast. Der Screenshot oben geht vom WYSIWYG-Modus aus. Ist aber eigentlich egal, denn der Platzhalter zeigt ja lediglich an, an welcher Stelle sich genau die Galerie befindet.

  23. Steffen sagt:

    Tatsächlich, die Änderung brachte den gewünschten Erfolg. Vielen Dank Dank für die Hilfe. Wie hast du Thumbnails eigentlich in einen Dreierblock nebeneinander bekommen?

  24. micha sagt:

    Das geht in den Galerieeinstellungen im jeweiligen Beitrag.

  25. Zegger sagt:

    kann mir vielleicht jemand sagen, warum der Galerie Eintrag fehlt ??

    Bild einfügen/mehrere Bilder hochgeladen

    nur will der Galerie Reiter nicht erscheinen :(

  26. micha sagt:

    Soll ich mal in meine Glaskugel schauen und raten, welche WordPressversion du hast und was du seit dem Zeitpunkt geändert hast, als es das letzte Mal funktionierte oder sagst dus selbst?

  27. Zegger sagt:

    natürlich die neueste Version Version 2.8.6 DE-Edition

    welche ich laufen hatte als es noch funktioniert wei´ß ich nicht mehr

  28. micha sagt:

    Hast du denn auf “Änderungen speichern” geklickt, nachdem du die Bilder hochgeladen hattest? Danach erscheint dann bei mir dieser Galerietab. Ansonsten wüsst sich jetzt auch nicht, nur dass vielleicht irgendein Plugin querschiesst. Vielleicht deaktivierst du mal alle bis auf die beiden oben im Artikel genannten und testest es nochmal.

  29. Frank sagt:

    Hallo,

    ich nutze die aktuelle 2.8.6 E Version und es klappt leider auch nicht mit der Galerie. Die Hinweise habe ich soweit befolgt – möglicherweise hängt es doch an einer Unverträglichkeit mit der aktuellen WP-Version.

    Grüße

    Frank

  30. micha sagt:

    Ich hab grad mal auf dein Blog geschaut und kein Problem festgestellt (siehe Screenshot).

  31. Frank sagt:

    Hallo Micha,

    das ist mittlerweile allerdings ohne Cleaner Gallery direkt im html eingegeben ;-)

    Viele Grüße

    Frank

  32. Pingback: NetzwergBlog » Blog Archiv » Lightbox Gallerie für Wordpress

  33. Peter sagt:

    Guten Tag, alles so gemacht, aber die Lightboxbilddarstellung erscheint nicht, sehen Sie irgendwo einen Fehler?

    Vielen Dank für Ihre Mühen.

    Peter

  34. micha sagt:

    Stell mal in den Einstellungen zur Cleaner Gallery das Image Script auf “Lightbox 2″ ein.

  35. Peter sagt:

    Alles gemacht, ich verzweifel.
    Das ist doch die WP Galerie…

    Vielleicht noch irgendein Einfall?

    Danke für die Mühen.

  36. micha sagt:

    Was meinst du mit “WP Galerie”?

  37. micha sagt:

    Für die letzten Kommentierer ist das vielleicht die Lösung? Ich habe jedenfalls festgestellt, dass sich mittlerweile beide Plugins ins Gehege kommen können. Also einfach auf Cleaner-Gallery verzichten und nur noch das Lightbox-Pligin einsetzen.

  38. Mo sagt:

    Danke danke danke! Ich hab gefühlte 3000 Jahre nach einem simplen Galerie-Plugin gesucht. Tausend Sachen ausprobiert, mich mit unangenehmen Code-Plugins beschäftigt, nix verstanden und nix hinbekommen. Mit Lightbox funktioniert nun alles genau so, wie ich es haben wollte. Und sieht auch noch gut aus. Phantastisch. Ich umarme dich für diesen super hilfreichen Artikel. Und die ganze Welt gleich mit. Danke!

    Cleaner-Gallery braucht man übrigens nicht mehr. Ich konnte nicht mal Einstellungen vornehmen…

    Liebe Grüße
    Mo

  39. marbec sagt:

    danke fuer das schoene howto, vllt koennte man aber dennoch direkt in der
    anleitung erwaehnen, dass man zwingend mehr als 1 bild haben muss, um
    zum gallery-button zu bekommen. bin darauf auch erst in den comments gestossen.
    klar, eine gallery macht erst bei mehreren bildern sinn, aber wir daus testen
    halt das plugin erstmal mit einem upload und weinen dann alle wo der gallery-
    button bleibt :)

    gruesse vom bodensee

  40. Michael sagt:

    Danke für deinen Kommentar. Habs doch gleich mal mit hingeschrieben.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>