Bilder mit Lightbox JS auf Webseiten darstellen
31. Mai 2006 von Michael | Webmaster/CMS/Blog
Wenn ich größere Bilder wie etwa Screenshots auf Software Guide einbinde und der Besucher auf den Link klickt, wird (bei aktiviertem JavaScript) ein Fortschrittsanzeige gezeigt bis das Bild geladen ist und dann das Bild in einem eigenen ‘Fenster’ angezeigt. Immer wieder erhalte ich Anfragen per Mail / Kontaktformular, wie das funktioniert.
- Test-Link (aktiviertes JavaScript erforderlich)
Ich verwende dazu Lightbox JS 1.0, dort kann das ganze auch getestet werden.
Die Integration in eigene Webseiten ist sehr einfach: einfach im head-Bereich das JavaScript einbinden, Details hierzu siehe auf der Lightbox-Webseite. Im Link selbst verwendet man dann rel="lightbox", damit das JavaScript den Code beim Anklicken anwendet.
Ich empfehle allerdings nicht die neue Version Lightbox JS 2.0 zu verwenden. Diese kommt zwar noch schicker als die erste Version rüber, aber benötigt mit 150 KB fast das 10-fache an Speicherplatz, davon alleine 100 KB JavaScript-Code welcher von den Besuchern immer geladen wird, selbst wenn sie nie ein solches Bild öffnen. Mit einer ISDN-Verbindung dauert es also um die 20 Sekunden (!), bis der JavaScript – Schnick-Schnack geladen ist; damit ist das m.E. absolut inakzeptabel für Besucher. Der JavaScript-Code von Lightbox 1 ist dagegen nur 12 KB groß.
Was ist ein Trackback?
1 Trackback/Ping:
1
Bastie's Blog
Trackback vom 8. Juni 2006, 12:24
Bilder einbinden... Nach der Anleitung von SW-Guide, wo ich mir übrigens noch einiges mehr abgeschaut habe, (Danke dafür). Gibts eine schöne Anleitung um Bilder einzubinden. Bei…
7 Comments:
1
Mike Schnoor
2. Juni 2006, 22:02
Genauso sehe ich es auch – bei mir ist die Lightbox 2 verbannt, weil sie für meinen Geschmack und das täglich Bloggen zu groß ist. Der Funktionsumfang ist zwar recht ansehnlich, jedoch ist der Nutzen im Vergleich mit der ursprünglichen Lightbox nicht größer als bisher. Und die Gallery-Features brauche ich eher sehr sehr selten… ;)
2
Michael (Author)
2. Juni 2006, 23:39
Danke Mike. Hab schon gedacht, ich stehe alleine da mit meiner Meinung, da immer alle auf Lightbox 2 plädieren, was ich nie verstanden habe.
@All, hier noch 2 Links zur Ergänzung:
3
Horst
28. August 2007, 10:20
hallo,
gibts eigentlich auch ne deutsche anleitung zum einbau in webseiten.
horst
4
Michael (Author)
31. August 2007, 13:59
Ist mir jetzt nicht bekannt, Horst. Aber es findet sich sicherlich in einschlägigen Webmaster/HTML/JS/usw. – Foren ein Freiwilliger, der Dir erklären kann, wie Du das einbaust ;)
5
Anett
19. September 2007, 8:57
Habe die Lightbox in meine Website integriert. Im IE funktioniert sie einwandfrei. Im Mozilla jedoch lassen sich weder die Bilder anklicken, noch öffnet sich das Bild.
Weiß jemand vielleicht, woran´s liegt?
6
firehorse
10. Oktober 2007, 7:42
@Anett
http://xhtmlforum.de/
Und etwas mehr Info ist immer nützlich. Hellsehen kann man sellbst im 21Jh. noch nicht ;)
@ALL
Warum eigentlich Lightbox und nicht gleich Thickbox?
Hier ergeben sich mehr Funktionen und gute Beschreibungen gibt es dazu auch. Also statt Lightbox2.0 lieber Thickbox!
7
Felix
13. Dezember 2007, 12:10
Ich find das Script super und bei mir gehts auch in Mozilla!
Die Kommentarmöglichkeit ist derzeit für diesen Artikel ausgeschaltet.