Webkrauts: Für mehr Qualität im Web.

Artikel

Lightboxen – das neue Popup?

Ein pfiffiges Javascript hat einen erstaunlichen Siegeszug hinter sich: die Lightbox. Ursprünglich erstellt, um Bilder in einer besonderen Art zu präsentieren, hat das ursprüngliche Lightboxskript von Lokesh Dhakar mittlerweile sehr viele Nachahmer gefunden.

Eine Lightbox ist eine Art Popup, ohne ein neues Fenster öffnen zu müssen. Das Skript erstellt einen Container, in den dann Inhalte geladen bzw. geschrieben werden. Dabei wird die Aufmerksamkeit auf dieses Fenster gelegt, das über der Seite zu schweben scheint. Oft geschieht dies durch ein Abdunkeln der Seite, der Fantasie sind aber kaum Grenzen gesetzt.

Hauptsächlich werden Lightboxen für die Darstellung von Bildern oder kleinen Bildergalerien genutzt. Die Verwendungsmöglichkeiten sind jedoch mittlerweile prinzipiell unbegrenzt, denn es gibt auch Lösungen, die komplette Webseiten, auch von anderen Servern, in einem Fenster darstellen. So kann man ohne Probleme ein Loginformular für den Zugang zu einem geschützten Bereich in einer Lightbox öffnen. Nach der korrekten Identifizierung wird man dann in den geschützten Bereich weitergeleitet, wie man das auch bisher schon gewohnt ist.

Ablösung des Popup?

Popups waren in den Anfangszeiten des Web sehr beliebt. Doch spätestens seit dem letzten großen Sicherheitsupdate des IE6 und seit den letzten Firefox-Versionen können sich Webentwickler nicht mehr auf deren Funktionsfähigkeit verlassen. Popup-Blocker machen es schwer, die kleinen nervigen Fenstern zu öffnen. Meist werden Popups aus zwei Gründen eingesetzt:

1. Der darzustellenden Inhalt ist entweder zu kümmerlich, um in einem normalen Browserfenster zu wirken oder er soll bewußt ein ganz spezielles Layout bekommen.
2. Der Inhalt des Hauptfensters soll nicht verschwinden.

Beide Ansätze werden auch von einer Lightbox zufrieden gestellt. Dabei stört kein Popup-Blocker.

Das intelligentere Popup

Leider ist das Wissen um intelligentes "unobtrusive Javascript" sehr dünn gesät, deshalb öffnen sich Popups oft nicht, wenn Javascript ausgeschaltet ist. Lightboxen kann dies nicht passieren. Alle Lightboxvarianten, die ich kenne, machen auch den Inhalt bei ausgeschaltetem Javascript zugänglich. Der Grund hierfür liegt in der Einbindung. Der Link zur neuen Seite wird hierbei nicht in das Javascript geschrieben, wie es auch heute noch die übliche Vorgehensweise bei Popups ist. Man verlinkt hingegen ganz normal eine Seite. Die Lightbox wird erst durch ein zusätzliches Attribut im Link erstellt, das kann, je nachdem welche Lightboxart eingesetzt wird, eine Klasse sein oder das rel-Attribut. Es kann sein, daß die Größe der Lightbox durch ein an den Link angehängtes Parameterpaar bestimmt wird. Die Lösungen sind vielfältig und man sollte vor der Integration einer Lightbox alle zur Verfügung stehenden Möglichkeiten sichten. Je nach Anwendungsgebiet können nämlich möglicherweise einige Lösungsansätze unpraktisch oder unmöglich sein.

Hat ein Surfer nun Javascript augeschaltet, bleibt die verlinkte Seite trotzdem zugänglich und öffnet sich ganz normal im Browserfenster. Der gewünschte Effekt ist nicht da – weil Javascript fehlt -, der Inhalt hingegen kann gelesen bzw. betrachtet werden und nur darauf kommt es am Ende doch an.

Alles eitel Sonnenschein?

Das hört sich ja alles klasse an, aber ist es das auch? Nein, auf keinen Fall. Die Lightboxtechnik hat Vor- und Nachteile.

Vorteile

• von Popup-Blockern nicht betroffen
• "eingebaute" Zugänglichkeit der Inhalte bei ausgeschaltetem Javascript
• netter Effekt, nette Optik, liegt voll im Trend

Nachteile

• Das benötigte Javascript ist wesentlich umfangreicher, als bei einem Popup, das man auch zugänglich erstellen könnte, wenn man wollte.
• Lightboxen liegen im Trend und verleiten dadurch zu übermäßiger Nutzung.
• Den Inhalt einer Lightbox kann man nicht immer ausdrucken.
• Es gibt Lösungen, deren Inhalte schon beim Laden der Seite versteckt existieren. Das bläht die Seite unnötig auf, denn wer weiß, ob der Surfer auch auf den Link zur Lightbox klickt.

Unterschiedliche Realisierung

