Dk carouFredSel: Unterschied zwischen den Versionen

Aus Contao Community Documentation

K (carouFredSel-Karussells auswählen)
K
Zeile 15: Zeile 15:
 
== Wichtig ==
 
== Wichtig ==
 
* Damit carouFredSel gestartet wird, muß im Seitenlayout jQuery zum Layout hinzugefügt werden.  
 
* 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; sowiw vertical-align: top; zuzuweisen;
+
* 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.
* 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.
 
* 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.
 
* 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.
* Bei Einsatz des Grid-Systems von Contao sollte man um das Carousel herum ein leeres DIV anlegen, da sonst unerwünschte Grid-Anweisungen die korrekte Funktion des Carousels behindern. So schreiben sich die Grid-Anweisungen auf das leere DIV und alles ist gut. Hierzu kopiert man am besten das HTML-Template, macht dort die Änderungen und wählt im Anschluß dieses in den Einstellungen aus.
 
  
 
== carouFredSel-Karussells verwalten ==
 
== carouFredSel-Karussells verwalten ==
Zeile 29: Zeile 27:
 
[[Datei:CarouFredSel_auswahl.png]]
 
[[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 dann anschliessend in der Liste auswählen.}}
 
{{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 dann anschliessend in der Liste auswählen.}}
 
 
== carouFredSel-Karussells als Inhalts-Elemente ==
 
== carouFredSel-Karussells als Inhalts-Elemente ==
 
[[Datei:carouFredSel_inhaltselement_1.png]]
 
[[Datei:carouFredSel_inhaltselement_1.png]]
Zeile 38: Zeile 35:
  
 
== carouFredSel-Karussells als Newsticker ==
 
== carouFredSel-Karussells als Newsticker ==
 +
 +
== carouFredSel-Karussells mit CSS gestalten ==
  
 
== Anwendungsanleitungen ==
 
== Anwendungsanleitungen ==
 
Hier werden nach und nach Beschreibungen der Slider-Funktionen veröffentlicht.
 
Hier werden nach und nach Beschreibungen der Slider-Funktionen veröffentlicht.

Version vom 29. November 2012, 14:26 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


Achtung.png Achtung: Hier entsteht aktuell das Handbuch für den caroufredsel-Slider. Ihr könnt gerne daran mitschreiben und z.B. verschiedene Konfigurationen beschreiben.


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 dann anschliessend in der Liste auswählen.

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

Hier werden nach und nach Beschreibungen der Slider-Funktionen veröffentlicht.

Ansichten
Meine Werkzeuge

Contao Community Documentation

omg, ich brauche wirklich ne Freundin... ich lese nachts um 2 den Wiki Beitrag über Comic Sans MS

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge