Liquidslider: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(→Cross-Links) |
(→Hash Links) |
||
Zeile 50: | Zeile 50: | ||
</source> | </source> | ||
Dabei ist egal, wo sich der entsprechende Link auf der Seite befindet. | Dabei ist egal, wo sich der entsprechende Link auf der Seite befindet. | ||
+ | ==Cross-Link Namen verwenden== | ||
+ | Dies erlaubt Ihnen Hash-Namen für Cross-Links zu verwenden (Beispiel: statt href="#1" - href="#ueber-mich"). Nützlich, wenn Sie öfters die Reihenfolge der Slides ändern. |
Aktuelle Version vom 15. Mai 2013, 20:40 Uhr
betrifft | |
---|---|
Contao Version | 2.11.x bis 3.0.x |
Extensions | liquidslider |
Inhaltsverzeichnis
Kurzbeschreibung
Ein responsive, swipe-fähiger, HTML5 jQuery Content Slider sowohl für Web als auch mobile Geräte. Der Liquid Slider ist ein responsive, swipe-fähiger, HTML5 jQuery Content Slider, der sowohl für Web als auch mobile Geräte eingesetzt werden kann.
Installation
Die Erweiterung kann einfach im Backend über den Erweiterungskatalog installiert werden. Für eine Installation in Contao 2.11.x wird zusätzlich die Erweiterung jQuery benötigt. Nach der Installation sollte im Seitenlayout jQuery aktiviert werden.
Anlegen eines neuen Liquid Sliders
- Im Artikel wird zunächst ein Inhaltselement vom Typ "LiquidSlider - Start" angelegt. Für den Slider muss ein Name vergeben werden, alle weiteren vordefinierten Einstellungen sollten für einen ersten Test ausreichen.
- Als nächtes wird ein Inhaltselement vom Typ "LiquidSlider - Ende" angelegt. Alle Inhaltselemente, welche nun zwischen Start- und Endelement angelegt werden, werden vom Slider erkannt und geslidet.
Erklärung zu den Einstellmöglichkeiten
Hash Links
Mit Hash-Links können Elemente im Slider gezielt über interne Links oder von externen Seiten angesteuert werden. Beispiel für einen Link auf der gleichen Seite:
<a href="http://www.example.com/#3">zeige Inhaltselement 3</a>
Beispiel für einen Link von einer anderen/externe Seite:
<a href="http://www.example.com/beispielseite.html#3">zeige Inhaltselement 3</a>
Hash-Link Namen
Hiermit können für die Hash-Tags, anstelle der Nummern, auch Namen verwendet werden.
<a href="http://www.example.com/#about-me">about me</a>
Hash-Titel Element
Hash-Link Namen können durch die Angabe eines HTML-Elements, welches sich innerhalb eines jeden Inhaltselements befindet, automatisch erzeugt werden. Sollte z.B. in jedem Inhaltselement eine Überschrift H2 vorkommen, kann mit der Angabe "H2" der Hash-Link Name daraus generiert werden. Es ist auch möglich nur die Elemente, die eine bestimmte Klasse besitzen z.B. "H2.title" dafür zu verwenden.
Hash-Tag Trennung
Hier können ein oder mehrere Zeichen für die Verwendung nach dem # Symbol angegeben werden. (Beispiel: "/", oder "!/")
Hash TLD
Geben Sie hier eine Zeichenfolge ein, welche an den Hash-Tag angehangen werden soll.
Cross-Links
Aktiviert/Deaktiviert die Verwendung von Cross-Links zur Steuerung des Sliders. Beispiel: href="#1" (auch #left oder #right möglich) mit der Referenzierung auf den Namen des anzusteuernden Sliders (unter Slidername vergeben). Beispiele:
<a href="#1" data-liquidslider-ref="slider-id">zum ersten Element</a> <a href="#left" data-liquidslider-ref="slider-sliderName">zum vorherigen Element</a> <a href="#right" data-liquidslider-ref="slider-sliderName">zum nächsten Element</a>
Dabei ist egal, wo sich der entsprechende Link auf der Seite befindet.
Cross-Link Namen verwenden
Dies erlaubt Ihnen Hash-Namen für Cross-Links zu verwenden (Beispiel: statt href="#1" - href="#ueber-mich"). Nützlich, wenn Sie öfters die Reihenfolge der Slides ändern.