Frank ist schuld.. Sein Kommentar brachte mich dazu ein kleines Wordpress Plugin für dieses unheimliche schicke Javascript zu schreiben. :)

Was kann das Plugin?
Das Plugin verwandelt verlinkte Bilder in euren Beiträgen zu einem Overlay Popup mit Lade-Animation. Das Plugin war recht schnell geschrieben, also gibt es hier auch nicht viel zu erzählen. Wer den vorherigen Beitrag zu dem Script schon gelesen hat, weiss was jetzt ungefähr kommt. Probiert es am besten einfach gleich hier aus.

Besser direkt ein Beispiel
This is an example. The HTML Title-Attribute provides this caption

Installation? Super einfach:
1. Hochladen: Entpackt die Zip-datei in euren Wordpress Plugin Ordner
2. Bearbeiten: Entfällt seit Version 0.3!
3. Fertig: Aktiviert das Plugin und probiert es bei euch aus.

Download
Klick hier um die Version 0.1 von wp-lightbox runterzuladen (zip)
Klick hier um die Version 0.2 von wp-lightbox runterzuladen (zip)
Klick hier um die Version 0.3 von wp-lightbox runterzuladen (zip)
Klick hier um die Version 0.4 von wp-lightbox runterzuladen (zip)

UPDATE: Version 0.2 prüft nun ob es ein link oder ein bild ist.
UPDATE: Version 0.3 ohne Links anpassen (schritt 2). Hochladen, aktivieren, fertig. (Danke, tboley!)
UPDATE: Version 0.4 funktioniert jetzt auch mit Text-Links (Thx to Wouter!)

ENGLISH READERS: Please visit this page for details and informations

