Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen

Das NextGEN Gallery Plugin ist das umfangreichste Fotogalerie-Plugin für WordPress mit vielen praktischen Funktionen. Bisher habe ich das Plugin allerdings nicht sehr gerne verwendet, da mir der Galerie-Effekt nicht besonders gut gefallen hat. Jetzt habe ich herausgefunden, wie man auch den viel schöneren Lightbox2 JavaScript-Effekt in Kombination mit den NexGEN-Gallery verwenden kann.

Lightbox-Effekt mit dem NextGEN Gallery WordPress-Plugin

Und so funktioniert’s

Sobald du dein Plugin installiert und deine erste Galerie mit Bildern gefüllt hast, klicke in den Optionen des Plugins auf Optionen und dann auf Effekte. Du hast die Möglichkeit aus fünf unterschiedlichen JavaScript-Stilen deinen Favorit auszuwählen. Wähle hier die Lightbox aus.

Lightbox-Effekt mit dem NextGEN Gallery WordPress-Plugin

Da nur Thickbox und der standardmäßig eingestellte Shutter-Effekt automatisch aktiviert sind, musst du dir nun die Lightbox auf der Lightbox2-Webseite herunterladen.

Hast du den Ordner heruntergeladen, legst du dir einen js Ordner in deinem Theme an (falls nicht bereits vorhanden). Hier hinein packst du alle Dateien aus dem Lightbox2 js-Ordner (builder.js, effects.js, lightbox.js, prototype.js und scriptaculous.js).

Als nächstes legst du einen Ordner namens css an, und packst dort die Datei lightbox.css aus dem Lightbox2 ZIP-Ordner hinein.
Kopiere als nächstes die Bilder aus dem Ordner images in deinen eigenen images-Ordner. Du musst darauf achten, die Pfade für prevlabel.gif und nextlabel.gif in der lightbox.css Datei anzupassen. Auch die Pfade der Bilder loading.gif und closelabel.gif müssen eventuell von dir in der lightbox.js Datei angepasst werden.

Dann musst du die CSS und JS-Dateien noch im Header deines Themes aufrufen. Füge dazu folgenden Code innerhalb des head-Tags in deine header.php Datei ein.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Für das CSS-Stylesheet fügst du dann noch folgenden Code in die header.php Datei ein:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Hast du die Dateien in einen anderen Ordner deines Themes hochgeladen, musst du noch die entsprechenden Pfade anpassen.

Das war’s auch schon. Klickst du jetzt auf die Thumbnails deiner Bildergalerie, werden die Fotos mit dem Lightbox2 JavaScript-Effekt angezeigt.

Wie gefällt dir das NextGEN Gallery Plugin? Kennst du weitere praktische Tricks, die die Standard-Funktionen des beliebten Plugins erweitern? Ich freue mich wie immer auf dein Feedback!

