Der Interaktionsdesigner – PHP, jQuery und CSS

16. August 2008 (20:58 Uhr)

TYPO3 Extension: Kiwi Slider!

Jippi Yeah: Es gibt eine neue Version!

Es ist geschafft! Zusammen mit Matthias Haack habe ich die erste Extension im Repository von TYPO3 veröffentlicht. Mit Hilfe der neuen Erweiterung kiwi_slider ist es sehr einfach möglich einen Slider im Stil von Coda auf die eigene Seite einzubinden. Sogar einen besseren! Ohne JavaScript bleibt der Slider auf angenehme Weise nutzbar!

Getestet im Firefox 3, Internet Explorer 6 und 7, Safari und Opera.

Es folgen Erklärungen und Erläuterungen oder direkt herunterladen.

1. Installation

Sehr einfach. Extension herunter laden und über den Extensionmanager installieren. Ein Feld muss der Tabelle "tt_content" hinzugefügt werden.

2. Einbindung auf der Seite

Ein neues Inhaltselement vom Typ "Plugin" erstellen und darin den Kiwi Slider auswählen. Anschließend steht ein Feld zur Verfügung um die Seiten auszuwählen welche im Slider angezeigt werden sollen. Die Titel der Seiten erscheinen in der Liste oberhalb des Sliders, ihr gesamter Inhalt in seinem Inhaltsbereich. Das wars!

3. Konfiguration und Anpassung

Ein einfaches Standardaussehen ist in plugin.tx_kiwislider_pi1._CSS_DEFAULT_STYLE gespeichert und kann bearbeitet, bzw. ersetzt werden.

Ist jQuery im eigenen Projekt bereits vorhanden, muss die erneute Einbindung über das Plugin verhindert werden:

plugin.tx_kiwislider_pi1.insert.jQuery >

Ein einfaches Anpassen der Größe ist über Typoscript möglich. Diese Werte überschreiben die Angaben in der CSS Datei.

plugin.tx_kiwislider_pi1 {
  width = 800
  height = 300
}

Alternativ dazu könnten die entsprechenden CSS Regeln angepasst werden. Um das komplette Layout anzupassen sollten die CSS Angaben in eine externe Datei ausgelagert werden.

4. Ausblick

Wir freuen uns über Kommentare und Erfahrungsberichte und haben jede Menge Ideen für weitere Anpassungen. Ein Abo des RSS Feeds wird empfohlen.

tboley 17. August 2008 (14:09 Uhr)

Erstmal vielen Dank für die Extension. Läuft soweit wunderbar, nur habe ich noch Probleme, einzelne Parameter über Typoscript zu verändern. Wenn ich das Beispiel von oben
plugin.tx_kiwislider_pi1 {
width = 800
height = 300
}
in die TSetup der root-Seite setze (da wo auch der Rest des Templates eingestellt wird), passiert nichts. Die Weite ändert sich nicht.

Paul 17. August 2008 (15:43 Uhr)

Hi! Wichtig ist, dass du im Typoscript sowohl Breite als auch Höhe angibst. Die Werte werden dann als Inlinestyle übernommen. Wenn du sie nicht im Quelltext findest, dann sind sie an der falschen Stelle definiert.
Ansonsten kannst du die Größe per CSS anpassen.

tboley 17. August 2008 (16:49 Uhr)

@Paul: Ah, Danke! So klappt das jetzt :-)

Raphi 17. November 2009 (11:20 Uhr)

Danke für die coole Extension!
Wie müsst ich die Extension ändern um den Inhalt mehrer Spalten (colPos) auszulesen und gleichzeitig noch dem Inhalt ein Tempalte zu vergeben?

Martin Terber
[Typo3+PHP
Webentwickler]
27. Dezember 2009 (17:16 Uhr)

Vielen Dank, das ist die perfekte Extension zur schlichten Präsentation meiner Referenzen.
Wer sich ein Bild machen möchte:
http://martinterber.com/cms/de/referenzen/

Eric 23. März 2010 (11:48 Uhr)

Jawoll, echt tolle Extension. Mich würde jetzt noch brennend interessieren, wie es funktioniert, dass der Ablauf automatisch abläuft, wie z.B. in dem IHK-Beispiel.

Einen Kommentar schreiben

(wird nicht veröffentlicht)

(wird veröffentlicht!)