WordPress & Webwork

Bilder schöner präsentieren

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

13 Reaktion(en)

  1. peter

    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

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

    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

  4. Daniel

    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.

  5. Martin

    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.

  6. Tobi

    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.

  7. Kai

    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.

  8. Ramona

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

  9. BTTV

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

  10. Hafijohnny

    Hallo,
    ich habe mir gerade die Thickbox Installiert, es funktioniert auch wunderbar, aber ich habe in meinem Seiteninhalt einige Textzeilen die Eingerückt sein sollten, aber seit ich die Tickbox Installiert habe funktioniert das nicht mehr!
    kann mir da jemand helfen?

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!