Christians Externes Gedächtnis

Wer hätte gedacht, dass es bereits zig verschiedene Lösungen zum Thema Lightbox (Website wird kurzzeitig überlagert durch eine weitere Ebene mit Inhalten, wie z.B. Detailansicht eines Fotos) gibt? Ich jedenfalls nicht, bevor ich den Artikel “Web 2.0 Round up Modal Window Lightbox Effect Libraries” von Komang a.k.a chazzuka gelesen hatte.

Ich hatte eigentlich gerade Tante Google mit dem Suchquery “modalWindow actionscript” gefüttert, um Näheres über diese offenbar un- oder schlecht dokumentierte Eigenschaft der Window-Klasse herauszufinden. Es kommt nämlich immer häufiger vor, dass sich Kunden eine Art Lightbox-Funktion auch in Flash-Websites wünschen. Obwohl es mit ActionScript natürlich massig Möglichkeiten gibt, so etwas umzusetzen, wollte ich im Zuge meiner Reise durch die Wunderwelt der Flash-Komponenten mal nachschauen, ob es da nicht auch etwas Passendes gibt.

Und siehe da: Es gibt so etwas. Meines Erachtens ist es recht einfach möglich, die in Flash verfügbaren so genannten modalen Fenster für eine Lightbox-Funktion zu benutzen. Das denke und weiß ich besonders, nachdem ich herausgefunden habe, dass man mit ActionScript Fenster erschaffen und den Hintergrund bzw. die Zwischenebene zwischen Fensterinhalt und dem durch die Lightbox zu verdeckenden Inhalt transparent gestalten und umfärben kann.

/**
 Window-Komponente in Library erforderlich!
*/
 
import mx.managers.PopUpManager;
import mx.containers.Window;
 
System.security.allowDomain("http://christianscholz.com");
 
_global.style.modalTransparency = 90;
 
var my_win:MovieClip = PopUpManager.createPopUp(this, Window, true, {closeButton:true, contentPath:"http://christianscholz.com/wordpress/wp-content/blutbad.jpg"});
 
var c:Color = new Color(my_win.modalWindow);
c.setRGB(0x000000);
 
var winListener:Object = new Object();
winListener.click = function(evt_obj:Object) {
 my_win.deletePopUp();
};
winListener.complete = function(evt_obj:Object) {
 my_win.setSize(my_win.content._width, my_win.content._height+25);
};
my_win.addEventListener("click", winListener);
my_win.addEventListener("complete", winListener);

Mit diesem Beispielskript, in ein Flash-Dokument eingefügt, wird die Bühne mit 90% opakem Schwarz überzogen (dafür sorgt _global.style.modalTransparency in Kombination mit der Farbwertzuweisung per Color-Klasse) und darüber ein Fenster erzeugt, das als Inhalt ein Bild aus meinem Blog trägt.

Das Ergebnis ist nichts Spektakuläres. Außerdem ist die Verwendung der Color-Klasse veraltet. Das aber beiseite gestellt lässt sich sagen, dass hier durchaus ein weiterer Weg gegeben ist, eine Lightbox-Funktion in Flash herzustellen. Am Rande sei noch bemerkt, dass Buttons/Movieclips, die unter der Lightbox liegen, stumm geschaltet werden, also nicht geklickt werden können, während die Lightbox aktiv ist. Dieses Verhalten ist aber in der Regel gewünscht und vorteilhaft.

Ein Kunde wollte gern für seine eigenen GoogleMaps ein CMS haben, bei dem er nur eine Adresse, wie z.B. “Grindelallee 27c, 20146 Hamburg”, eingeben muss und per Knopfdruck die nötigen Breiten- und Längengraddaten erhält.

Kann ja nicht so schwer sein, dachte ich. Nach ein paar Stunden Recherche und Bastelei habe ich dann auch eine Lösung programmiert, die ohne lästiges GoogleMaps-API-Einbinden auskommt.

Die Demo gibt die zwei Werte Latitude und Longitude lediglich in einem JavaScript-Fenster aus. Im CMS für meinen Kunden hingegen werden gleich diverse Formularfelder (Straße, Hausnummer, Postleitzahl, Stadt, Breiten- und Längengrad) vorausgefüllt, so dass er eine Menge Arbeit einspart.

Die vollständige GoogleMaps-Seite mit allen so eingetragenen Adressen zu generieren, dürfte jetzt nur noch Formsache sein.

Mein Newsgroup-Kollege Dominik machte mich noch auf dieses Projekt (OpenGeoDB - freie Geokoordinaten-Datenbank) aufmerksam. Sicher auch mehr als einen flüchtigen Blick wert.

“Ein <form> ist ein Blockelement. Das bedeutet, dass es automatisch einen Zeilenumbruch verursacht. Du könntest es als erstes mal mit CSS und einem ‘margin:0;’ versuchen, ob der Zwischenraum verschwindet.”

Hätte ich früher geGOOGLEt, hätte ich mir etwa eine Stunde Experimentierens sparen können. *grrrr*

Albert Kluge aus Bremen (so steht’s zumindest auf der Kontaktseite geschrieben) ist so nett, uns via seine Website JJam.de teilhaben zu lassen an seinen “Programmierbemühungen in Java und JavaScript”.

Die meisten Skripte haben eine Vorschau oder Demo, was natürlich viel besser ist, als sich ein fremdes Skript auf blauen Dunst hin erst einmal herunterzuladen, bevor man weiß, was man bekommt.

Größtenteils bin ich ziemlich beeindruckt von Herrn Kluges “Bemühungen”!