Contao Community Documentation - Benutzerbeiträge [de]

Dk carouFredSel

2013-04-05T22:59:42Z

Dirch:

[[Category:Extensions]]
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 [http://coolcarousels.frebsite.nl Originalseite] zu finden.
{{ExtInfo
| Dev=Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
| Version=3.0.0
| ERLink=http://contao.org/de/extension-list/view/dk_caroufredsel.html
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
}}

== 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 [http://www.contao-community.de/showthread.php?76-Third-Party-Erweiterungen-manuell-installieren 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 ==
[[Datei:CarouFredSel_verwalten.png]]
{{Achtung|Man kann bei jedem Karussell Inhalts-Elemente hinterlegen. Diese werden jedoch '''nur''' verwendet, falls das Karussell als Modul eingebunden wird!}}
== 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.

[[Datei:CarouFredSel_auswahl.png]]
{{Hinweis|Alle Templates können an den eigenen Bedarf angepasst werden. Dazu kopiert man das entsprechende und editiert es. Ändert man seinen Namen muß man dieses anschliessend in der Liste im gewünschten Inhalts-Element oder Modul auswählen. In Contao 3.0.0 und 3.0.1 ist ein Fehler enthalten, der diese Templates nur dann findet, wenn sie im Template-Wurzel-Verzeichnis abgelegt wurden.}}
== carouFredSel-Karussells als Inhalts-Elemente ==
[[Datei:carouFredSel_inhaltselement_1.png]]

[[Datei:carouFredSel_inhaltselement_2.png]]
{{Hinweis|Reichen die einfachen Inhalts-Elemente nicht aus, so kann man komplexere in einem eigenen Artikel erstellen und diesen dann über das Include-Element ''Artikel'' einfügen. Dabei ist zu beachten, daß die gesamten Inhalts-Elemente in diesem (Sub-)Artikel von einem DIV-Container eingeschlossen werden.}}
== 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.
{{Achtung|Man sollte immer nur eines der beiden Karussells als Steuerungs-Element ansehen, welches dann auch die Navigations-Elemente darstellt. Das hängt damit zusammen, da bestimmte Callback-Funktionen des "Client"-Karussells beim synchronisierten Scrollen nicht aufgerufen werden was dazu führt, daß entsprechende CSS-Klassen wie ''visible'' nicht gesetzt werden. Werden diese nicht benötigt, kann man selbstverständlich auch in beide Richtungen synchronisieren.}}
== 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.
{{Achtung|Hierbei handelt es sich nicht um einen Fehler in carouFredSel bzw. jQuery!}}

Dk carouFredSel

2013-04-03T23:10:24Z

Dirch:

[[Category:Extensions]]
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 [http://coolcarousels.frebsite.nl Originalseite] zu finden.
{{ExtInfo
| Dev=Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
| Version=3.0.0
| ERLink=http://contao.org/de/extension-list/view/dk_caroufredsel.html
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
}}

== 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
* 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 [http://www.contao-community.de/showthread.php?76-Third-Party-Erweiterungen-manuell-installieren 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 ==
[[Datei:CarouFredSel_verwalten.png]]
{{Achtung|Man kann bei jedem Karussell Inhalts-Elemente hinterlegen. Diese werden jedoch '''nur''' verwendet, falls das Karussell als Modul eingebunden wird!}}
== 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.

[[Datei:CarouFredSel_auswahl.png]]
{{Hinweis|Alle Templates können an den eigenen Bedarf angepasst werden. Dazu kopiert man das entsprechende und editiert es. Ändert man seinen Namen muß man dieses anschliessend in der Liste im gewünschten Inhalts-Element oder Modul auswählen. In Contao 3.0.0 und 3.0.1 ist ein Fehler enthalten, der diese Templates nur dann findet, wenn sie im Template-Wurzel-Verzeichnis abgelegt wurden.}}
== carouFredSel-Karussells als Inhalts-Elemente ==
[[Datei:carouFredSel_inhaltselement_1.png]]

[[Datei:carouFredSel_inhaltselement_2.png]]
{{Hinweis|Reichen die einfachen Inhalts-Elemente nicht aus, so kann man komplexere in einem eigenen Artikel erstellen und diesen dann über das Include-Element ''Artikel'' einfügen. Dabei ist zu beachten, daß die gesamten Inhalts-Elemente in diesem (Sub-)Artikel von einem DIV-Container eingeschlossen werden.}}
== 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.
{{Achtung|Man sollte immer nur eines der beiden Karussells als Steuerungs-Element ansehen, welches dann auch die Navigations-Elemente darstellt. Das hängt damit zusammen, da bestimmte Callback-Funktionen des "Client"-Karussells beim synchronisierten Scrollen nicht aufgerufen werden was dazu führt, daß entsprechende CSS-Klassen wie ''visible'' nicht gesetzt werden. Werden diese nicht benötigt, kann man selbstverständlich auch in beide Richtungen synchronisieren.}}
== 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.
{{Achtung|Hierbei handelt es sich nicht um einen Fehler in carouFredSel bzw. jQuery!}}

Dk carouFredSel

2013-04-03T22:41:16Z

Dirch:

[[Category:Extensions]]
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 [http://coolcarousels.frebsite.nl Originalseite] zu finden.
{{ExtInfo
| Dev=Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
| Version=3.0.0
| ERLink=http://contao.org/de/extension-list/view/dk_caroufredsel.html
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
}}

== 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
* 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 [http://www.contao-community.de/showthread.php?76-Third-Party-Erweiterungen-manuell-installieren 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 ==
[[Datei:CarouFredSel_verwalten.png]]
{{Achtung|Man kann bei jedem Karussell Inhalts-Elemente hinterlegen. Diese werden jedoch '''nur''' verwendet, falls das Karussell als Modul eingebunden wird!}}
== 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.

[[Datei:CarouFredSel_auswahl.png]]
{{Hinweis|Alle Templates können an den eigenen Bedarf angepasst werden. Dazu kopiert man das entsprechende und editiert es. Ändert man seinen Namen muß man dieses anschliessend in der Liste im gewünschten Inhalts-Element oder Modul auswählen. In Contao 3.0.0 und 3.0.1 ist ein Fehler enthalten, der diese Templates nur dann findet, wenn sie im Template-Wurzel-Verzeichnis abgelegt wurden.}}
== carouFredSel-Karussells als Inhalts-Elemente ==
[[Datei:carouFredSel_inhaltselement_1.png]]

[[Datei:carouFredSel_inhaltselement_2.png]]
{{Hinweis|Reichen die einfachen Inhalts-Elemente nicht aus, so kann man komplexere in einem eigenen Artikel erstellen und diesen dann über das Include-Element ''Artikel'' einfügen. Dabei ist zu beachten, daß die gesamten Inhalts-Elemente in diesem (Sub-)Artikel von einem DIV-Container eingeschlossen werden.}}
== 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.
== 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.
{{Achtung|Hierbei handelt es sich nicht um einen Fehler in carouFredSel bzw. jQuery!}}

Dk carouFredSel

2013-03-04T15:36:58Z

Dirch:

[[Category:Extensions]]
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 [http://coolcarousels.frebsite.nl Originalseite] zu finden.
{{ExtInfo
| Dev=Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
| Version=3.0.0
| ERLink=http://contao.org/de/extension-list/view/dk_caroufredsel.html
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
}}

== 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 Elemente 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
* zufälliges Start-Element
* speichern der letzten Position zwischen Seitenwechseln
* eingebaute Tastatur- und Maus-Navigation und 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''
* 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 diese über die Erweiterungsverwaltung installiert werden. Falls diese nicht verfügbar sein sollte gibt es noch die Möglichkeit der [http://www.contao-community.de/showthread.php?76-Third-Party-Erweiterungen-manuell-installieren manuellen Installation]. Sollte die Erweiterung manuell installiert werden müssen auch alle Abhängigkeiten mit 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 ==
[[Datei:CarouFredSel_verwalten.png]]
{{Achtung|Man kann bei jedem Karussell Inhalts-Elemente hinterlegen. Diese werden jedoch '''nur''' verwendet, falls das Karussell als Modul eingebunden wird!}}
== 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.

[[Datei:CarouFredSel_auswahl.png]]
{{Hinweis|Alle Templates können an den eigenen Bedarf angepasst werden. Dazu kopiert man das entsprechende und editiert es. Ändert man seinen Namen muß man dieses anschliessend in der Liste im gewünschten Inhalts-Element oder Modul auswählen. In Contao 3.0.0 und 3.0.1 ist ein Fehler enthalten, der diese Templates nur dann findet, wenn sie im Template-Wurzel-Verzeichnis abgelegt wurden.}}
== carouFredSel-Karussells als Inhalts-Elemente ==
[[Datei:carouFredSel_inhaltselement_1.png]]

[[Datei:carouFredSel_inhaltselement_2.png]]
{{Hinweis|Reichen die einfachen Inhalts-Elemente nicht aus, so kann man komplexere in einem eigenen Artikel erstellen und diesen dann über das entsprechende Include-Element einfügen.}}
== carouFredSel-Karussells als Module ==

== carouFredSel-Karussells als Newsticker ==

== carouFredSel-Karussells mit CSS gestalten ==

= 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.
== 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 in 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.
{{Achtung|Hierbei handelt es sich nicht um einen Fehler in carouFredSel bzw. jQuery!}}

Dk carouFredSel

2013-02-27T21:13:45Z

Dirch: /* Anwendungsanleitungen */

[[Category:Extensions]]
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 [http://coolcarousels.frebsite.nl Originalseite] zu finden.
{{ExtInfo
| Dev=Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
| Version=3.0.0
| ERLink=http://contao.org/de/extension-list/view/dk_caroufredsel.html
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
}}

== 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 Elemente 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
* zufälliges Start-Element
* speichern der letzten Position zwischen Seitenwechseln
* eingebaute Tastatur- und Maus-Navigation und 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''
* 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 diese über die Erweiterungsverwaltung installiert werden. Falls diese nicht verfügbar sein sollte gibt es noch die Möglichkeit der [http://www.contao-community.de/showthread.php?76-Third-Party-Erweiterungen-manuell-installieren manuellen Installation]. Sollte die Erweiterung manuell installiert werden müssen auch alle Abhängigkeiten mit 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 ==
[[Datei:CarouFredSel_verwalten.png]]
{{Achtung|Man kann bei jedem Karussell Inhalts-Elemente hinterlegen. Diese werden jedoch '''nur''' verwendet, falls das Karussell als Modul eingebunden wird!}}
== 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.

[[Datei:CarouFredSel_auswahl.png]]
{{Hinweis|Alle Templates können an den eigenen Bedarf angepasst werden. Dazu kopiert man das entsprechende und editiert es. Ändert man seinen Namen muß man dieses anschliessend in der Liste im gewünschten Inhalts-Element oder Modul auswählen. In Contao 3.0.0 und 3.0.1 ist ein Fehler enthalten, der diese Templates nur dann findet, wenn sie im Template-Wurzel-Verzeichnis abgelegt wurden.}}
== carouFredSel-Karussells als Inhalts-Elemente ==
[[Datei:carouFredSel_inhaltselement_1.png]]

[[Datei:carouFredSel_inhaltselement_2.png]]
{{Hinweis|Reichen die einfachen Inhalts-Elemente nicht aus, so kann man komplexere in einem eigenen Artikel erstellen und diesen dann über das entsprechende Include-Element einfügen.}}
== carouFredSel-Karussells als Module ==

== carouFredSel-Karussells als Newsticker ==

== carouFredSel-Karussells mit CSS gestalten ==

= 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.
== 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 falsche Werte geliefert. Selbst dann wenn diese als Attribute 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.

Dk carouFredSel

2013-02-27T16:23:11Z

Dirch:

[[Category:Extensions]]
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 [http://coolcarousels.frebsite.nl Originalseite] zu finden.
{{ExtInfo
| Dev=Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
| Version=3.0.0
| ERLink=http://contao.org/de/extension-list/view/dk_caroufredsel.html
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
}}

== 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 Elemente 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
* zufälliges Start-Element
* speichern der letzten Position zwischen Seitenwechseln
* eingebaute Tastatur- und Maus-Navigation und 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''
* 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 diese über die Erweiterungsverwaltung installiert werden. Falls diese nicht verfügbar sein sollte gibt es noch die Möglichkeit der [http://www.contao-community.de/showthread.php?76-Third-Party-Erweiterungen-manuell-installieren manuellen Installation]. Sollte die Erweiterung manuell installiert werden müssen auch alle Abhängigkeiten mit 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 ==
[[Datei:CarouFredSel_verwalten.png]]
{{Achtung|Man kann bei jedem Karussell Inhalts-Elemente hinterlegen. Diese werden jedoch '''nur''' verwendet, falls das Karussell als Modul eingebunden wird!}}
== 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.

[[Datei:CarouFredSel_auswahl.png]]
{{Hinweis|Alle Templates können an den eigenen Bedarf angepasst werden. Dazu kopiert man das entsprechende und editiert es. Ändert man seinen Namen muß man dieses anschliessend in der Liste im gewünschten Inhalts-Element oder Modul auswählen. In Contao 3.0.0 und 3.0.1 ist ein Fehler enthalten, der diese Templates nur dann findet, wenn sie im Template-Wurzel-Verzeichnis abgelegt wurden.}}
== carouFredSel-Karussells als Inhalts-Elemente ==
[[Datei:carouFredSel_inhaltselement_1.png]]

[[Datei:carouFredSel_inhaltselement_2.png]]
{{Hinweis|Reichen die einfachen Inhalts-Elemente nicht aus, so kann man komplexere in einem eigenen Artikel erstellen und diesen dann über das entsprechende Include-Element einfügen.}}
== carouFredSel-Karussells als Module ==

== carouFredSel-Karussells als Newsticker ==

== carouFredSel-Karussells mit CSS gestalten ==

= Anwendungsanleitungen =
== 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 falsche Werte geliefert. Selbst dann wenn diese als Attribute 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.

Dk carouFredSel

2013-02-27T13:16:05Z

Dirch:

[[Category:Extensions]]
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 [http://coolcarousels.frebsite.nl Originalseite] zu finden.
{{ExtInfo
| Dev=Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
| Version=3.0.0
| ERLink=http://contao.org/de/extension-list/view/dk_caroufredsel.html
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
}}

== Was kann carouFredSel? ==
* automatisches scrollen oder scrollen durch Buttons, mittels Tastatur, dem Mausrad oder durch Wischen
* konfigurierbare Anzahl von gleichzeitig scrollbaren Elementen
* konfigurierbare Anzeigedauer und Verzögerung bis das erste Mal gescrollt wird
* verschiedene Arten von Pausen bei Maus-Hover
* 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 von Haus aus.
* 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
* zufälliges Start-Element
* speichern der letzten Position zwischen Seitenwechseln
* eingebaute Tastatur- und Maus-Navigation und 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''
* 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 diese über die Erweiterungsverwaltung installiert werden. Falls diese nicht verfügbar sein sollte gibt es noch die Möglichkeit der [http://www.contao-community.de/showthread.php?76-Third-Party-Erweiterungen-manuell-installieren manuellen Installation]. Sollte die Erweiterung manuell installiert werden müssen auch alle Abhängigkeiten mit 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 ==
[[Datei:CarouFredSel_verwalten.png]]
{{Achtung|Man kann bei jedem Karussell Inhalts-Elemente hinterlegen. Diese werden jedoch '''nur''' verwendet, falls das Karussell als Modul eingebunden wird!}}
== 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.

[[Datei:CarouFredSel_auswahl.png]]
{{Hinweis|Alle Templates können an den eigenen Bedarf angepasst werden. Dazu kopiert man das entsprechende und editiert es. Ändert man seinen Namen muß man dieses anschliessend in der Liste im gewünschten Inhalts-Element oder Modul auswählen. In Contao 3.0.0 und 3.0.1 ist ein Fehler enthalten, der diese Templates nur dann findet, wenn sie im Template-Wurzel-Verzeichnis abgelegt wurden.}}
== carouFredSel-Karussells als Inhalts-Elemente ==
[[Datei:carouFredSel_inhaltselement_1.png]]

[[Datei:carouFredSel_inhaltselement_2.png]]
{{Hinweis|Reichen die einfachen Inhalts-Elemente nicht aus, so kann man komplexere in einem eigenen Artikel erstellen und diesen dann über das entsprechende Include-Element einfügen.}}
== carouFredSel-Karussells als Module ==

== carouFredSel-Karussells als Newsticker ==

== carouFredSel-Karussells mit CSS gestalten ==

= Anwendungsanleitungen =
== 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 falsche Werte geliefert. Selbst dann wenn diese als Attribute 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.

Dk carouFredSel

2013-02-27T12:47:44Z

Dirch: /* Beim Laden der Seite sind Inhalte nicht komplett sichtbar */

Dk carouFredSel

2013-02-27T12:47:31Z

Dirch: /* Beim Laden der Seite sind Inhalte nicht komplett sichtbar */

Dk carouFredSel

2013-02-27T12:46:33Z

Dirch:

Dk carouFredSel

2013-02-27T12:45:57Z

Dirch:

Dk carouFredSel

2012-12-16T00:12:47Z

Dirch:

Dk carouFredSel

2012-12-16T00:11:54Z

Dirch: /* carouFredSel-Karussells auswählen */

Dk carouFredSel

2012-12-12T12:48:27Z

Dirch:

Dk carouFredSel

2012-12-01T11:29:04Z

Dirch: /* Erstes Element nach dem Laden reinscrollen lassen */

Dk carouFredSel

2012-12-01T11:27:24Z

Dirch: /* Anwendungsanleitungen */

Dk carouFredSel

2012-12-01T11:24:39Z

Dirch: /* Anwendungsanleitungen */

Dk carouFredSel

2012-12-01T11:24:18Z

Dirch: /* Anwendungsanleitungen */

Dk carouFredSel

2012-11-29T13:26:05Z

Dirch:

Dk carouFredSel

2012-11-29T13:22:11Z

Dirch: /* carouFredSel-Karussells auswählen */

Dk carouFredSel

2012-11-27T12:02:45Z

Dirch: /* carouFredSel-Karussells auswählen */

Dk carouFredSel

2012-11-27T11:56:50Z

Dirch: /* carouFredSel-Karussells auswählen */

Dk carouFredSel

2012-11-26T23:41:34Z

Dirch:

Datei:CarouFredSel inhaltselement 2.png

2012-11-26T23:39:39Z

Dirch: hat eine neue Version von „Datei:CarouFredSel inhaltselement 2.png“ hochgeladen: Zurückgesetzt auf die Version vom 26. November 2012, 16:57 Uhr

Datei:CarouFredSel auswahl.png

2012-11-26T23:38:30Z

Dirch:

Datei:CarouFredSel inhaltselement 2.png

2012-11-26T23:37:00Z

Dirch: hat eine neue Version von „Datei:CarouFredSel inhaltselement 2.png“ hochgeladen

Dk carouFredSel

2012-11-26T17:07:27Z

Dirch:

Dk carouFredSel

2012-11-26T17:06:12Z

Dirch: /* carouFredSel-Karussells verwalten (ab Beta 3) */

Dk carouFredSel

2012-11-26T16:58:41Z

Dirch: /* carouFredSel-Karussells als Inhalts-Elemente */

Dk carouFredSel

2012-11-26T16:58:19Z

Dirch: /* carouFredSel-Karussells als Inhalts-Elemente */

Datei:CarouFredSel inhaltselement 2.png

2012-11-26T16:57:52Z

Dirch: hat eine neue Version von „Datei:CarouFredSel inhaltselement 2.png“ hochgeladen

Dk carouFredSel

2012-11-26T16:55:18Z

Dirch: /* carouFredSel-Karussells als Inhalts-Elemente */

Dk carouFredSel

2012-11-26T16:02:35Z

Dirch: /* carouFredSel-Karussells als Inhalts-Elemente */

Datei:CarouFredSel inhaltselement 2.png

2012-11-26T16:00:27Z

Dirch:

Datei:CarouFredSel inhaltselement 1.png

2012-11-26T15:59:48Z

Dirch:

Dk carouFredSel

2012-11-26T12:13:42Z

Dirch: /* carouFredSel-Karussells verwalten (ab Beta 3) */

Datei:CarouFredSel verwalten.png

2012-11-26T12:11:07Z

Dirch:

Dk carouFredSel

2012-11-21T17:42:14Z

Dirch: /* Wichtig */

Dk carouFredSel

2012-11-21T15:49:42Z

Dirch: