UPDATE: TYPO3/WordPress: Bildergalerie mit LightBox JS
9. Februar 2009Die LightBox JS von Lokesh Dhakar ist so ziemlich das schickste was im Netz als Bildergalerie unterwegs ist. Unsere Undkonsortenherzen springen immer wieder, wenn wir dieses Plugin am Laufen sehen.
Und das schönste daran ist, dass fleißige OpenSource-Arbeitstiere fleißig Plugins getippt haben, die die LightBox sowohl in TYPO3 als auch in WordPress einbinden. (Update ganz unten!)
WordPress mit LightBox // 05. Mai 2007
UPDATE 30.12.2009: Mit Wordpress 2.9. läuft die MyGallery-Extension nicht mehr. Der Entwickler will vielleicht im nächsten Jahr eine Alternative anbieten, sagt er auf seinem Blog wildbits.com.
Für WordPress hat sich Thomas Boley mit der Plugin MyGallery hohe Ehren verdient. Es eröffnet einen neuen Menüpunkt MyGallery, bei dem man die Bilder direkt als zip-Datei gepackt hochladen kann, besonders praktisch, wenn man unterwegs ist und im Internet-Café schnell mal die neuesten 30 Bilder hochladen will. Einer unserer Kunden nannte das Einstellung-Menü ein “Optionen-Overkill”. Wichtig ist, dass man unter den vielen Optionen die LightBox einschaltet und die Welt wird schön. Außerdem hat mal ausnahmsweise jemand eine vernünftige Doku geschrieben, so dass ich mit hier viel Beschreibung sparen kann. Probleme scheint es einfach nicht zu geben.
Zur Installation einfach schnell das Plugin herunterladen, per ftp die Dateien in das WordPress-Plugin-Verzeichnis schieben. Dann gleich noch im wp-content-Ordner einen neuen Ordner namens /mygallery erstellen und mit CHMOD dessen Rechte auf 777 setzen. Dann in der WordPress-Redaktionsoberfläche unter Plugins das Plugin aktivieren. Fertig!
Mit dem Plugin lassen sich auch Bildtitel bearbeiten und in die LigthBox einfügen. Ein wirklich schönes, gelungenes Plugin.
Achtung: Sicherheitslücke:: Das Plugin MyGallery V. 1.2.1 besitzt eine Sicherheitslücke, die am 29.04.2007 auf milw0rm.com publiziert wurde. Ein Update ist deswegen unbedingt erforderlich!
TYPO3 mit LightBox
Für Typo3 gibt es die Extension KJ: Image Lightbox v2 von Christian Jul Jensen (Homepage des Projekts). Einfach die Extension von der TYPO3-Extension Repository herunterladen , installieren und (WICHTIG!!!!) im Template-Setup der Root-Seite bei include static (from extensions) die LightBox als als Objekt hinzufügen. Dann muss man, gleich dort, noch ein wenig TypoScript hinzufügen:
page.20 = IMAGE
#PAGE 20 steht für das Inhaltselement Bild mit Text
page.20 {
file = typo3temp/pics/92155cb1ea.jpg
imageLightbox2 = 1
imageLightbox2.imageset = myImgSet
imageLightbox2.caption= I am a imagecaption
imageLightbox2.saveImageShow = 1
imageLightbox2.printImageShow = 1
imageLightbox2.presentMode = 1
}
#PAGE 30 steht für das Inhaltselement Nur Bilder
page.30 < .page.20
page.30.file = typo3temp/pics/0ef7e23f2a.jpg
page.30.file.imageLightbox2.caption= I am another imagecaption
page.30.imageLightbox2.printImageShow = 0
page.30.imageLightbox2.presentMode = 1
und schon kann man bei den Seiteninhaltselementen “Bild mit Text” und “Nur Bild” die Anzeige mit der LightBox aktivieren, speichern, schnell die Seite anschauen und sich freuen!
Frohes Bilderschauen!
Neue, ernsthafte Probleme (Nachtrag)
Gerade erst bemerkt: Die LightBox, aber auch die GreyBox oder auch das hier installierte SnapTool, laufen alle nicht mit dem InternetExplorer 7.0. Ich sehe hier drei Lösungen: Erstens: Man verbietet einfach den InternetExplorer. Damit wären (fast) alle glücklich und man kann die schicken Tools weiterbenutzen. Zweitens: Falls sich nicht alle dem Verbot beugen wollen, kann man die LightBox einfach nicht mehr verwenden. Schade, aber wahr. Drittens: Man baut den GalleryCode manuell in den Header ein und baut eine Browserweiche drum. Wobei ich mich eigentlich weigere, noch mit Browserweichen zu arbeiten….
Wie auch immer, solange man im InterntExplorer einen diesen Bug erzeugt und es dazu führt, dass man die Bilder nicht angezeigt bekommt, kann man das Tool halt nicht verwenden. Denn höchstes Ziel ist es – noch mehr als schicke Tools einzubauen – dass jeder mit jedem Browser alles sehen kann.
Jetzt könnte man noch eine Diskussion über den InternetExplorer für den Mac starten, aber lassen wir das, weil ich mich dann innerlich immer so aufrege und heute ist doch Sonntag…
Weiterführende Links:
- LiteBox und SlimBox : die schlanken Nachfolger LightBox
- GreyBox: ebenfalls eine schicke AJAX-Galerie
- Ein Dr.Web-Artikel mit AJAX-Galerien
** UPDATE // 09. Februar 2009 **
1: Die LightBox Clone Matrix ist einen sehr gute Zusammenstellung bestehender Lightbox-Clones. Die Seite ist insbesondere dann hilfreich, wenn man schon eine JavaScript-Bibliothek (Mootools, jQuery etc.) nutzt und braucht nun eine LightBox, die zu dieser Bibliothek kompatibel ist.
2: Ansonsten hat auch Georg Ringer auf seiner Seite rggooglemap.com in der Zwischenzeit viele interessante TYPO3-Extensions auf LightBox-Basis und mit anderen MooTools-Funktionen veröffentlicht. Es lohnt sich, auf jeden Fall, auf der Seite mal ein wenig herumzuklicken und sich die Extensions anzuschauen.







