Bilder schöner präsentieren

Ist das private Weblog von Vladimir Simovic mit Berichten zum Thema WordPress, Webwork, und Internet. Ich wohne in Köln und arbeite als freier Webworker, Blogger und Autor.

Bilder schöner präsentieren

Perun am 09. Mai 2007 um 15:57 Uhr

Eins der Themengebiete, vor dem ich mich bis neulich erfolgreich gedrückt habe, war das Thema Lightbox. Für die die es nicht wissen: es geht u.a. darum die Präsentation der Bilder durch Javascript zu verschönern und mit einfachen Mitteln rudimentäre Galerien mit netten Effekten zu realisieren.

Als ich das Layout für Herr der Ringe-Weblog erstellt hatte, habe ich mich entschlossen auch dieses Thema anzugehen, da ich das neue Weblog u.a. deswegen gestartet habe um mich mit neuen Themen zu beschäftigen. Für Wordpress-Blogs gibt es jede Menge Lightbox-Plugins und ich habe vier getestet. Am meisten hat mir aber Thickbox zugesagt, es ist schlank, leicht anzupassen und mein Bauch hat gesagt: "nimm dieses Plugin" :-).

Wie alle Plugins ist auch dieses einfach zu installieren: einfach den Ordner hochladen und das Plugin aktivieren. Die Anpassungen nimmt man entweder in der CSS-Datei (thickbox.css) vor oder in der Javascript-Datei (thickbox.js) wenn man z.B. die Bezeichnungen anpassen oder eindeutschen will.

Wenn man dann den Lightbox bei den Bildern einfügen will, dann muss man nur class="thickbox" einfügen:

<a href="..." class="thickbox" title="..."><img src="..." alt="..." /></a>

Und schon hat man einen kleinen und netten JS-Effekt wenn man das Bild aufruft und der Wert bzw. der Inhalt des title-Attributs dient als die sichtbare Beschreibung des Bildes. Hat man mehrere Bilder zu einem Thema innerhalb des Beitrages und man will diese Bilder zu einer Art Galerie verknüpfen, dann schaut der Code folgendermaßen aus:

<a href="..." class="thickbox" title="..." rel="galerie-name"><img src="..." alt="..." /></a>

Mit dem Attribut rel und dem eindeutigen Wert (der bei den zu verknüpfenenden Bildern identisch sein muss) erreicht man, dass das Skript die einzelnen Bilder durch ein "Weiter"- bzw. "Zurück"-Link verbindet. Hier zwei Beispiele: Beispiel 1 und Beispiel 2

12 Kommentare »»

1. – peter

Kommentar vom 09. Mai 2007 um 16:30

Gibt es ein schönes Plugin mit dem man die Bilder in beliebigen Thumbnailgrößen einstellen kann und automatisch so eine 4×4 Matrix mit Bildern hinbekommt?
2. – Andreas

Kommentar vom 09. Mai 2007 um 17:05

Ich finde es gut. Es ist dezent (so gefällt es mir z.B. überhaupt nicht - da finde ich es zu aufdringlich) und funktioniert im Zweifelsfalle auch ohne JS…
3. – kiesow

Kommentar vom 09. Mai 2007 um 17:59

thickbox ist nur leider nicht kompatible zur lightbox, weshalb man dann alle beiträge mit bildern nachträglich nochmal ändern müsste
4. – Hobby

Kommentar vom 09. Mai 2007 um 19:39

Es gibt auch noch andere alternativen um Bilder schön anzuzeigen.
Ich hab vor kurzem mal GreyBox getestet.
Ist eigentlich fast das Gleiche, aber man kann auch Webseiten anzeigen lassen …
5. – andreas

Kommentar vom 09. Mai 2007 um 23:41

Is ja alles ganz hübsch. Ich finde die Performance dieser Scripte lässt einiges zu wünschen übrig.
Habe mich noch nicht damit beschäftigt. Vielleicht kann man ja beim Tempo etwas im Script ändern?

Andreas
6. – Daniel

Kommentar vom 10. Mai 2007 um 18:03

Ja, die Lightbox *schwärm* … hatte damit schon vor meinen ersten Gehversuchen mit Wordpress im Einsatz und bin noch immer begeistert. Ich habe bisher wirklich noch nichts gefunden, was eine schönere Präsentation der Bilder liefert und dabei noch so leicht einzusetzen ist.
7. – Martin

Kommentar vom 10. Mai 2007 um 21:30

Ich finde das ziemlich nervig, wenn man immer auf die Bilder warten muss, bis sie geladen sind (ja, mit DSL); wenn dann auch noch diese nutzlose Animation kommt, kann man die Zeit dazu gut nutzen, den Mauszeiger Richtung Tab-Schließen-Kreuz zu bewegen. Das Web ist doch kein Bildschirmschoner.

Wozu haben wir denn Bildkompressionsverfahren mit progressiver Darstellung?

Na wenigstens gibt es NoScript. Während in Villa Bacho noch animiert wird, bin ich in Villa Riba nach Bildansicht dank Daumentaste schon wieder zurück und sehe weiter.
8. – Tobi

Kommentar vom 15. Mai 2007 um 21:53

Die Thickbox ist gut, aber die Lightbox2 gefällt mir besser. Besonders die Navigation ist dort besser gelöst, da sich direkt per Klick in den linken oder rechten Bereich des Bildes navigieren lässt. Bei der Thickbox muss man das erst mal suchen.
9. – Kai

Kommentar vom 27. Mai 2007 um 01:05

Du scheinst ein echter Wordpress-Profi zu sein.

Wenn man in Wordpress Bilder einfügt, macht das System immer ein um das Bild. Das ist richtig nervig und ich weiß nicht wie man sowas wegbekommt.

Auch konnte ich in keinem Forum oder bei einer Suchmaschien was finden.

Vielleicht kannst du ja mal einen Beitrag dazu veröffentlichen, du weißt bestimmt wie man das wegbekommt.
10. – Daniel

Kommentar vom 08. Juni 2007 um 23:08

Ich habe vor längerem mal einen Artikel dazu übersetzt. Dort werden mehrere Lightbox-Varianten vorgestellt.
11. – Ramona

Kommentar vom 02. Mai 2008 um 21:31

Habe nun WP 2.5, das Lightbox-Plugin hatte mir meine erste Installation zerschossen. Ich hoffte, es ist bereits integriert.(?)
12. – BTTV

Kommentar vom 28. September 2008 um 23:17

Also Lightbox2 ist bei mir durchgefallen, da mit diesem Plugin auch immer die prototype.js mit 126127 KB geladen wurde. Dies hat die Performance ziemlich in den Keller gezogen.

Thickbox scheint da etwas schlanker zu sein. Gibt es die JS auch in deutscher Übersetzung? Zumindest die 2 Beispiele von oben scheinen eine deutsche Version zu nutzen.

Einen Kommentar hinterlassen

Name (erforderlich)

Mail (wird nicht veröffentlicht) (erforderlich)

Website

XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu <).

Peruns Weblog - Webwork und Internet