Moin,
irgendwie stach es mir ja schon seit längerem ins Auge: Schicke Web-Seiten, deren Funktionalität dank jQuery und einiger PlugIns gut aufgepeppt wurde – „Web 2.0“ lässt grüßen…
Ein konkreter Anlass, das auch einmal auszuprobieren, ergab sich für mich, als ich feststellte, dass rockpixx.com ja nun doch schon einige bekannte Namen vor den Kameras hatte, und dass es doch schön wäre, die Bilder davon einmal prominenter auf der Eingangsseite zu präsentieren.
Gesucht – gesurft – gefunden: Ein sog. „Karussell“ musste also her – aber was für eines? Eine Flash-Lösung mit Zugriff auf eine XML-Datei kam für mich nicht in Frage, da Flash ein geschlossenes System darstellt und nicht gerade suchmaschinenfreundlich ist. Außerdem hat nicht jeder Besucher im Browser Flash aktiviert. Also musste eine Lösung auf JavaScript-Basis her, die mittels PHP aus der hinter rockpixx.com stehenden MySQL-Datenbank gefüttert werden konnte. Zudem kommt auf rockpixx.com an verschiedenen Stellen sowieso schon JavaScript zum Einsatz.
Und das bedeutet nun: jQuery nebst PlugIn „infinitecarousel“ von → http://www.catchmyfame.com ist jetzt auf der Startseite vertreten und spielt Bilder von ausgewählten Gigs ab. Die Anzahl der Bilder ist unbegrenzt, sie laufen von alleine durch, lassen sich aber auch vom Benutzer selbst durchklicken. Bei Klick auf das Bild kann sogar direkt auf den Gig innerhalb der Site verwiesen werden. Und alles lässt sich bequem aus der Datenbank speisen, ohne dass die Datenbank deswegen noch umgebaut werden müsste. Die ersten Testläufe ließen mich zufrieden grinsen…
Allerdings behagte mit die über die jeweiligen Bilder eingeblendete Schrift nicht wirklich: Da nur eine Text-Farbe möglich war, gab es Bilder, auf denen der eingeblendete Name nicht gut zu lesen war.
Die erste Abhilfe, einen teiltransparenten Balken unter die Schrift zu legen, sah aber nicht gut aus, da das Bild dadurch kleiner wirkte. Die zweite mögliche Lösung, den Text fest ins Bild einzubetten, war ebenfalls ungeeignet, da suchmaschinenunfreundlich. Zudem ist der Text ja bereits in der Datenbank vorhanden, warum ihn also nicht auch nutzen?
Die Lösung fand ich in einem weiteren PlugIn für jQuery: „FontEffect“ von → http://www.iofo.it/jquery/fonteffect/. Hier lassen sich viele Schrifteffekte, die über CSS hinausgehen (wann endlich kommt CSS3 und wann endlich kommen Browser, die das auch umsetzen können?), mittels verschiedener Parameter steuern. Der von mir benötigte Effekt, eine dünne dunkle Kontur um den hellen Text zu legen, ist hier möglich. Das einzige Problem war noch, dass sich bestimmte Vorgaben von „FontEffects“ mit den Vorgaben von „infinitecarousel“ nicht vertragen. Verlangt „FontEffect“ beispielsweise den Einsatz von DIVs, so ist ausgerechnet an der Stelle, wo die Bildbeschriftung angezeigt werden soll, in „infinitecarousel“ nur ein P-Tag gestattet – sonst nichts.
Ein wenig Experimentieren ergab dann die Lösung, dass DIVs auch in Classes umcodiert werden können und beide PlugIns zufrieden sind, wenn man in der PHP-Datei zuerst „FontEffect“ und dann erst „infinitecarousel“ aufruft. Dann eine CSS-Definition noch einmal doppeln, damit es nicht zu unschönen Anzeigeeffekten kommt und fertig ist die ganze Geschichte.
In meinen verschiedenen Browsern läuft nun alles so wie es soll und das reicht mir auch. Das eindeutige Plus dieser Angelegenheit ist für mich, dass ich hier eine Lösung habe, die sog. „non-obstructives“ JavaScript nutzt, Open-Source ist und unter CC-Lizenz steht. Der Rest ist PHP, HTML und CSS (und ein Texteditor – mein DreamWeaver ist in diesem Fall nicht wirklich hilfreich).