27. Januar 2007, 08:26 Uhr
Wenn ihr auf die LightBox steht, werdet ihr mit Sicherheit die Grey Box (http://orangoo.com/labs/GreyBox/ ) lieben.
Ich setze sie seit einiger Zeit in den verschiedensten Projekten zuverlässig ein.
15. August 2007, 13:39 Uhr
GreyBox sieht auch schick aus…
…, die Frage ist, ist GreyBox im Gegensatz zu LightBox kompatibel zu jQuery?
30. August 2007, 15:05 Uhr
Das IE-Verbot unterstüze ich … Bringt trotzdem Spass die Galerie, mit dem richtigen Browser. Danke für den Hinweis.
30. August 2007, 18:36 Uhr
[...] für das Wordpress-Plugin das Skript Lightbox 2. Der Spass ist allerdings für Benutzer des Internet Explorers in der Version 7 (die soll es tatsächlich geben) etwas getrübt. Es gibt auch Leute, die der Ansicht sind, der Internet Explorer gehöre verboten. Die [...]
6. Februar 2008, 16:45 Uhr
Hallo ….
ich bin so zu sagen ziemlich unerfahren im Umgang mit der Lightbox, natürlich möchte aber auch ich, in meinem Blog meine Fotos präsentieren und das nicht irgendwie, sondern besonders schön. Also mit der Lightbox. Ich führe ein Wordpress Blog und habe auch oben in der Leiste Lightbox JS stehen, wenn ich einen neuen Beitrag schreibe, leider bin ich blond und weis nicht, welche Adresse und so ich da eintragen soll, wenn ich dazu aufgefordert werde
“Adresse zum Bild (erforderlich)”
Bitte nicht lachen, kann mir da jemand weiter helfen?
Schon mal vielen Dank!
Bebiekatze
18. April 2008, 13:10 Uhr
hallo
bei mir funktioniert die lightbox im explorer 7??
gruss
SAndra
9. Juli 2008, 18:40 Uhr
Hallo,
benutze auch die lightbox und habe auch festgestellt, das diese nicht unter ie7 läuft. Gibt es mittlerweile eine Lösung dazu. Und ja – für wegdesigner ist das mal wieder ganz toll
8. Oktober 2008, 14:25 Uhr
Bei mir funtzt die Lightbox in jedem Browser. Welche Version benutzt Du?
11. Oktober 2008, 15:11 Uhr
@web Agentur: dieser artikel ist ja auch schon ein bisschen älter. inzwischen existieren diese probleme nicht mehr.
Grüße // tom
9. Februar 2009, 08:34 Uhr
ich weiss nicht, was ihr habt. funktioniert doch alles wunderbar im ie7/vista64.
p.s. so viel zu ie verbieten:
MSIE 112599 98%
Msie 7.0 111347 96.90%
Msie 6.0 1250 1%
Msie 5.01 1 0%
Msie 5.00 1 0%
FIREFOX 432 0.30%
Firefox 3.0.6 12 0%
Firefox 3.0.5 407 0.30%
Firefox 3.0.1 1 0%
Firefox 2.0.0.17 11 0%
Firefox 1.5.0.1 1 0%
Sonstige 1775 1.50%
Unbekannt 1567 1.30%
Safari 204 0.10%
Mozilla 2 0%
Opera 1 0%
Wget 1 0%
9. Februar 2009, 09:48 Uhr
@FIX:
Jaja – damals, als dieser Artikel geschrieben wurde, war der IE7 auch noch ein Frischling.
Ansonsten, aber zumindest ein wenig ermutigende Statistiken was die IE6-Verbreitung anbetriftt. Ich freue mich auf den Tag, an dem Kunden keine IE6-Kompatibilität mehr in ihre Angebotsanforderungen schreiben.
Sind das Deine eigenen Site-Statistiken?
Grüße // Thomas Alboth
9. Februar 2009, 17:43 Uhr
@Thomas Alboth:
sorry habe den comment, dass das problem mittlerweile behoben ist, erst gesehen, nachdem ich meinen comment schon abgeschickt hatte.
die statistiken sind nicht von mir, sondern von einer kundenseite, die wir in typo3 umgebaut haben und betreuen (kantonale wirtschaftsförderung; da sind also hauptsächlich normale durchschnittsnutzer drauf und nicht irgendwelche “technisch höher stehenden”).
p.s. eure blogs hier sind super, haben mir schon einige male weitergeholfen in typo3
danke!