Homepage

Ansehen

Um noch einmal auf den Bilderslider zurückzukommen: In dieser Variante bediente ich mich wieder der ursprünglichen Struktur, den gesamten Inhalt in eine Liste zu schreiben.

Javascript fängt fehlende CSS3-Fähigkeiten ab. Einem Browser der weder Javascript noch CSS3 unterstützt bleibt schließlich noch der CSS2.1-Hover-Effekt.

Code

Ansehen

Bei Pixie handelt es sich ebenfalls um ein Kombisystem, mit Multimediablog (Audio, Video, Bilder) und einem Eventmodul. Es ist PHP-basiert, verwendet jQuery und Microformats.

Mehr...

Ob man sie für die Suchmaschinenoptimierung wirklich noch braucht, würde ich nicht mehr steif und fest behaupten. Schöner anzusehen und leichter zu erfassen sind reine Buchstabenlinks allemal. Die Ansage in den Einstellungen eines CMS das ich grade teste, "Clean URLs" seien nur auf Linux möglich, trifft jedoch nicht mehr zu (hängt natürlich nach wie vor von der Serverkonfiguration ab). Das Rewrite Modul für IIS7+ "bietet einen regelbasierten Umschreibmechanismus zum Ändern angeforderter Links vor der Verarbeitung durch den Webserver". Das funktionierte auch bei besagtem CMS.

Den ".htaccess"-Eintrag muss man auf jeden Fall manuel vornehmen, und der kommt unter Windows natürlich in die web.config (XML-Konfigurationsdatei für Asp.NET-Sites).

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="namedessystems" patternSyntax="Wildcard">
                    <match url="*" />
                        <conditions>
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        </conditions>
                    <action type="Rewrite" url="index.php" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Frog CMS läuft sowohl unter Apache als auch unter IIS. Es bringt auch mehrere Sprachdateien mit, unter anderem Deutsch.

Der Release der letzten Version liegt zwar schon etwas zurück (April 2009), und die Zusicherung, dass die Fortentwicklung weitergeführt wird, ist auch nicht mehr ganz jung. Da mir die Logik gut gefiel, wollte ich es zumindest ausprobieren als es nach der einfachen Installation schon so selbsterklärend vor mir lag.

Mehr...

Zwei Dinge stören mich bei der reinen CSS3-Version doch noch. Immerhin, es funktioniert. Wer einen geeigneten Browser hat, kann sich nun durch die einzelnen Bilder durchklicken. Da die <spans> mit den Bildern drin erst dann eine Ausdehnung bekommen, wenn sie "getarget" sind, bekam der Divcontainer in der vorherigen Version das erste Bild als Hintergrund, damit man beim Aufrufen der Seite nicht ins Leere blicken muss. Ungünstigerweise ist das jedoch dann das Bild, welches vom jeweils angewählten Bild "weggeschoben" wird. Das ist nicht schlüssig. Es sollte das jeweils vorherige Bild sein. Außerdem hätte ich gerne wieder das Thumbnail zum Bild ohne das transparente PNG darüber.

Also doch wieder ein bisschen Javascript. Beim Klicken auf ein Thumbnail ändert sich die Bodyklasse, und der Divcontainer bekommt ein anderes Hintergrundbild.

Auch hier wieder eine Videoaufnahme für Browser die noch kein CSS3 unterstützen.

Code

Ansehen

Heute Nacht vor dem Einschlafen kam mir die Idee, einen Versuch mit CSS3 zu starten und mit der Pseudoklasse "target" und für den Slideffekt "transition" zu arbeiten - und dabei so wenig wie möglich umbauen zu müssen. Erst mal war ich enttäuscht. Mein Standardbrowser Firefox steuerte zwar die Bilder an wie gewünscht, aber kein Slideeffekt. Dann öffnete ich Opera...

Das "Sollergebnis" zeigt das Video (noch nicht ganz, kleiner Fehler ist noch drin). Firefox und Internet-Explorer 9 (gibt es erst als Preview) zeigen das jeweils durch Klick auf sein Thumbnail ausgewählte Bild. Die gängigen Internet-Explorer (7 und 8) machen gar nichts, auch nicht mehr beim Hovern, da ich die HTML-Struktur für den neuen Versuch verändern musste. Opera, Safari und Chrome hingegen zeigen bereits einen Slideffekt (und hier ist auch der Fehler, es wird immer dasselbe Bild überblendet), und das ganz ohne Javascript.

Code

Ansehen

Bei reinem CSS wie im vorangegangenen Beispiel kann ein Bildwechsel nur beim Hovern über ein anderes Thumbnail erfolgen. Immerhin ist so eine Bedienung auch mit Browsern möglich, in denen Javascript gar nicht läuft. Für alle anderen erhöht sich der Komfort der Konstruktion mit Hilfe eines kleinen Kniffs. Der Body wechselt beim Anklicken eines Thumbnails seine Klasse, und das gewählte Bild bleibt bis zum nächsten Clickevent sichtbar - sofern kein Hovereffekt es überblendet. Hovern hat immer Vorrang (festgelegt mit z-index). Auch bleibt nun das Thumbnail des jeweils ausgewählten Bildes voll sichtbar, außer die Seite wurde gerade frisch geladen.

Code

Ausprobieren

(getestet mit den aktuellen Versionen von Firefox, Safari, Opera, Internet-Explorer 7 und 8)

Code

Ausprobieren