Software Guide

Die besten Tipps, Anleitungen und Downloads

Ihre Werbung auf Software Guide

Sie möchten in dieser Box oder an anderer Stelle dieser Webseiten eine Werbung schalten? Sehen Sie sich dazu am besten einfach mal die verschiedenen Möglichkeiten an.


Bilder mit Lightbox JS auf Webseiten darstellen

31. Mai 2006 von Michael | Webmaster/CMS/Blog

LightboxWenn 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ß.

Informationen zum Artikel:

Weiterblättern im Blog:

Was ist ein Trackback?

1 Trackback/Ping:

  • 1

    Bastie's Blog

    Trackback vom 8. Juni 2006, 12:24


    Fatal error: Uncaught Error: Call to undefined function eregi_replace() in /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/functions.theme.php:465 Stack trace: #0 /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/comments.php(84): swg_formatCommentExcerpt('<strong>Bilder ...', 180) #1 /kunden/151212_80993/webseiten/wp/wp-includes/comment-template.php(1471): require('/kunden/151212_...') #2 /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/index.php(148): comments_template() #3 /kunden/151212_80993/webseiten/wp/wp-includes/template-loader.php(74): include('/kunden/151212_...') #4 /kunden/151212_80993/webseiten/wp/wp-blog-header.php(19): require_once('/kunden/151212_...') #5 /kunden/151212_80993/webseiten/wp/index.php(17): require('/kunden/151212_...') #6 {main} thrown in /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/functions.theme.php on line 465