mit2m

• Dienstleistungen
• Portfolio
• Über mit2m
• Journal
• Kontakt

Ein modales Flash-Fenster

geschrieben von Matthias Moorkamp am 19.10.2009 in webdesign flash javascript (x)html typolight

Ein modales Fenster ist eine spezielle Form des Dialogfensters, bei dem der Benutzer in anderen Fenstern derselben Anwendung nicht weiterarbeiten kann, solange das modale Fenster angezeigt wird. Dieses Konzept hat dank der JS-Bibliothek Lightbox und seiner Derivate Einzug ins Web gehalten – dabei wird das modale Fenster zur Präsentation von Bildern in hohen Auflösungen verwendet.

Im Content Management System Typolight verrichtet für diesen Zweck die auf den Mootools beruhende JS-Bibliothek Slimbox ihre Arbeit. Leider ist diese – ebenso wie die originale Lightbox – nicht in der Lage, andere Medien als Bilder darzustellen.

Als Alternative präsentiert sich hier u.a. die Bibliothek mediaboxAdvanced von John Einselen – diese baut ebenfalls auf den Mootools auf, steht unter der GPL, wird aktiv betreut und verwendet für die Parameterübergabe eine zur Slimbox grundlegend kompatible Syntax, was Sie besonders interessant für den Einsatz innerhalb von Typolight macht.

Die Vorbereitungen gestalten sich dabei denkbar einfach: Zunächst erzeugt man einen neuen Ordner mediaboxAdvanced im Verzeichnis plugins der Typolight-Installation – in diesen kopiert man die Bibliothek selbst sowie eines der Themes, die auf der Projektseite verfügbar sind. Eine separate Mootools-Bibliothek ist dabei nicht notwendig, da Typolight bereits eine ausreichend aktuelle Version mitbringt.

Um die Slimbox gegen die mediaboxAdvanced auszutauschen, ist anschließend das Template fe_page.tpl im Backend der Typolight-Installation zu bearbeiten. Dabei ist die folgende, alte Zeile durch den neuen Aufruf der mediaboxAdvanced-Bibliothek zu ersetzen – gegebenenfalls muß die Versionsnummer angepaßt werden.
alt:

neu:

Ebenso wird das alte Slimbox-Stylesheet durch jenes des gewählten mediaboxAdvanced-Themes ersetzt (hier: Black Theme).
alt:

neu:

Das war bereits die halbe Miete: Bilder, die vorher via Slimbox angezeigt wurden, werden nun ohne weitergehende Modifikationen von der mediaboxAdvanced dargestellt; auch zu Galerien gruppierte Bilder werden aufgrund der kompatiblen Syntax der beiden Bibliotheken unterstützt.

Kommen wir nun zur Integration von Flash®-Inhalten.
Zwar unterstützt mediaboxAdvanced auch die direkte Einbindung von swf-Dateien, doch birgt diese Vorgehensweise einige Nachteile:
Die mediaboxAdvanced-Syntax erlaubt keine Übergabe von Flashvars – diese werden häufig benutzt, um notwendige Startvariablen an den Flash®-Film durchzureichen. Diese Filme können daher nicht dargestellt werden.
Im mediaboxAdvanced-Skript ist ferner keine Möglichkeit zur individuellen Überprüfung der Versionsnummer des Flash®-Plugins implementiert. Inhalte, die eine bestimmte Versionsnummer voraussetzen, können nicht dargestellt werden.
Desweiteren liefert diese Methode bei auf Nutzerseite deaktiviertem Javascript den direkten Link auf die swf-Datei zurück. Alternative Anzeigegeräte und Browser ohne Flash®-Plugin bieten in diesem Fall nur den Download der Datei, zeigen jedoch keinerlei Inhalte an.
Abschließend ist keine Bereitstellung von individuellem, alternativem Inhalt für den Flash®-Film möglich – eine Grundvoraussetzung für barrierefreies Webdesign.

Diese Probleme können elegant umschifft werden, indem der Flash®-Inhalt mittels der Dynamic Publishing-Methode von swfobject in eine valide (X)HTML-Seite eingebettet und diese anstatt der swf-Datei durch mediaboxAdvanced aufgerufen wird.

Für eine ordnungsgemäße Anzeige sowohl innerhalb der mediaboxAdvanced als auch beim direkten Aufruf der alleinstehenden (X)HTML-Seite sollte die Anzeigegröße des Flash®-Films allerdings über das umgebende DIV festgelegt werden.
Sofern der Flash®-Film eine dynamische Skalierung erlaubt, empfiehlt es sich, sowohl den body des Dokuments als auch das umgebende div mit den CSS-Eigenschaften width:100%; und height:100%; zu formatieren; anderenfalls ist es notwendig, das umgebende div mit einer absoluten Größe zu versehen und es sowohl horizontal als auch vertikal zentriert am Viewport zu positionieren.
In beiden Fällen sind der Funktion swfobject.embedSWF für die Parameter height und width der Wert 100% zu übergeben, so daß sich untenstehendes Beispiel ergibt:

Da Typolight ebenfalls eine ausreichend aktuelle Version der swfobject-Bibliothek zur Verfügung stellt, kann hier auf diese zurückgegriffen werden; lediglich die Datei expressInstall.swf muss bei Bedarf manuell ergänzt werden. Die Pfade zu den einzelnen Dateien sind dabei ausgehend von der obigen (X)HTML-Seite zu setzen.

Um schlußendlich den Flash®-Film aus einem Typolight-Artikel heraus innerhalb von mediaboxAdvanced anzeigen zu lassen, ist ein letztes Mal Handarbeit notwendig, da Typolight wegen seiner Ausrichtung auf die Slimbox nur Bedienelemente zum modalen Öffnen von Bildern bereitstellt.
Dazu wird der Artikel im WYSIWYG-Editor des Typolight-Backends geöffnet. Über die Schaltfläche HTML-Quellcode bearbeiten wird der Quelltext zur Bearbeitung geöffnet. Im Quelltext selbst wird das aufrufende Element schließlich mit folgendem Link-Tag versehen:

Über das Schlüsselwort lightbox wird mediaboxAdvanced dabei mitgeteilt, daß dieses für die Verarbeitung des Links zuständig sein soll. Der Parameter external gibt dabei an, daß es sich bei dem zu öffnenden Inhalt um eine (X)HTML-Seite handelt. Das nachfolgende Zahlenpaar legt die Breite und Höhe der Darstellung fest – sollte der Flash®-Film mit einer absoluten Größe in die (X)HTML-Datei eingebunden worden sein, sind hier diese Angaben zu verwenden.

Über die Schaltfläche Aktualisieren des Quelltexteditors werden diese Änderungen in den Artikel übernommen. Nach dem Speichern des Artikels über die gleichnamige Schaltfläche ist der Flash®-Inhalt nun über das modale Fenster der mediaboxAdvanced zugänglich.

Bei nutzerseitig deaktiviertem Javascript wird die URL zur (X)HTML-Seite zurückgeliefert.
Sollte nutzerseitig kein Flash® installiert sein, wird der alternative Inhalt der (X)HTML-Seite eingeblendet.
Liegt das Flash®-Plugin in einer veralteten Version vor, wird bei Nutzung der Express Install-Methode der Updatevorgang eingeleitet.

Ich hoffe, mit diesem Kurztutorial eine kleine Hilfestellung gegeben zu haben. Über Fragen, Anmerkungen und Kommentare würde ich mich sehr freuen.