Lightbox 2 mit Auto-Resize in Wordpress
[English version available: Lightbox 2 with Auto-Resize in Wordpress]
Bei den letzten Anpassungs-Arbeiten für meinen Wordpress-Blog bin ich auf ein Problem mit der Anzeige von Fotos in der Lightbox gestoßen. Die Wordpress-Plugins für Lightbox2 können kein Auto-Resize. Ich habe daher ein paar Scripts, die Teilprobleme lösen, zusammengefügt, sodass die Lightbox 2 auch in Wordpress die Fotos an die Bildschirmgröße anpasst.
Es gibt verschiedenste Lighbox-Varianten – auch einige unter anderen Namen. Beim Klick auf ein Thumbnail wird der Bildschirm abgedunkelt, und darüber das Foto in einer größeren Version – meist mit etwas breiterem Rand – angezeigt. Zusätzlich mit einer Bildunterschrift und oft mit der Möglichkeit zum nächsten Bild zu navigieren.
Das Problem ist, dass die große Version des Bildes eine vernünftige Größe haben muss, damit es in das Browserfenster passt. Außer man hätte eine Lightbox, die die Bildröße automatisch an die Größe des Browserfensters anpasst. Leider gibt es da noch nicht allzu viele Scripte – jedenfalls habe ich kein kostenloses für Wordpress gefunden.
Wie das funktionieren soll, kann man hier sehen:
 |
 |
 |
