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

1. Download und Installation des Wordpress-Plugins von Giuseppe Argento: Lightbox 2 v2.0.2.
2. Download von lightbox.css. Diese soll die CSS-Datei unter wp-content\plugins\lightbox-2-wordpress-plugin\lightbox\css ersetzen.
3. 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.