Javascript
Vergrößern von Bildern mit Lightbox JS
(klicken zum vergrößern)Vor ein paar Tagen habe ich in
Michael Preidels Blog einen Beitrag über ein seiner Meinung nach phantastisches Javascript zum Vergrößern von Bildern auf einer Web-Seite entdeckt:
Lightbox JS, entwickelt von Lokesh Dhakar. Das Ding ist jedoch nicht nur phantastisch, sondern schlichtweg genial!
Jeder Webmaster macht sich irgendwann einmal Gedanken, wie er es zustande bringt, Bilder in Originalgröße auf seine Seite zu bekommen, ohne das Layout zu sprengen. Meist artet das dann in sich öffnende Popups aus. Dhakar hat ein kleines Javascript geschrieben, das das anzuzeigende Bild einfach auf die aktuelle Seite legt und den Rest der Seite im Schatten verschwinden lässt. Einfach mal auf das Bild rechts klicken und staunen...
Das geniale an dem Script ist, dass man seinen HTML-Code schreibt wie immer:
<a ...><img...></a>. Lediglich der Link bekommt ein festgelegtes REL-Attribut verpasst:
rel="lightbox". Den Rest erledigt das in den HTML-Code eingebundene Javascript und eine transparente PNG-Datei. Das Ganze funktioniert sogar mit einem kleinen CSS-Hack im Internet Explorer 6, auch wenn dieser mit der korrekten Anzeige von Formularfeldern Probleme hat.
Das Ende der Popup-Fenster für Bilder ist nah!