dk_caroufredsel ist ein jQuery-basierter Content/Elementslider mit dem Inhaltselemente aller Art in einer Slideshow gezeigt werden können. Online-Demos sind auf der Originalseite zu finden.

Was kann carouFredSel?

• scrollen von beliebigen Inhalten in horizontaler (links/rechts) und vertikaler (hoch/runter) Richtung
• automatisches scrollen oder scrollen durch Buttons, mittels Tastatur, dem Mausrad oder durch Wischen
• Scrollmodi: einmalig, kreisförmig (scrollt am Ende mit dem ersten Element weiter) und unendlich (spult am Ende zum ersten Element zurück)
• konfigurierbare Anzahl von gleichzeitig scrollenden Elementen
• konfigurierbare Anzeigedauer und Verzögerung bis das erste Mal gescrollt wird
• Pause bei Maus-Hover oder durch Button
• Fortschritts-Balken oder Kreis-Diagramm zur Anzeige bis erneut gescrollt wird
• 9 eingebaute Übergangs-Effekte: none, scroll, directscroll, fade, crossfade, cover, cover-fade, uncover und uncover-fade und verschiedene Abschwächungsfunktionen
• konfigurierbare Länge der Übergangsdauer
• optionales responsive/fluid/liquid Karussell
• konfigurierbare Größe des Karussells sowie der einzelnen Elemente
• unterstützt variable Element-Größen (ebenso mit einer variablen Anzahl von sichtbaren Elementen)
• konfigurierbare Anzahl von sichtbaren Elementen
• konfigurierbares oder zufälliges Start-Element
• speichern der letzten Position zwischen Seitenwechseln
• eingebaute Tastatur- und Maus-Navigation sowie Pagination

Besonders zu erwähnen sind noch eine Unmenge an sogenannten custom events mit denen sich nahezu alles von außerhalb im Karussell ansteuern/zur Laufzeit verändern läßt.

Was bietet die Erweiterung?

• beliebige Inhalte können gescrollt werden
• beliebig viele Karussells auf einer Seite
• Karussells können als Inhalts-Element oder Modul eingebunden werden
• Newsticker-Modul basierend auf dem Modul Nachrichtenliste
• Inhalts-Element Galerie analog der Contao Galerie mit automatisch erstellten scrollbaren Vorschaubildern
• Inhalts-Element Hintergrund für ein fensterfüllendes Hintergrund-Karussell mit automatisch erstellten scrollbaren Vorschaubildern
• Synchronisation zwischen zwei Karussells
• individuelles HTML-, CSS- und JavaScript-Template pro Karussell möglich
• individuelle CSS-Formatierung pro Karussell möglich - jedes Karussell erhält eine eindeutige ID
• die meisten/wichtigsten Einstellungen können im Backend konfiguriert werden
• fehlende/zu komplexe Funktionalität kann im entsprechenden JavaScript-Template individuell hinzugefügt werden (jQuery/PHP Kenntnisse vorausgesetzt).

Installation

Wie bei allen Erweiterungen, kann sie über die Erweiterungsverwaltung installiert werden. Falls diese nicht verfügbar sein sollte gibt es noch die Möglichkeit der manuellen Installation. Sollte die Erweiterung manuell installiert werden müssen auch alle Abhängigkeiten installiert werden. Diese sind im Extension Repositority ersichtlich.

Wichtig

• Damit carouFredSel gestartet wird, muß im Seitenlayout jQuery zum Layout hinzugefügt werden.
• Der Navigations-Bereich im HTML-Template kann bei Bedarf umsortiert werden.
• Bei Nutzung von HTML5 sollte man - sofern man das CSS-Reset StyleSheet nicht in das Seiten-Layout einbindet - ein figure { margin:0; padding:0; } in seiner CSS-Definition verwenden, welches den browser-individuellen Stil resettet.

carouFredSel-Karussells verwalten

carouFredSel-Karussells auswählen

Um sich einige Klicks zu sparen sollte man vor dem Anlegen seiner Inhalts-Elemente oder Module zumindest ein Karussell erstellt haben, da man dieses dann sofort auswählen kann. Die Einstellungen sind bei allen Element-Arten gleich und folgen dem nachfolgendem Schema. Lediglich das HTML-Template ändert sich je nach Element-Art.

carouFredSel-Karussells als Inhalts-Elemente

carouFredSel-Karussells als Module

