Dk carouFredSel: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K
Zeile 7: Zeile 7:
 
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
 
| TrackerLink=https://github.com/dklemmt/contao_dk_caroufredsel
 
}}
 
}}
 
{{Achtung|Hier entsteht aktuell das Handbuch für den caroufredsel-Slider. Ihr könnt gerne daran mitschreiben und z.B. verschiedene Konfigurationen beschreiben.}}
 
  
 
== Installation ==
 
== Installation ==
Zeile 44: Zeile 42:
 
= Probleme und Lösungen =
 
= Probleme und Lösungen =
 
== Beim Laden der Seite sind Inhalte nicht komplett sichtbar ==
 
== Beim Laden der Seite sind Inhalte nicht komplett sichtbar ==
Dieses Verhalten tritt bei ''horizontalen'' Karussells und ''variabler'' Höhe bei Webkit-Browsern (Chrome, Safari) auf. Normalerweise wird das JavaScript erst gestartet, wenn die Seite komplett geladen wurde (onDocumentReady). Bei diesen Browsern scheint zu diesem Zeitpunkt allerdings die interne Größenberechnung von carouFredSel nicht korrekt zu funktionieren. Wird das JavaScript jedoch zu einem früheren Zeitpunkt (onWindowLoad) gestartet tritt dieses Verhalten nicht auf. Den Startzeitpunkt kann man in den Backend-Einstellungen von Contao im Bereich der ''carouFredSel-Einstellungen'' umschalten.
+
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.

Version vom 27. Februar 2013, 13:45 Uhr

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.

Erweiterungs-Übersicht
Name des Entwicklers Dirk Klemmt (Contao-Erweiterung), Fred Heusschen (jQuery.carouFredSel)
Kompatibilität mit Contao Version 3.0.0
Link zum Extension Repository http://contao.org/de/extension-list/view/dk_caroufredsel.html
Link zum Tracker https://github.com/dklemmt/contao_dk_caroufredsel


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 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.
  • Das Karussell sollte "out of the box" funktionieren. Werden Elemente teilweise abgeschnitten kann es helfen eine Breite/Höhe in den zugehörigen Einstellungen anzugeben.
  • 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. Im Safari wird z.B. ein sehr großer Abstand drumherum hinzugefügt.

carouFredSel-Karussells verwalten

CarouFredSel verwalten.png

Achtung.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.

CarouFredSel auswahl.png

Hinweis.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

CarouFredSel inhaltselement 1.png

CarouFredSel inhaltselement 2.png

Hinweis.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.

Ansichten
Meine Werkzeuge

Contao Community Documentation

Pelle: gibt's ein besseres Wort für "beschränkt"?
Thomas: "Kunde"

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge