Accessible Lightbox Plugin für Wordpress
Scriptlösungen zur vergrößerten Anzeige von Bildern, ohne dabei (als Popup) ein neues Browserfenster öffnen zu müssen, sind inzwischen weit verbreitet. Sie finden gern Anwendung in Fotogalerien oder auf Seiten, bei denen es sich anbietet, dem Leser die Bildinhalte in veröffentlichten Textbeiträgen als vergrößerte Variante zur Verfügung zu stellen. In den meisten Fällen nimmt man damit auch Nachteile in puncto Ladezeit für die umfangreichen Scriptbibliotheken in Kauf, welche das effektvolle Anzeigen der Bilder ermöglichen oder im Hintergrund das Nachladen der Bilder bewerkstelligen. Eine Sicherstellung für Anwendungsfälle wie Screenreader oder eine Navigation per Tabulator ist meines Erachtens bis jetzt so gut wie gar nicht berücksichtigt worden.
Hier setzt das Accessible Lightbox Plugin für Wordpress an. Es bietet einen schlanken Scriptcode, verzichtet auf unnötige Effekte und ist somit auch für langsame Internetverbindungen und ältere PC’s auf Clientseite problemlos nutzbar. Weiterhin bietet es in Hinsicht auf eine barrierearme Umsetzung der Bildanzeige- und vergrößerung, Unterstützung für die Tastaturnavigation per Tabulatortaste ohne dass der Focus des angewählten Bildes beim Aufruf verloren geht. Das Plugin wurde in seiner Funktionsweise ab Wordpress 2.0.X getestet und lässt sich einfach und schnell installieren.
Accessible Lightbox Plugin - was ist anders?
Der Scriptcode des Accessible Lightbox Plugins beruht auf dem Lightbox Javascript in der Version 1 von Lokesh Dhakar. Dieses wurde von mir, betreffs eines optimierten Ladezeitverhaltens und unter dem Gesichtspunkt einer zugänglichen, barrierearmen Umsetzung und Benutzung, modifiziert und ergänzt.
Die von mir vorgenommen Modifikationen und damit verbundenen Vorteile sind nachstehend noch einmal zusammengefasst:
- Optimierung für langsamere Rechner und Internetverbindungen wie Modem- und ISDN Verbindungen (Performance)
- bereinigter und kompakterer Javascript Code des ursprünglichen Lightbox Scriptes (jetzt ca. 9 Kilobyte)
- der Preloader, welcher versteckt im Hintergrund die Bilder vorlädt, wurde entfernt (Performance)
- Unterstützung für Tastaturnavigation per Tabulator-Taste, der Focus auf das gewählte Vorschaubild bleibt nach dem Beenden der Lightbox-Anzeige erhalten! (Zugänglichkeit - Barrierefreiheit)
- validiertes Stylesheet / CSS für die Lightbox
- Focus Bug im Internet Explorer 5.0 behoben
- der Transparenzeffekt für den Hintergrund wird nun komplett per CSS erzeugt und von allen aktuellen Browsern unterstützt
- Kompatibilität bei gleichzeitiger Verwendung des Nicetitle Plugins hergestellt (Einblendung des Bildtitels ist jetzt sichergestellt)
Beispiele / Samples zur Einbindung in eigene Beiträge
Variante 1 - Einbindung und Verlinkung per Vorschaubildlink
Nachdem das Plugin unter Wordpress aktiviert worden ist, kann es losgehen (siehe Installation des Plugins unter Wordpress). Im zugehörigen Stylesheet lightbox.css ist die CSS Klasse imageholder abgelegt. Sie dient zur Formatierung eines verlinkten Vorschaubildes, dessen Linkziel auf das (mittels des Accessible Lightbox Scripts) größer darzustellende Bild zeigt. Natürlich kann diese Klasse auch auf individuelle Bedürfnisse angepasst werden.
Wird ein Bild mittels Maus oder Tastatur Tabulator annavigiert und der Linkverweis aufgerufen, ist nach dem Schließen der Lightbox der Focus auf das Vorschaubild weiterhin aktiv, zu erkennen an dem dunkelroten Rahmen um das Vorschaubild. Somit ist auch eine Tastaturnavigation mit Tabulator möglich - soweit vom Browser unterstützt (Firefox, Netscape und Internet Explorer etc.)
Das zugehörige und benötigte XHTML Quellcodefragment zur Einbindung in eigene Beiträge ist hier abgebildet. Das verlinkte Vorschaubild wird dabei von einem <p class=”imageholder”> … </p> umschlossen. Dieser Container dient dabei zu Formatierung des in ihm enthaltenen Vorschaubildes. Wichtig ist das der erzeugte Link das Attribut rel=”lightbox” enthält, anhand dieses Attributes erkennt das Lightboxscript das anzuzeigende Linkziel.
XHTML Quellcodefragment - Variante 1:
<p class="imageholder">
<a rel="lightbox" href="myimage-big.jpg">
<img src="myimage-small.jpg" />
</a>
</p>
Variante 2 - Einbindung und Verlinkung per Textlink
In der zweiten hier aufgeführten Variante wird, statt des Vorschaubildes, ein darunterstehender Text verlinkt. Für dieses Konstrukt ist im zugehörigen Stylesheet lightbox.css die CSS Klasse imageholder1 gedacht. Auch sie dient zur Formatierung des Vorschaubildes und dem in diesem Fall verlinkten Text, dessen Linkziel nun auf das vergrößerte Bild zeigt. Auch diese Klasse kann auf individuelle Bedürfnisse angepasst werden.
Das zugehörige und benötigte XHTML Quellcodefragment für diese Variante ist hier abgebildet. Das Vorschaubild samt darunterstehenden verlinktem Text wird dabei von einem <p class=”imageholder1″> … </p> umschlossen. Dieser Container dient dabei zu Formatierung des in ihm enthaltenen Vorschaubildes und dem Textlink. Auch hier ist es wieder wichtig darauf zu achten, dass der erzeugte Link das Attribut rel=”lightbox” enthält.
XHTML Quellcodefragment - Variante 2:
<p class="imageholder1">
<img src="myimage-small.jpg" />
<a rel="lightbox" href="myimage-big.jpg">Bild vergrössern</a>
</p>
Download Accessible Lightbox Plugin für Wordpress
Das Plugin liegt als gepacktes Zip-Archiv vor und hat eine Größe von 5kb.
Im Archiv enthaltene Dateien (mit Ordnerstruktur):
- accessiblelightbox/accessiblelightbox.php
enthält den Plugincode zum Einbinden in Wordpress - accessiblelightbox/lightbox.css
CSS Datei zum Anpassen der Lightbox und Vorschaubilder - accessiblelightbox/lightbox-js.php
Lightbox Javascript (Einbindung erfolgt per PHP) - accessiblelightbox/loader.gif
Grafik zum Anzeigen des Ladezustandes - accessiblelightbox/readme.txt
Textdatei mit Informationen zum Plugin - Englisch
Download Accessible Lightbox Plugin Ver. 1.0
Installation des Plugins unter Wordpress
Nach dem Entpacken des ZIP-Archives erhält man einen Ordner mit dem Namen accessiblelightbox, in welchem sich alle benötigten Dateien befinden. Dieser wird nun in den Plugins Ordner der Wordpress Installation kopiert. In der Plugin Verwaltung von Wordpress erscheint von da an der Eintrag ‘Accessible Lightbox’. Nach dem Aktivieren des Plugins und entsprechender Enbindung der verlinkten Bilder per XHTML im jeweiligen Inhalt des veröffenlichten Beitrages (siehe obige XHTML Beispiele zur Einbindung) ist das Lightbox Script zur Anzeige der größer dazustellenden Vorschaubilder einsatzbereit.
Dieser Artikel ist abgelegt unter dem Thema: Plugins