Hallo zusammen,
ich möchte euch heute eine neue Erweiterung vorstellen. Es handelt sich hier um die Integration des jQuery-Karussells/-Sliders carouFredSel als Content Element für Contao ab Version 3. Die Erweiterung und carouFredSel selbst sind open source und können daher kostenlos im privaten als auch kommerziellen Umfeld verwendet werden. (http://contao.org/de/extension-list/...000004.de.html)
jQuery.carouFredSel ist ein jQuery-Plugin, das beliebige HTML Elemente in ein Karussell/einen Slider verwandelt. Es kann dabei ein oder mehrere Elemente gleichzeitig scrollen, egal ob horizontal oder vertikal, unendlich oder kreisförmig, automatisch oder bei Nutzeraktivität.
Möglichkeiten von carouFredSel
- vollständig anpassbar
- automatisches scrollen oder scrollen durch Buttons, mittels Tastatur, dem Mausrad oder durch Wischen
- optionales responsible/fluid/liquid Karussell von Haus aus.
- unterstützt variable Element-Größen (ebenso mit einer variablen Anzahl von sichtbaren Elementen)
- eingebaute Tastatur- und Maus-Navigation und Pagination
- 9 eingebaute Übergangs-Effekte: none, scroll, directscroll, fade, crossfade, cover, cover-fade, uncover und uncover-fade
- viele intelligente "custom events" und eine Menge an weiteren Optionen
- Ausrichtung (links/zentriert/rechts) der Elemente innerhalb der vorhandenen Breite/Höhe
- dynamisches Hinzufügen und Entfernen von Elementen im Karussell
- GET und (re)SET der Konfiguration nach Erstellung des Karussells
Implementation in Contao
- beliebige Inhalte können gescrollt werden
- beliebig viele Karussells auf einer Seite
- individuelles HTML- und JavaScript-Template pro Karussell möglich
- die meisten und wichtigsten Parameter/Einstellungen können im Backend konfiguriert werden
- fehlende/zu komplexe Funktionalität kann im entsprechenden JavaScript-Template hinzugefügt werden (JavaScript/PHP Kenntnisse vorausgesetzt). Die meisten dynamischen Funktionen (z.B. custom events, hinzufügen/entfernen von Elementen zur Laufzeit) werden im Backend zz. nicht abgebildet.
Quelle/Beispiele/Infos/Anwendungs-Ideen
http://caroufredsel.frebsite.nl (Hauptseite)
http://coolcarousels.frebsite.nl (Anwendungs-Ideen)
Tipps/Hinweise
- Damit carouFredSel gestartet wird, muß im Seitenlayout jQuery zum Layout hinzugefügt werden.
- Das Karussell sollte "out of the box" funktionieren. Werden Elemente teilweise abgeschnitten kann es helfen eine Breite/Höhe im Start-Element anzugeben und dem div ein display:inline-block zuzuweisen;
- Das umschließende div des Content-Elements hat die CSS-Klasse ce_caroufredsel. Innerhalb dessen befindet sich ein weiteres div mit der individuellen CSS-ID ce_caroufredsel_xxx, welches die zu scrollenden Elemente umschließt. jquery.carouFredSel hängt sich mit einem weiteren div mit der CSS-Klasse caroufredsel_wrapper dazwischen. Die Navigations-Elemente haben neben einer allgemeinen CSS-Klasse zusätzlich noch die gleiche individuelle CSS-ID.
- Der Navigations-Bereich im HTML-Template kann bei Bedarf umsortiert werden.
- Bei Nutzung von HTML5 sollte man ein figure { margin:0; padding:0; } in seiner CSS-Definition verwenden, welches den browser-individuellen Stil resettet. Im Safari wird z.B. ein sehr großer Abstand drumherum hinzugefügt.
Optionale Abhängigkeiten
jquery_easing - wird diese Erweiterung installiert stehen 30 weitere "Easing"-Funktionen automatisch zur Verfügung.
jquery_mousewheel - wird diese Erweiterung installiert kann auch mit dem Mausrad gescrollt werden.
jquery_touchswipe - wird diese Erweiterung installiert kann auch mit Wischgesten und Mausziehen gescrollt werden.
Entdeckte Fehler, Verbesserungsvorschläge oder anderes hier im Thread oder im GitHub-Repository: https://github.com/dklemmt/contao_dk_caroufredsel
Ich freue mich sehr über Feedback und andere Ideen. Falls Fehler auftreten helfe ich gern. Habt jedoch bitte Verständnis dafür, wenn ich euch nicht dabei helfen kann wie man ein bestimmtes Karussell erstellt (das weiß ich nämlich auch nicht). Auf den Webseiten, die oben angegeben sind findet ihr eine Unmenge an Beispielen und Anwendungs-Ideen. Wenn ihr euch dort die JavaScript-Parameter anschaut, so könnt ihr diese leicht ins Backend übernehmen. Für einige Beispiele nutzt Fred die angebotenen Callback-Funktionen von carouFredSel. Diese sind so im Backend nicht verfügbar, können dann aber im JavaScript-Template ergänzt werden. Für die meisten Karussells reichen die Backend-Einstellungen jedoch aus.
Soo das war es erstmal. Viel Spaß damit...
Dirk
Lesezeichen