Es gibt nicht DIE Lightbox, mehr kann man eventuell von der Lightboxtechnik reden. Es gibt viele unterschiedliche Realisierungen dieser Idee. Es kann eine Zeit dauern, bis man selber gemerkt hat, welche Umsetzung den eigenen Ansprüchen am ehesten genügt. Das ursprüngliche Skript, das mittlerweile in Version 2 vorliegt, kann beispielsweise nur Bilder anzeigen. Die meisten Modifikationen können auch Webseiten anzeígen. Doch gerade bei diesem Feature sollte man aufpassen. Generell gibt es die Möglichkeit, eine andere Seite mit oder ohne iframe zu integrieren. Mein Versuch, dies ohne iframe zu tun führte zu zwei erstaunlichen Ergebnissen:

1. Die einzubindende Seite konnte keine komplette HTML-Seite sein, sondern bestand nur aus dem Inhalt des Body. Dies ist dann sehr schlecht, wenn die Seite dank ausgeschaltetem Javascript als eigene Seite angezeigt werden soll.
2. Die Lightbox ließ sich nicht ausdrucken.

Die gefundene Lösung ist die Ansteuerung via iframe.

Ein weiterer wesentlicher Unterschied zwischen den verschiedenen Varianten ist die Nutzung fertiger Javascript-Bibliotheken und das Gesamtgewicht der Javascript-Dateien. Das genutzte CSS ist bei jeder Version schmal und zudem individuell erweiterbar. Die Javascript-Dateien hingegen werden nicht mehr verändert. So nutzt Lightbox V 2.0 prototype und Scriptaculous. Thickbox hingegen setzt auf jquery. Die erste Variante benötigt allein 100 KB an Javascripten, die letztere hingegen nur 30.

Fazit

Lightboxen sind für mich eine angenehmere Form des Popups, man sollte sie allerdings bewußt und sparsam einsetzen. Schnell hat man sich an den Effekten satt gesehen. Auf alle Fälle sollte man sich viele unterschiedlichen Varianten anschauen und immer die Größe der notwendigen Javascripte im Hinterkopf haben. Nur um einen netten Effekt zu erzeugen die Seite um 100 KB aufzublähen ist schon recht gewagt und fällt nur bei einer DSL-Verbindung nicht auf.

Weiterführende Links

• kompakte und leicht kommentierte Übersicht über (wahrscheinlich) alle Lightbox-Varianten .
• unfangreiches deutschsprachiges Lightbox-Tutorial .
• Tag "Lightbox" bei ma.gnolia .
• Tag "Lightbox" bei Mister Wong .

Zum Autor

Jens Grochtdreis arbeitet als "Senior Frontend Entwickler" bei den SinnerSchraderStudios in Frankfurt. Neben seinem Weblog betreut er auch die CSS-FAQ und setzt sich mit den Webkrauts für moderne, standardkonforme Webseiten ein.

Info:

Lightboxen – das neue Popup? ist Beitrag Nr. 85

Autor:

Jens Grochtdreis am 13. Dezember 2006 um 00:10

Kategorie:

Adventskalender 2006

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   un saludo – ein schoener artikel .
   auch ich habe mich ein wenig mit diesem thema auseinander gesetzt, vielmehr gefaellt mir diese graeyboxvariante mit der option des einbindens eines ifFrames.

   wie es hier schon zu lesen besteht in der tat der latente hang zum "satt gesehen" . dennoch ist und bleibt es aus meiner sicht eine optisch schoene moeglichkeit selbiges script in portfoilio_pages einzusetzen.

   Kommentar von pierro - 13. Dezember 2006 um 02:36

2. 2.
   

   Interessant, dass dieser Artikel gerade jetzt erschienen ist, wo ich zum ersten Mal mit slimbox herumgespielt habe…

   Kommentar von Michael - 13. Dezember 2006 um 09:34

3. 3.
   

   Weitere Nachteile:
   - Auf älteren Rechnern (z.B. 800MHz) beanspruchen die Boxen eine Menge Leistung und sind zu langsam oder garnicht brauchbar.
   - Einige Version der Boxen blenden im Opera auch nicht immer das komplette Bild ein, sondern bleiben ca. bei der Hälfte stehen.

   Kommentar von Kaiuwe - 13. Dezember 2006 um 10:06

4. 4.
   

   Popup-Blocker waren meiner Wahrnehmung nach eigentlich nie ein Problem, weil sie intelligent genug waren, um nur unerwünschte, automatische Popups zu filtern. Dennoch sind Popups zurecht aus der Mode gekommen, denn sie sind nicht anpassungsfähig, unzuverlässig und nicht mit aktuellen Fensterkonzepten wie Tabbed Browsing vereinbar. Siehe dazu eine Zusammenfassung und den Grundlagenartikel »Popups« mit JavaScript.

   Lightboxen lassen sich eigentlich sehr performant und zuverlässig realisieren, sodass der Benutzer sofort eine Reaktion bekommt. Leider ist sind die meisten momentan geil auf die Effekte, die den Inhalt schwer zugänglich machen. Da muss der Lightbox-Hype wohl noch gesundschrumpfen.

   Kommentar von Mathias - 13. Dezember 2006 um 11:55