30 Kommentare

  1. Hmm ich habe einfach beide Plugins installiert, aktiviert und in NextGEN auf Lightbox umgestellt und dann funktionierte es :)

  2. Ich bin ja ein Feind der Blogs auf denen bei jedem Seitenaufruf alles an JavaScript und CSS geladen wird was das Netz so hergibt :) Deshalb mein Vorschlag WordPress-Hooks zu verwenden.

    Wie das ganz einfach geht ist z.B. hier erklärt:
    http://wpengineer.com/load-a-stylesheet-only-if-use-gallery/

    Dann werden die Lightbox-Scripte nur geladen wenn in einem der Posts auf der aktuellen Seite auch eine Galerie eingebunden ist.

  3. Christoph 10. Juni 2010

    Hm, ich bin Schritt für Schritt durchgegangen, habe aber nach wie vor das Problem, dass wenn ich das Thumbnail klicke, das Bild in Originalgröße im gleichen Browserfenster geöffnet wird, ohne jeglichen Lightbox Effekt. Ich weiß nicht was ich falsch mache…. :(

  4. @Christoph: Sorry, dass ich erst so spät zurückschreibe :-)

    Hast du einmal getestet, ob ein anderer Lightbox-Effekt des NextGEN-Gallery Plugins funktioniert?

    Wichtig ist auch, dass du noch einmal kontrollierst, dass alle Pfade der aufgerufenen JS-Dateien im head-tag stimmen (deine URL/js/diedatei.js).

    Ansonsten probiere doch einmal (nach Antjes Tipp) das Lightbox2 WordPress-Plugin zu installieren.

    Viel Erfolg und viele Grüße
    Ellen

  5. Das Ganze funktioniert nicht mehr unter WordPress 3.0.
    Keine Chance mehr für Lightbox2

    Ich habe aufs WP-3-Standardtheme umgestellt, alle Plugins bis auf Nextgen-Gallery und Lightbox2 deaktiviert – trotzdem erscheint kein Lightbox-Effekt bei Klick auf die Bilder.

    • @Chris: Vielen Dank für deinen Kommentar :-)

      Ich hatte neulich auch schon Probleme die Option mit den beiden Plugins zum Laufen zu bringen. Hast du die Code-Variante schon ausprobiert?

      Ich werde es auf alle Fälle auch noch auf meinem Testblog ausprobieren, und dann nochmal bescheid sagen und den Artikel aktualisieren, sobald ich eine Lösung habe.

      Vielen Dank und viele Grüße
      Ellen

  6. hallo Ellen,
    habe das gleiche wie Christoph; trotz korrekter Abarbeitung der Anleitung kommt kein Effekt.
    Habe auch schon das Lightbox-Plugin verwendet, ebenso Slimbox, alles ohne Erfolg. Woran liegt es?

    LG Peter
    (der sich riesig über eine Problemlösung freuen würde…)

    • Hallo Peter,

      vielen Dank für deinen Kommentar. Ich tut mir leid, dass ich noch nicht dazu gekommen bin, die Anleitung zu überarbeiten. Ich bin mir noch nicht sicher, wo genau das Problem liegt. Ich nutze den Effekt auf dem Blog meiner Schwester mit der WP-Version 2.9 (www.tibauna.de). Ich schaue mir auf jeden Fall die Anleitung nachher noch durch und teste sie auch auf meinem Test-Blog mit WP 3.0

      Ich sage dann noch einmal Bescheid, sobald ich mehr herausgefunden habe :-)

      Viele Grüße
      Ellen

  7. Ich hatte auch das Problem, dass die Gallery bei mir nicht lief.

    Was mir dann half war: Den kleinen Codeschnipsel

    in den head-Bereich des Header einfügen.

    Der ist dafür verantwortlich, dass nötige Meta-Tags und Skripte für installierte Plugins ausgegeben werden.

    Hab das erste Mal mit php zu tun gehabt und wusste das nicht.

  8. Hallo zusammen, gibt es jetzt eine Lösung für WordPress 3.0 und Lightbox 2 (Nextgen)
    viele Grüße
    joe

  9. Also ich habe nur NextGEN installiert, anschließend Lightbox2. In NextGEN Lightbox als Effekt gewählt und das wars. (WP3.0.1)

    • Vielen Dank für dein Feedback zu der Kombi NextGen und Lightbox2 :-) Anscheinend gab es zuerst Probleme, beide Plugins gemeinsam zu verwenden (WP 3.0). Freut mich zu hören, dass es jetzt wohl wieder klappt :-)

      Viele Grüße,
      Ellen

  10. Nach dem neusten Update des Nextgen-Gallery-Plugins scheint das Installieren des Lightbox2-Plugins nicht mehr nötig zu sein. Einfach bei den Nextgen-Optionen unter Effekte auf Lightbox schalten und es funktioniert. Neu stört sich diese Funktion auch nicht mehr mit dem jQuery-Lightbox-Plugin, das ich für die anderen Bilder in meinem Blog brauche.

  11. Hallo,

    genau das suche ich schon seit einiger Zeit mir die Fotos so darstellen zu lassen :-)

    WERDE es gleich mal ausprobieren, hoffentlich klappt es. Die Fotos kommen so viel besser rüber.

    Danke für den tollen Tipp.
    Grüße aus dem sonnigen Westerwald

  12. Danke für die Anleitung!
    Google hat mich hierher gebracht.
    Bei mir laufen die Effekt nämlich nicht mehr.

    Wohin kopiere ich denn die Schnipsel, wenn ich keine header.php habe?
    Nutze das Thesis Theme.

  13. Vielen Dank für die Anleitung. Lightbox ist doch ein wirklich schöner Effekt!

    Ich finde die NextGen Gallery generell eine sehr schöne Lösung, um Bilder zu präsentieren. Einzig mit der Gallery Übersicht bin ich bisher unzufrieden. Aber daran arbeite ich gerade.

    Viele Grüße
    Daniel

  14. Ich muss mich auch für die tolle Anleitung bedanken, obwohl diese nicht wirklich geholfen hatte. Aber durch ein Kommentar hier im Blog, habe ich soweit alles zu laufen bekommen. (Habe das Lightbox 2 Plugin installiert und in der NextGen Gallery den Effekt Lightbox ausgewählt).

    Mein Problem allerdings besteht derzeit darin, dass die Kopf Navigation meines Blogs inkl. dem Text Logo über den Lightbox Bildern liegt. (Siehe hier: http://www.svenic.de/?page_id=50)
    Da ich jetzt auch nicht der CSS-Guru bin, weiß ich nicht ob ich etwas am Galerie oder Theme Stylesheet von mir was ändern muss.
    Ich nutze derzeit der „ThunderTheme“ von HawkThemes.

    Würde mich über eine Antwort sehr freuen.
    Viele Grüße
    Sven

  15. Hey Ellen,

    vielen Danke für den Tipp!

    Man hätte es auch selber finden können, aber manchmal braucht man halt einen Schubbser ;)

    Danke!

  16. Nachdem das Plugin FIA Grand Gallery große Probleme gemacht hat, bin ich nun auch auf NextGen Gallery umgestiegen. Klar war ich über die Ansicht und die Einfachheit enttäuscht. Nun habe ich entdeckt, dass man tatsächlich das Ganze mit der Lightbox interessanter gestalten kann und den neuesten Plugin nach dies unter Effekt einstellen. Jedoch komme ich mit der Schreibweise nicht klar! Könnt Ihr mit hier weiterhelfen. Ich habe ein Album angelegt mit mehreren Unterkategorien… wie füge ich den Code bzw. Name vom Album hier ein:

    rel=“lightbox[%GALLERY_NAME%]“

    Wenn ich das mache, dass ich genau diese Zeile: %GALLERY_NAME% ersetze, dann funktioniert es nicht :(

    Würde mich sehr über eine Antwort freuen! Vielen Dank!!!

  17. Super Anleitung !

    Bei mir funktionierte plötzlich nichts mehr … nach dem Eintrag in die Header Zeile alles wieder perfecto !

    Vielen DANK !

  18. Hallo,
    leider funktioniert die next gen Gallery nicht mit der Zweispaltigkeit im Yokotheme :(

  19. Vielen Dank für die Anleitung, die ich befolgt habe, aber nicht ganz zum Erfolg geführt hat. Bei den Pfaden, die Du oben nennst, sollte man noch ein „/“ voranstellen.

  20. Hi Ellen,

    vielen Dank für die vielen Hilfen!
    Ich stehe nun vor einem Problem das ich seid Tagen nicht gelöst bekomme.
    Auf meiner Homepage gibt es eine Seite auf der ich Produktbilder anzeige. Dies mache ich in Form einer nggallery. Wenn man dort auf ein Bild klickt soll anstatt einer Vergrößerung des Bildes die Produktseite erscheinen.

    Ist das möglich bzw. gitb es vllt. ein anderes Plugin o.ä. um das möglich zu machen?

    Liebe Grüße!

    Wiebke

    PS: ich bin kein Experte! ;)

  21. Hallöchen, bin grad dabei mein eigenes Theme zu gestalten, verwende WP 3.5.1, weder die inkludierte Galerie noch die NextGEN bringen den gewünschten Effekt. Habe die obigen Schritte durchgeführt jedoch ohne Erfolg.
    Muss ich auf irgendwas besonders Rücksicht nehmen wenn ich diese Plugins nutzen will?
    Freu mich auf Antwort.
    Glg Ronny

Hinterlasse eine Antwort

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