49 Kommentare zu “Lightbox JS Wordpress Plugin”

  1. 1 MP:Ole Says:
    Vielen Dank.

    Genau dieses Plugin wollte ich gestern auch schreiben, dann kam mir was dazwischen und heute habe ich es doch, ohne etwas dafür zu tun. Oh wie ist das schön.

  2. 2 the13th Says:
    Ein kleines Problem gibt es allerdings:
    Verlinkt man ein Bild zu einer Webseite, wird versucht, diese auch per lightbox anzuzeigen - was natürlich schief geht.

    Wäre klasse, wenn du da noch was friemeln könntest (z.B. ne id oder dergleichen, die das Plugin davon abhält, das rel= zu setzen oder ein Check auf die “Dateinamenerweiterung” - sprich: nur png, gif, jpg automatisch per lightbox - alles andere als “normalen” link - da müsste man dann halt, wenn man auf ein Bild bei flickr verweisst das rel= selber setzen.

  3. 3 frank Says:
    na super… ;) funzt aber vermut ich mal nur unter 2.0 oder ???
    gruss frank
  4. 4 Mentor Says:
    funktioniert mit allen Wordpressversionen und Plugins. Ich scanne lediglich die Artikel nach verlinkten Bildern. Würde mich nicht wundern wenn es auch mit Wordpress 1.2 kompatibel ist. Kenn dort aber nicht die Architektur.. Es ist kein Hack oder so und brauch auch keine anderen Plugins.
  5. 5 frank Says:
    grundsätzlich funzt es in 1.5.2… allerdings nur auf den single.php :-(
    zumindest in meinem angepassten blix-theme…

    ich probiersaber nochma in christas blog

  6. 6 frank Says:
    sachma… wo werden denn meine kommentare hingespült…ist schon das 2.mal, dass sie nicht angezeigt werden… als mehrfachkommentator sollt i doch ned in der spamwarteschleife landen ;))
  7. 7 frank Says:
    grad gefunden, hat zwar mehr funktionen als deins, weil ein funktioneller button im adminbereich erzeugt wird, haut aber auch nicht so hin, …

    ideal wär halt eine kombination mit nem bilduploadplugin

  8. 8 Mentor Says:
    Schade.. naja.. egal.. Mehr Alternativen für alle :) Es gibt ja auch mindestens 4 verschiedene analytics plugins, oder 6 bilder-uploader, etc.etc. Was mich eigentlich nur daran wurmt ist, dass er zwei tage schneller war ^_^ . Grrr

    Naja, für meine 20 minuten Arbeit weine ich da jetzt nich hinterher. Dann gibts halt zwei Lightpress JS Plugins.. juhu! :)

  9. 9 MP:Ole Says:
    Leider scheint dein Plugin nicht zu merken ob hinter dem verlinkten Image ein Image oder eine normale URL ist. Letzteres funktioniert nämlich nun nicht mehr.
  10. 10 Mentor Says:
    oh.. okay.. dann bau ich noch was ein was das abfängt. Neue Version gibts dann gleich
  11. 11 MP:Schorsch Says:
    // changed replace function by georg leciejewski
    return preg_replace("/(<a>]*)\")>/Ui", '

    here´s the fix to only use linked images not linked url´s

  12. 12 MP:Schorsch Says:
    sorry, hatte versucht es weiter oben im kommentar reinzusetzten, aber irgendwie wurde das posting zerschossen. Deswegen der schnellschuss bei uns.
  13. 13 frank Says:
    wenn jetzt noch jemand ne idee hat, wie man das plugin auch auf der weblogstartseite zum laufen bringt und nicht nur in den single.php wär das klasse ;)
  14. 14 frank Says:
    irgendwie werden die kommentare hier öfter zerschossen… eben wieder :-(
  15. 15 Mentor Says:
    joa :) .. okay.. das mit der single.php schnall ich nicht. Was soll das damit zu tun haben? Bei mir gehts doch auch auf der startseite (index)..

    Hmm… also die einzigste erklärung die ich habe ist, dass auf der von dir angesprochenen startseite das excerpt steht und nicht content. Ich filter nämlich lediglich links die in “the_content()” ausgegeben werden.

    Hmm.. hast du mal nen link zu nem Blog wo es nicht geht und einen link zum verwendeten Theme mit der fehlenden single.php?

    Gruss, Kjell

  16. 16 Mentor Says:
    Es kann auch sein, das das script nicht im header eingebunden wird wenn nämlich in der header.php die funktion wp_head(); nicht ausgeführt wird.
  17. 17 frank Says:
    der link is hinter meinem namen, dacht i 2d-sign dort in der linkleiste findest auch nen link zu Christas Weblog, das blacktheme ohne singlephp… dort ist das plugin auch wieder deaktiviert
    ich bin dann aber eh erstma weg, auf dem weg nach austria
    gruss frank
  18. 18 Mentor Says:
    tja.. es kann daran liegen das deine anderen javascripts fehler machen. ich habe auf meinem lokalen testblog das back in black installiert und es geht.

    Fehler macht bei dir: livepreview.js

    Möglichkeit den fehler zu beheben: öffne die index.php und füge ein leeres DIV oder P ein und gib diesem die id=”commentArea”. Dann findet das Javascript auch ein Objekt und der Fehler taucht nicht mehr auf. Dann könnte auch das lightbox.js wieder funktionieren. Ich habe schon oft erlebt das ein Javascriptfehler alle anderen Scripte lahmgelegt hat.

    Gruss, Kjell

  19. 19 frank Says:
    ja, dürft so sein das java script von exhibit (bilderplugin)…
    dass ich keinen container für die livecommentgeschichte drin hab… staun
    klärt aber nicht das problem der nichtanzeige auf der startseite des blogs bei 2d-sign… werd wohl erst morgen mehr tun können
    danke jedenfalls erstma!;)
  20. 20 tboley Says:
    Servus!

    WIe bereits im WordPress Forum erwähnt, werde ich das Lighbox JS auch für mein Galerie Plugin verwenden. Im Rahmen der Anpassung ist mir eine Kleinigkeit aufgefallen, die du auch bei deinem Plugin ändern könntest (damit würde dann der 2. Schritt wegfallen).

    Enferne die Variablen von lightbox.js in der Zeile 38 und 39. Dann müsstest du Zeile 20 in deinem Plugin wie folgt ändern:

    $lightboxHead.= "<script type=\"text/javascript\">\n var loadingImage = '".$lightbox_pluginpath."loading.gif';\n var closeButton = '".$lightbox_pluginpath."close.gif';\n</script>"."<script type=\"text/javascript\" src=\"".$lightbox_pluginpath."/lightbox.js\"></script>\n";

  21. 21 Mentor Says:
    hmm. gute idee. danke :)
  22. 22 frank Says:
    so, fürs modifizierte blixtheme auf http://2d-sign.nty.at hab ich die anzeige auch auf der blogübersichtsseite nun hingebracht, nicht nur in der beitragseinzelansicht. du hattest natürlich recht, das livecomment JS war da ein auslöser, die modifikation mit der Einfügung eines zusätzlichen containers brachte übrigens keinen erfolg, erst die komplette abschaltung des livecomment-plugins… im übrigen schreibt dieses plugin in kein div commentArea, sondern sondern in eines preview… das sollte also passen.

    was mich noch stört, fand ich aber am WE nicht auf die schnelle, im IE wird das overlay ziemlich exakt genau in der mitte aufgerufen, im firefox ca 10 px seitlich verschoben… ich hab im JS gesucht, dort aber nix gefunden… nur extra css für den IE…

    aber vielleicht sollte der php-laie frank mal in den restlichen phpdateien nach inline-css suchen ;))

  23. 23 frank Says:
    @tboley… übrigens auch gute und vor allem kontinuierliche arbeit an deinem bilderplugin. beobacht ich schon ne ganze weile. ein musskriterium hats ja mittlerweile nun, die individuellen bildunterschriften… ;))

    css kann man sich ja anpassen, und der einsatz für beitragsbilder only scheint ja auch schon hervorragend zu funktionieren.

    ich benutzte bisher für nicht-html-freaks in ihren blogs owen winklers exhibit, aber da kam schon lang nix mehr neues…

    und da käm mir ein laienfreundliches bilderplugin wie deines ganz recht…

    wenn es denn in allen umgebungen funzt, auch safe mode und was so übervorsichtige provider haben ;)

  24. 24 Philippe Causse Says:
    hallo und vielen dank für deine mühe. ich hatte schon probiert lightbox zu benutzen (ohne plugin) es klappte, war aber sehr kompliziert.
    aber mit deinem plugin klappt es auch nicht richtig. habe bestimmt was vergessen, entweder kommt das loading bar, aber es dauert ewig und es kommt nichts, oder es geht direkt zu flikr.
    grüsse,
    philippe
  25. 25 CountZero Says:
    ich habe die lightbox js plugin funktionalität (allerdings auf basis des codes von ZEO) in mein theme Binary Blue integriert. für die komfortable nutzung ist auch direkt ein quicktag für den “post schreiben”-bereich im adminpanel integriert ;)
  26. 26 Mentor Says:
    öhm.. quicktag habe ich deshalb nicht gemacht, da es nichts bringt wenn leute den WYSIWYG editor benutzen. Dann hätten sie nämlich keinen zugriff auf das quicktag und könnten die funktion nicht nutzen. Ich weiss zwar auch das der editor mist ist und keiner ihn benutzt, aber exoten gibt es immer und genau die beschweren sich dann :-) ich find es so wie es ist besser. Man brauch sich um nichts kümmern und es kann jeder laie in nur 20 sekunden installieren.
  27. 27 Wouter Says:
    Hi,

    Great plugin! What I miss though (something which is possible in the ;lightbox js original script) is the ability to make a textlink to an image instead of an imagelink to an image.

  28. 28 Patric Says:
    Hab deine Seite gerade über das Wordpress-Forum gefunden. Das Plugin habe ich schonmal gesehen und wieder vergessen! Dieses mal werde ich es mir aber auf jeden Fall installieren! Thx für die Arbeit! Cheers Patric
  29. 29 steve Says:
    Endlich habe ich das Script wieder, was ich damals auf meiner HTML Seite hatte. Danke, dass du ein Plugin geschrieben hast und es auch funktioniert, nicht wie andere, die ich gefunden habe …
  30. 30 silvar23 Says:
    lightbox2.0
    es wird also Zeit für ein Update. Es sind nur Kleinigkeiten zu tun, habes bei mir bereits umgesetzt - für dich 10min Arbeit.

    Viel Spass.

  31. 31 Mentor Says:
    hi silvar.. war nicht ganz 10 minuten.. das umschreiben schon und läuft auch alles soweit, aber das mit den bilder sets ist nicht ganz so leicht… ich arbeite daran. heute abend oder so bin ich fertig.
  32. 32 sebastian Says:
    sehr geil! danke!
  33. 33 Alex Says:
    Hey!

    Habe mir ebenfalls das lightbox script für meinen Blog besorgt. Benutze ebenfalls das Blix-Theme, bekomme jedoch keine Fehlerfreie Darstellung der Bilder hin. Es wird immer ein grauer Balken um das vergrößerte Bild dargestellt. Habe amir auch schon die CSS-Datei angescahut, jedoch keinen Fehler gefunden.
    Vielleicht wirfst du mal einen Blick auf mein Problem.

    Danke im Vorraus! Alex

  34. 34 Alex Says:
    Habe den Fehler gefunden. Dumm von mir, da ich ihn selbst erzeugt habe ;)
  35. 35 Ralph Says:
    Er kam, sah und saugte ;-)
    Sehr hilfreiches und optisch ansprechendes Tool.
  36. 36 latita Says:
    Hallöle :)
    Das Plugin ist wirklich sehr gut. Habe es installiert und benutze es gerne.
    Nun würde ich es auch gerne auf meiner restlichen Seite nutzen, also außerhalb von Wordpress. Gibt es da eine Möglichkeit?
    Viele liebe Grüße
  37. 37 Kjell Bublitz Says:
    Hallo Latita

    Ausserhalb der normalen Beiträge kannst du es natürlich auch verwenden. Dazu musst du deinen Links, welche auf Bilder zeigen, nur manuell ein weiteres Attribut geben.

    Vorher:

    <a href="bild.jpg"><img src="bild_thumb.jpg"/></a>

    Nachher:

    <a href="bild.jpg" rel="lightbox"><img src="bild_thumb.jpg"/></a>

    Das “rel”-Attribut mit dem Wert “lightbox” sollte das erledigen.

    Gruss,
    Kjell

  38. 38 latita Says:
    Hallo, danke für deine schnelle Antwort.
    Allerdins klappt das nicht so einfach. Muss ich da nicht noch was in den Header einer Seite schreiben?
    wie: ?

    Die z.b. Startseite meiner Website ist ja völlig unabhängig von Wordpress und damit auch vom Plugin. Jetzt hab ich das schon mit dem “link rel” versucht, weiß aber nicht genau auf welche Datei ich da linken soll

  39. 39 latita Says:
    muss noch mal posten, hab vergessen den “benachrichtigung per mail- button” anzuklicken :blush:
  40. 40 latita Says:
    ok, hat sich schon erledigt :)
  41. 41 Michael Says:
    Hi Kjell, I’ve been happily using your wonderful LightBox2 plugin and I’m hoping that it’s OK in WordPress 2.5

    Have you had any reports from beta testers?

  42. 42 Mike Says:
    hi,

    wie mache ich, dass der div von der lightvox nich direkt vor angezeigt wird sondern z.b. for “footer” also (div id=”footer”)…

    danke
    mfg
    mike


Trackbacks/Pingbacks

  1. ::kinjin dot net:: » Lightbox Test
  2. Steffen Rusitschka's Blog
  3. Steffen Rusitschka’s Blog » Blog Archive » Lightbox Wordpress Plugin
  4. 2D-SIGN | [web]design und fotografie - weblog » nice pictureplugin…
  5. DonsTag » Blog Archive » Ungelesene Kommentare
  6. Skyspage Blog » Blog Archiv » Lightbox JS
  7. unitstep.net

Diesen Eintrag kommentieren