Ein Artikel von Paul Lunow, erschienen 2009 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

TYPO3 Template

Nachdem eine Seite mit mehreren Dateien über Seiteneigenschaften / Ressourcen / Dateien ausgestattet wurde, wird ins HTML Template gewechselt und ein neuer Marker eingebunden. Ich nenne ihn mal rubrikBild mit der ID head.

<div id="head">###rubrikBild###</div>

Als nächstes wird der Marker per Typoscript definiert. Er ist vom Typ COA und soll aus einer Liste von Bildern bestehen.

rubrikBild = COA
rubrikBild {
    10 = IMAGE
    10.file {
        import = uploads/media/
        import.data = levelmedia : -1, slide
        import.listNum = 0
    }
    10.wrap = <li>|</li>
    
    wrap = <ul>|</ul>
}

Das erste Objekt 10 wird definiert als Bild = IMAGE. Über die Angabe 10.file wird eine Datei angesprochen. import gibt den Ursprungsort an, import.data bestimmt die Vererbung auf Unterseiten. Damit wird das Bild der übergeordneten Seite angezeigt, sollte kein eigenes bestehen. import.listNum wählt aus der Liste das erste Bild aus. Abschließend wird das generierte Img-Tag in einem Listenelement verpackt 10.wrap = <li>|</li> und das komplette Objekt als Liste wrap = <ul>|</ul>. Hm. Mit diesem Code wird jetzt nur ein einziges Bild in einer Liste dargestellt. Eindeutig zuwenig zum Überblenden. Deshalb muss dieser Code mit einer Schleife ersetzt werden. Dazu werden die ausgewählten Dateien in einen Text geschrieben und mit der Funktion split auseinander genommen. Anschließend kann jedes Element einzeln behandelt werden.

rubrikBild = COA
rubrikBild {
    10 = TEXT
    10.data = levelmedia:-1, slide
    10.split {
        token = ,
        cObjNum = 1
        1 {
            10 = IMAGE
            10.file.import.current = 1
            10.file.import = uploads/media/
            10.wrap = <li>|</li>
        }
    }
    
    wrap = <ul>|</ul>
}

Das Auslesen der Datei und die Wraps sind wie im oberen Beispiel, aber hier werden jetzt **alle angegebenen Dateien **ausgelesen!

CSS

Die Darstellung der Liste richtet sich natürlich nach dem Seitenlayout. Auf jeden Fall sollte man es mit position:absolute so einrichten, das alle Bilder übereinander liegen damit Benutzer ohne JavaScript nicht von einem Haufen sinnloser Bilder erschlagen werden.

JavaScript

Jetzt fehlen noch ein paar Zeilen jQuery und fertig ist die Funktion! Als erstes muss das Plugin innerfade eingebunden werden. Natürlich über Typoscript im Roottemplate und dort entweder per page.10.headerData oder page.includeJS, je nach Geschmack würde ich mal behaupten. Dann wird eine Datei für eigene Scripte benötigt, ich nenne sie gerne action.js (eingebunden NACH dem jQuery Core und allen benötigten Plugins), die eine Funktion beinhaltet, welche aufgerufen wird sobald alles fertig geladen wurde:

jQuery(function($) {
    // ... hier gehts los ...
});

Als erstes muss geprüft werden, ob überhaupt mehr als ein Bild vorhanden ist:

if($("#head ul li").length > 1) {
    // ...hier gehts weiter ...
}

Wenn das der Fall ist, dann muss nur noch das innerfade Plugin aktiviert werden:

$("#head ul").innerfade({
    speed: 2000,
    timeout: 4000,
    containerheight: '250px'
});

Zu beachten ist, dass die Funktion innerfade auf den umfassenden Container, also auf das <ul>, angewendet wird und nicht auf die einzelnen Elemente. Wenn man die Angabe containerheight vergisst weglässt, dann funktioniert es nicht im Internet Explorer. **Daran denken! **Noch mehr mögliche Einstellungen sind im Quelltext von jquery.innerfade.js dokumentiert.

Fertig

Jetzt in der Schulung die Freude der Auftraggeber genießen und viele schöne Überblendungen auf den eigenen Seiten beobachten. Sobald unsere neue Seite veröffentlich wurde, wird sie hier als Beispiel dienen. Bitte noch ein bisschen Geduld. Die Ausstellungsseite timeless-audrey benutzt diese Technik. PS: _Ein Linktipp; _die Firefox Erweiterung Wappalyzer verrät auf einen Blick welche Systeme eine Internetseite einsetzt. Sehr praktisch! Danke t3n.