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

NextGEN Gallery mit Lightbox-Effekt

Das NextGEN Gallery Plugin ist das umfang­reichste Fotogalerie-Plugin für WordPress mit vielen prak­ti­schen Funktionen. Bisher habe ich das Plugin aller­dings nicht sehr gerne ver­wendet, da mir der Galerie-Effekt nicht beson­ders gut gefallen hat. Jetzt habe ich her­aus­ge­funden, wie man auch den viel schö­neren Lightbox2 JavaScript-Effekt in Kombination mit den NexGEN-Gallery ver­wenden kann.

Lightbox-Effekt mit dem NextGEN Gallery WordPress-Plugin

Und so funktioniert’s

Sobald du dein Plugin instal­liert 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 unter­schied­li­chen JavaScript-Stilen deinen Favorit aus­zu­wählen. Wähle hier die Lightbox aus.

Lightbox-Effekt mit dem NextGEN Gallery WordPress-Plugin

Da nur Thickbox und der stan­dard­mäßig ein­ge­stellte Shutter-Effekt auto­ma­tisch akti­viert sind, musst du dir nun die Lightbox auf der Lightbox2-Webseite herunterladen.

Hast du den Ordner her­un­ter­ge­laden, legst du dir einen js Ordner in deinem Theme an (falls nicht bereits vor­handen). 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 anzu­passen. Auch die Pfade der Bilder loading.gif und closelabel.gif müssen even­tuell von dir in der lightbox.js Datei ange­passt werden.

Dann musst du die CSS und JS-Dateien noch im Header deines Themes auf­rufen. Füge dazu fol­genden Code inner­halb 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 fol­genden 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 hoch­ge­laden, musst du noch die ent­spre­chenden 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 wei­tere prak­ti­sche Tricks, die die Standard-Funktionen des beliebten Plugins erwei­tern? Ich freue mich wie immer auf dein Feedback!

25 Kommentare

  1. Antje

    Hmm ich habe ein­fach beide Plugins instal­liert, akti­viert und in NextGEN auf Lightbox umge­stellt und dann funk­tio­nierte es :)

  2. Dominik

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

    Wie das ganz ein­fach 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 aktu­ellen Seite auch eine Galerie ein­ge­bunden ist.

  3. Christoph

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

  4. Ellen

    @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 kon­trol­lierst, dass alle Pfade der auf­ge­ru­fenen JS-Dateien im head-tag stimmen (deine URL/js/diedatei.js).

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

    Viel Erfolg und viele Grüße
    Ellen

  5. Chris

    Das Ganze funk­tio­niert nicht mehr unter WordPress 3.0.
    Keine Chance mehr für Lightbox2

    Ich habe aufs WP-3-Standardtheme umge­stellt, alle Plugins bis auf Nextgen-Gallery und Lightbox2 deak­ti­viert - trotzdem erscheint kein Lightbox-Effekt bei Klick auf die Bilder.

    • Ellen

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

      Ich hatte neu­lich 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 aus­pro­bieren, und dann nochmal bescheid sagen und den Artikel aktua­li­sieren, sobald ich eine Lösung habe.

      Vielen Dank und viele Grüße
      Ellen

  6. peter

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

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

    • Ellen

      Hallo Peter,

      vielen Dank für deinen Kommentar. Ich tut mir leid, dass ich noch nicht dazu gekommen bin, die Anleitung zu über­ar­beiten. 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 her­aus­ge­funden habe :-)

      Viele Grüße
      Ellen

  7. Nadine

    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 ver­ant­wort­lich, dass nötige Meta-Tags und Skripte für instal­lierte Plugins aus­ge­geben werden.

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

  8. joe

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

  9. Elmar

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

    • Ellen

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

      Viele Grüße,
      Ellen

  10. Dominik

    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 funk­tio­niert. 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. Ulrike

    Hallo,

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

    WERDE es gleich mal aus­pro­bieren, hof­fent­lich klappt es. Die Fotos kommen so viel besser rüber.

    Danke für den tollen Tipp.
    Grüße aus dem son­nigen Westerwald

  12. Jack

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

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

  13. Daniel

    Vielen Dank für die Anleitung. Lightbox ist doch ein wirk­lich schöner Effekt!

    Ich finde die NextGen Gallery gene­rell eine sehr schöne Lösung, um Bilder zu prä­sen­tieren. Einzig mit der Gallery Über­sicht bin ich bisher unzu­frieden. Aber daran arbeite ich gerade.

    Viele Grüße
    Daniel

  14. Sven

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

    Mein Problem aller­dings besteht der­zeit 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 der­zeit der »ThunderTheme« von HawkThemes.

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

  15. Marco

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

    Nachdem das Plugin FIA Grand Gallery große Probleme gemacht hat, bin ich nun auch auf NextGen Gallery umge­stiegen. Klar war ich über die Ansicht und die Einfachheit ent­täuscht. Nun habe ich ent­deckt, dass man tat­säch­lich das Ganze mit der Lightbox inter­es­santer gestalten kann und den neu­esten Plugin nach dies unter Effekt ein­stellen. Jedoch komme ich mit der Schreibweise nicht klar! Könnt Ihr mit hier wei­ter­helfen. Ich habe ein Album ange­legt mit meh­reren 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 funk­tio­niert es nicht :(

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

  17. Ben

    Super Anleitung !

    Bei mir funk­tio­nierte plötz­lich nichts mehr … nach dem Eintrag in die Header Zeile alles wieder perfecto !

    Vielen DANK !

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.

*


Top