5. 5.
   

   am beispiel der oben benannten "original"-lightbox gesagt, ist auch die tastaturnutzung nicht immer nachvollziehbar. es wird zwar ein schliessen-knopf (keypress) eingeführt. den schließen link kann man nicht mit "tabben" erreichen (obwohl dies ja die normale art für tastaturnutzer ist, sich auf der seite zu bewegen). bei version 2 wird der nachteil besonders deutlich. vor und zurück in der galerie ist zwar auch für tastatur belegt, dass dies so ist, ist jedoch nur dann klar, wenn man mit der maus drüber fährt.

   letztendlich kann man diesen nachteil (tastaturnutzung) sowie andere (druck, langer aufgeblähter quellcode & auch performance auf langsamen rechnern) durchaus lösen, wenn man selber ein lightbox-script schreibt bzw. vorhandene modifiziert.

   nur leider hat sich bisher keiner um diese nachteile gekümmert.

   Kommentar von alexander farkas - 13. Dezember 2006 um 12:12

6. 6.
   

   Weiterer Nachteil: nicht Barrierefrei

   Kommentar von Zen - 13. Dezember 2006 um 18:21

7. 7.
   

   Definiere Barrierefrei

   Kommentar von Tomas Caspers - 13. Dezember 2006 um 18:40

8. 8.
   

   Hm naja mal ein doofes Beispiel: ein Blinder mit seinem Screenreader kommt auf eine Seite mit so ner Lightbox Geschichte. Wenn der auf das Bild für die Lb. geklickt hat wird irgendwo unten im Quelltext das Bild und anderes reingeladen… Sowas kapiert der Screenreader aber nicht… Bzw er wird dann auch nicht mehr zurück können weil die Lightbox ja den "Hintergrund" quasi gesperrt hat. So stell ich mir das zumindest vor. Keine Ahnung ob das in der Praxis so ist. Glaube schonmal sowas bei einem Ajax WorkAround gehört zu haben, wo ja auch am Quelltext rumgemacht wird.

   MfG Zen

   Kommentar von Zen - 13. Dezember 2006 um 22:11

9. 9.
   

   Sowas kapiert der Screenreader aber nicht

   Doch, sowas kapiert ein halbwegs moderner Screenreader. Wenn man den Fokus auf das Element setzt und / oder alle Inhalte antabbar macht und auch einen Knopf einbaut, mit dem man das ganze per Tastatur schliessen kann, dann sehe ich da keine Probleme. Muss halt nur gemacht werden, aber wenn, dann ist es auch für diese Nutzer brauchbar.

   Kommentar von Tomas Caspers - 13. Dezember 2006 um 22:51

10. 10.
    

    @Zen
    auf http://tierversuchsgegner-berlin-brandenburg.de/ (musst natürlich nach artikeln mit bildern gucken) findest du die oben genannte "original"-lightbox, welche genau so modifiziert wurde wie tomas das beschrieben hat.

    worauf man natürlich noch zusätzlich achten muss, ist dass 1. der focus beim bild schließen wieder zurückspringt und 2. (nicht so wichtig, aber sauberer) die lightbox funktionen (overlay, bild schließen etc.) erst erzeugt werden, wenn man das bild anklickt/vergrössert (in der original-version wird dies bereits mit onload erzeugt und lediglich versteckt.)

    im übrigen zwei dinge: wenn sie nicht modifiziert wird, merkt der screenreaderuser keinen effekt, also auch nicht dass irgendetwas gesperrt wurde. die sperrung findet ja nur vom design aus statt und hat einfluss auf die maus nutzung.

    i.ü. dürfte es relativ selten vorkommen, dass ein blinder sich die vergrösserte version angucken will.
    aber für tastaturnutzer ist diese änderung ebenfalls sehr sinnvoll.

    Kommentar von alexander farkas - 14. Dezember 2006 um 12:03

11. 11.
    

    Ich finde das Lightbox Plugin ganz angenehm – wird ja mittlerweile nicht nur in Blogs, sondern auch auf größeren Seiten eingesetzt, z.B. auf Focus Live. Werden Bilder in Lightbox eigentlich von Bildsuchmaschinen gecrawlt?

    Kommentar von tim - 11. Januar 2007 um 15:51

12. 12.
    

    Hey!

    Mich würde interessieren wie ich ein Bild mit der Lightbox bei laden einer Startseite darstellen kann.
    Also wenn man meine Seite aufruft soll gleichzeitig dein Lightbox aufgemacht werden ohne dass auf ein Link geklickt werden muss.

    Quasi ein Aufruf im BODY.

    Kommentar von Gnumpf - 24. November 2007 um 02:36

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.