Wordpress Lightbox 2 Plugin
Lightbox 2 ist ein Script, das von Lokesh Dhakar geschrieben wurde, und zu bestehenden Webseiten hinzugefügt werden kann, um die darin enthaltenen Bilder per Lightbox anzusehen. Dieses Script läuft unabhängig von Wordpress.
Sucht man in den Wordpress-Plugin-Verzeichnis nach Lightbox-2-Plugins, so findet man zurzeit zwei Plugins. Ich habe zuerst das Plugin Lightbox 2 Version 2.8.2 von Ruppert Morris versucht, da es die etwas bessere Bewertung hatte.
Bei der Recherche nach Auto-Resizing für die Lightbox 2 bin ich auf den Blog-Eintrag “Lates Lightbox V2 with automatic resizing” von Fabian Lange gestoßen. Er hat die Lightbox v2.04 um die Auto-Resizing-Funktion erweitert, ohne allzuviel am Original-Code zu ändern. Die geänderten Scripts können bei seinem Blog-Post heruntergeladen werden.
Beim oben erwähnten Wordpress Plugin von Ruppert Morris wurde der Code gegenüber dem Original-Script von Lokesh Dhakar massiv geändert, sodass ich mir das zweite Lightbox 2 Plugin in der Wordpress-Plugin-liste angeschaut habe.
Das ist das Lightbox 2 Plugin, Version 2.0.2 von Giuseppe Argento. Es baut auf das originale Lightbox 2.0.4 auf. Er hat das Script im Vergleich zu Morris nur minimal verändert. Über einen Drei-Wege-Vergleich des Original-Scripts von Lokesh Dhakar, der Erweiterung von Fabian Lange und dem Wordpress-Plugin von Giuseppe Argento konnte ich das Wordpress-Plugin so anpassen, dass es ebenfalls Auto-Resizing unterstützt.
Zusätzliche Features von Fabian Lange (siehe Blog), die ich übernommen habe:
- Auto-Resize
- Opera 9 Bugfix
- Bugfix: Wenn das nächste Bild keine Beschriftung hat.
Ich habe noch weitere Änderungen vorgenommen:
- Ursprünglich war der obere Rand fix. Jetzt wird der obere und untere Rand ziemlich genau berechnet. Dabei wird auch die Bildbeschriftung am unteren Rand berücksichtigt (mit einem fixen Wert, der im Kopf des Scripts angegeben werden kann. Die Ausrichtung sollte daher auch vertikal zentriert erfolgen. Ausgenommen ist der unter Scrollbalken – Wenn dieser eingeblendet wird, hüpft das Bild nicht nach oben.
- Mit dem dunklen Hintergrund hatte ich Probleme. Ich habe ihn auf “position:fixed;” gestellt. Etwas problematisch ist, dass er beim Vergrößern des Fensters nicht sofort erscheint, sondern mit etwas Verzögerung.
- Im Resize-Code wird ein Event-Handler hinzugefügt, der Änderungen der Fenstergröße trackt. Ich hatte dann das Problem, dass nach Schließen der Lightbox bei Ändern der Fenstergröße das Bild plötzlich wieder auftaucht. Ich habe daher den Event-Handler beim Schließen der Lightbox wieder entfernt.
Etwas problematisch ist noch, dass das horizontale Mittig-Ausrichten beim Wechseln von Fotos nicht schön langsam animiert, sondern ruckartig erfolgt. Mir war das allerdings egal.
Installation von Lightbox 2 mit Autoresizing in Wordpress
- Download und Installation des Wordpress-Plugins von Giuseppe Argento: Lightbox 2 v2.0.2.
- Download von lightbox.css. Diese soll die CSS-Datei unter wp-content\plugins\lightbox-2-wordpress-plugin\lightbox\css ersetzen.
- Download von lightbox.js. Diese soll die entsprechende Javascript-Datei unter wp-content\plugins\lightbox-2-wordpress-plugin\lightbox\js ersetzen.
Credits
- Lokesh Dhakar für Lightbox 2.
- Giuseppe Argento für das Wordpress-Plugin.
- Fabian Lange für die Auto-Resize-Erweiterung.
Nachtrag: Tipps
- In den Einstellungen der Lightbox “Auto-Lightbox” aktivieren (Enable Automatic)
- Beim Hinzufügen des Bildes muss bei “Link URL” die Url des Bildes eingetragen sein. Falls das nicht der Fall ist, auf “File URL” (beim Hinzufügen) bzw. auf “Link to Image” (beim Editieren) klicken. Dann wird die korrekte Url in das Eingabefeld übernommen. Eventuell merkt sich WP, wenn man einmal auf “File URL” geklickt hat und übernimmt beim nächsten Bild die URL automatisch.
- Wie Vince im ersten Kommentar gepostet hat, funktioniert die Lightbox nicht bei bereits bestehenden Artikeln. Hier wird erklärt, wie man das korrigieren kann: http://wordpress.org/support/topic/227077
- Bei mir hat die Autoresize Lightbox mit folgenden Wordpress Versionen funktioniert: 2.7.x, 2.8, 2.8.1.
*thumbsup*
28. Mai 2009 um 20:24
Thanks, this is brilliant !
I was really looking for that sort of plugin and it was very painful to find one that was matching my own needs.
Tested with WP 2.7.1 with success. I just hope it will be compliant with new version 2.8.
Nevertheless I have to mention that I had to apply a manual patch to make it work properly with my WP 2.7.1, the solution is told here :
http://wordpress.org/support/topic/227077
PS: sorry I don’t speak a word of german.
28. Mai 2009 um 02:10
Hallo,
endlich das was wir seit tagen suchen.. habe alles wie in der anleitung gemacht – leider funktioniert es nicht. Muss ich irgendetwas beachten? habe WP 2.8 und ein bild mit der standardfunktion im beitrag eingefügt. leider kommt keine lightbox und das bild wird nicht größer. über eine antwort mit hilfestellung würden wir uns sehr freuen.
mfg
28. Mai 2009 um 11:19
Hallo Wolle,
Ich verwende selbst 2.8 – insofern sollte es schon damit klappen. Hat das plugin ohne Modifikation funktioniert? Vince hat im oberen Kommentar geschrieben, dass man beim Plugin noch eine Änderung machen muss, damit auch bei älteren Beiträgen die Lightbox funktioniert. Alternativ müsste der Post neu gespeichert werden.
Ansonst werde ich es nochmals testen über’s Wochenende.
28. Mai 2009 um 13:32
hoi,
habe es so installiert wie beschrieben. also die 3 punkte durchgemacht. getestet habe ich es in einem neuem beitrag. also einen artikel erstellt, über die WP upload funktion ein bild hochgeladen und als thumbnail in den beitrag eingefügt. muss ich dabei etwas beachten oder wird das komplett anders gemacht? freue mich über eine antwort. mfg
28. Mai 2009 um 21:10
Schon war rausgefunen? würden jetzt auf 2.8.1 updaten. geht aber immer noch nichts
wär super, wenn du da mal drüberschaun könntest. oder mal beschreiben würdest wie das jetzt genau funktioniert. ist so ein tolles feature.. würden wir gerne anstelle der galerie verwenden.
grüße aus würzburg!
28. Mai 2009 um 01:36
Hallo,
Ich habe jetzt gerade einen Blog mit 2.8.1 neu installiert und nur das Plugin Lightbox 2.0.2 von Guiseppe Argento installiert und aktiviert. Beim Plugin habe ich in den Settings “Auto-Lightbox” aktiviert (Enable Automatic).
Ich habe dann Bilder zum ersten Post hinzugefügt. Ich habe es als Medium eingefügt. Die Lightbox funktionierte nicht. Die Ursache war bei mir, dass bei Link URL nichts eingetragen ist. Hier muss die Url vom Bild eingetragen sein. Beim Editieren des Fotos gibt’s unter dem Eingabefeld den Button “Link to Image”. (Ich hab grad einen englischen Blog aufgesetzt, deswegen Englisch, aber es dürfte da sowieso nur die Hälfte eingedeutsch sein).
Seltsam ist, dass bei meinen anderen Blogs, die von 2.7.x auf 2.8 upgedatet wurden der Link zum Bild scheinbar automatisch hinzugefügt wird. Falls ich herausfinde warum, kann ich’s noch posten.
Anschließend hat die Lightbox funktioniert. Ich hab dann noch meine zwei geändeten Files eingespielt und das Auto-Resize hat funktioniert.
Übrigens: Um den Text unter dem Foto bei der Lightbox festzulegen muss man unter Advance Link Settings den Title setzen.
Das Problem mit der Lightbox liegt also nicht an meiner Erweiterung sondern an Wordpress bzw. dem Lightbox-Plugin selbst. Vielleicht findet man mit Google dazu etwas mehr. Z.B. hier (aber auch keine wirkliche Lösung): http://forum.wordpress-deutschland.org/plugins-und-widgets/43849-wp-lightbox-klappt-nicht-mehr.html
Vielleicht auch hier: http://wordpress.org/tags/lightbox-2-wordpress-plugin
28. Mai 2009 um 01:46
Ich habe jetzt gleich beim Hinzufügen eines Fotos auf den Button unterhalb des Link-Textfeldes “File URL” geklickt. Jetzt übernimmt er bei neuen Bildern automatisch den Link.
28. Mai 2009 um 16:01
[...] [German version available: Lightbox 2 mit Auto-Resize in Wordpress] [...]
28. Mai 2009 um 17:53
[...] Artikel über das Auto-Resize für die Lightbox 2 in Wordpress scheint so ein Artikel zu sein. Ich habe daher auch eine englische Version des Blogs aufgesetzt und [...]
28. Mai 2009 um 05:56
hallo super sache! klappt bei mir auch bestenst.
eine frage . kann man das resize script auch irgendwie in die nextgen galerie einbauen? da fehlt mir die funktion nämlich für netbooks..
28. Mai 2009 um 13:01
Ich habe mir die NextGen Gallery noch nie angesehen. Leider kann ich daher nicht sagen, ob sich das dort einbauen lässt.
28. Mai 2009 um 18:27
Hi there,
echt geile Sache, genau das hab ich gesucht.
übelst dicken fetten DANK!!!
NOOX ROCKZ
28. Mai 2009 um 04:29
Hallo,
vielen Dank für das Auto-Resize Lightbox Script. Ich verwende es ohne Wordpress mit Joomla zusammen.
Endlich mal eines das ohne Macken funktioniert. Ich hab leider nur ein kleines Problem: Im Internet Explorer 6.0 bedeckt das Overlay nicht den gesamten Hintergrund. Der Hintergrund fängt erst unter dem Foto an. Ich habe im css die #Overlay-Angabe #overlay{ position: absolute;} in #overlay{ position: fixed;} geändert, aber jetzt bleibt ein etwa 20px breiter Streifen an der rechten Seite frei. Auch werden Fotos manchmal mit einem weißen Hintergrund in Überbreite angezeigt.
Ehrlich gesagt, ich bin etwas ratlos…
Vielen Dank für die Hilfe…
Fabian
28. Mai 2009 um 00:17
[...] habe für mich die ideale Lösung gefunden, und zwar auf noox bloggt! Er hat das vorhandene Lightbox-Plugin von Giuseppe Argento gepimped; Nach der Installation des [...]
28. Mai 2009 um 00:58
Genial!
was noch fehlt: Man könnte noch einen Button in die lightbox integrieren, damit man von der ans Fenster angepassten Version zum originalen Vollbild wechseln kann! Wäre das irgendwie möglich?
mfg
28. Mai 2009 um 01:37
Stimmt, Firefox und Chrome zeigen die Menüpunkte “Grafik anzeigen” etc. nur beim Laden des Bildes kurz an. Dann düften andere Layer drüber liegen. Selbst bin ich aber grafisch nicht sehr bewandt, um so einen Button einzubauen, der dann auch was hermacht.
28. Mai 2009 um 04:13
Vielen Dank, funktioniert wie ne Eins!
in IE 6-8 Firefox und Opera
Danke nochmal
*thumbsup*