UPDATE: TYPO3/WordPress: Bildergalerie mit LightBox JS

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

Kommentare

Äh bitte! Was da noch alles hervorkommt nach langer Zeit xD

Mittlerweile schaut die Browserstatistik, die ich oben gepostet habe, natürlich ganz anders aus.

Leider habe ich gerade keinen Zugriff mehr auf die obigen Daten aber auf eine andere Seite.

Dort gibt es aber leider nicht denselben Besucherumfang und auch nicht Typ.

Jan 2012:

1 Chrome 684 31,90 %

2 Safari 558 26,03 %

3 Internet Explorer 8 222 10,35 %

4 Firefox 3 111 5,18 %

5 iPhone 184 8,58 %

6 Internet Explorer 9 101 4,71 %

7 Internet Explorer 7 70 3,26 %

8 Internet Explorer 6 138 6,44 %

9 Firefox 6 22 1,03 %

10 iPad 15 0,70 %

11 Opera 15 0,70 %

12 Firefox 4 7 0,33 %

13 Internet Explorer 5 6 0,28 %

14 Firefox 7 4 0,19 %

15 Firefox 5 3 0,14 %

16 Firefox 1 1 0,05 %

17 Internet Explorer 4 1 0,05 %

18 Internet Explorer 3 1 0,05 %

19 Internet Explorer 2 1 0,05 %

Feb 2012:

1 Chrome 586 31,95 %

2 Internet Explorer 9 364 19,85 %

3 Safari 298 16,25 %

4 Internet Explorer 8 136 7,42 %

5 Internet Explorer 6 149 8,12 %

6 iPhone 86 4,69 %

7 Internet Explorer 7 68 3,71 %

8 iPad 29 1,58 %

9 Opera 28 1,53 %

10 Firefox 3 42 2,29 %

11 Internet Explorer 5 16 0,87 %

12 Firefox 6 13 0,71 %

13 Firefox 4 7 0,38 %

14 Firefox 5 5 0,27 %

15 Firefox 1 2 0,11 %

16 BlackBerry 2 0,11 %

17 Internet Explorer 2 2 0,11 %

18 Internet Explorer 3 1 0,05 %

SUM 1834 100 %

Bei gewissen Einträgen hier frag ich mich. Vor allem die untersten oO

Die LightBox ist echt klasse. Schöne Anleitung. @Fix, Danke für deine Ergänzung, so muss ich nicht alle Browser ausprobieren.

Danke

@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!

@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

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%

@web Agentur: dieser artikel ist ja auch schon ein bisschen älter. inzwischen existieren diese probleme nicht mehr.

Grüße // tom

Bei mir funtzt die Lightbox in jedem Browser. Welche Version benutzt Du?

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 :-(

hallo

bei mir funktioniert die lightbox im explorer 7??

gruss

SAndra

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

[...] f&#252;r das Wordpress-Plugin das Skript Lightbox 2. Der Spass ist allerdings f&#252;r Benutzer des Internet Explorers in der Version 7 (die soll es tats&#228;chlich geben) etwas getr&#252;bt. Es gibt auch Leute, die der Ansicht sind, der Internet Explorer geh&#246;re verboten. Die [...]

Das IE-Verbot unterstüze ich ... Bringt trotzdem Spass die Galerie, mit dem richtigen Browser. Danke für den Hinweis.

GreyBox sieht auch schick aus...

..., die Frage ist, ist GreyBox im Gegensatz zu LightBox kompatibel zu jQuery?

Wenn ihr auf die LightBox steht, werdet ihr mit Sicherheit die Grey Box (<a href="http://orangoo.com/labs/GreyBox/" title="Link zu GreyBox" target="_blank">http://orangoo.com/labs/GreyBox/</a> ) lieben.

Ich setze sie seit einiger Zeit in den verschiedensten Projekten zuverl&auml;ssig ein.


Kommentar schreiben

* Diese Felder sind erforderlich