Die Inhalts-Elemente zum Modul werden in den Modul zugehörigen Einstellungen im Backend hinterlegt.

carouFredSel-Karussells als Newsticker

carouFredSel - Hintergrund

Hierbei werden die ausgewählten Bilder für ein fensterfüllendes Hintergrund-Karrussell verwendet. Ändert sich die Größe des Fensters werden die Bilder unter Berücksichtigung ihrer Proportionen skaliert und sowohl horizontal als auch vertikal zentriert. Bis auf die Größenangaben werden alle Einstellungen berücksichtigt. Die ggf. zugeschalteten Vorschaubilder erscheinen an der Stelle im Dokument wo das Inhalts-Element platziert wurde.

Anwendungsanleitungen

responsive-Modus einsetzen

Sobald responsive gewählt wurde, wird die Größenberechnung der Elemente umgeschaltet. Wenn sich die Größe der umgebenden Box ändert, wird der Inhalt des Karussells automatisch vergrößert oder verkleinert. Damit dies zuverlässig funktioniert muß die Anzahl der sichtbaren Elemente (egal in welcher weise) angegeben sowie die Höhen bzw. Breiten auf variabel, automatisch oder einen fluiden Wert eingestellt werden.

Synchronisation einsetzen

Die Karussell-Synchronisation ist ein sehr mächtiges Werkzeug. Man kann sie immer dann einsetzen, wenn die Möglichkeit eines Karussells nicht ausreicht sei es aus Gründen des Layouts oder falls man zwei Karussells gleichzeitig laufen lassen möchte. So kann man z.B. das Hintergrund-Karussell mit einem Galerie- oder beliebigen Inhalts-Karussell verknüpfen, die auch verschiedene Einstellungen haben dürfen. Sobald eines scrollt, scrollt das andere ebenfalls. Verknüpft werden beide Karussells über ihre jeweilige ID.

Erstes Element nach dem Laden reinscrollen lassen

Im Gegensatz zu einigen anderen Slidern wird nach dem Laden der Seite das erste Element sofort dargestellt und erst nach Ablauf der Anzeigedauer zum nächsten gescrollt. Das sofortige Scrollen ist ebenso möglich: dazu wird in das Feld Verzögerung der negierte Wert aus dem Feld Anzeigedauer geschrieben (z.B. -2500). Dies führt dazu, daß nach dem Laden der Seite sofort gescrollt wird. Um nun auch das erste Element reinzuscrollen muß im Feld Nummer des Start-Elements der Wert um ein Element erniedrigt werden (z.B. -1).

Probleme und Lösungen

Beim Laden der Seite sind Inhalte nicht komplett sichtbar

Dieses Verhalten tritt bei Webkit-Browsern (Chrome, Safari) auf, wenn keine Größen definiert wurden und/oder man den "responsive"-Modus verwendet.

Im Normalfall wird das JavaScript gestartet nachdem die HTML-Datei geladen und der DOM aus ihr aufgebaut wurde ((document).ready(function() {}). Zu diesem Zeitpunkt sind Bilder noch nicht/nicht komplett geladen und es werden im Gegensatz zu anderen Browsern (wie z.B. FireFox) beim Abfragen der Größen durch jQuery von den Browsern falsche Werte geliefert. Selbst dann wenn diese als Attribute im img-Tag hinterlegt sind.

Ändert man das Startverhalten des JavaScripts auf den Zeitpunkt zu dem die komplette Seite und alle Inhalte geladen sind ((window).load(function() {}) so umgeht man die fehlerhaft gelieferten Größenangaben. Nachteil dieser Methode ist jedoch, daß das Eintreten dieses Zeitpunkts länger dauern kann und die bis dahin geladenen Inhalte der einzelnen Slides gleichzeitig sichtbar werden. Diese werden zwar automatisch versteckt und nach Beendigung des Ladevorgangs sichtbar, nehmen jedoch ihren Raum auf der Seite ein was unschön aussehen kann.

Eine dritte Möglichkeit besteht aus einem Kompromiss der beiden Methoden. Ab Version 1.0.1 der Erweiterung wurde ein JavaScript integriert, das beide Methoden vereint. Das Karussell wird zum frühst möglichen Zeitpunkt initialisiert und dann kontinuierlich so lange bis alle Inhalte geladen wurden.

Den Startzeitpunkt kann man in den Backend-Einstellungen von Contao im Bereich der carouFredSel-Einstellungen umschalten.