Meine bisherigen Slider (NIVO und EasySlider), die auch mit Hilfe von Uwe367 zum Laufen bekommen habe, hängt ein kleiner Beigeschmack mit an: es werden "nur" Bilddokumente geslidert. Ist im gesamten gesehen nicht übel, aber was wäre, wenn man auch ContentParts so verwenden könnte
Als Basis diente mit dieser jQuery-Slider
Hier soll nach der Dokumentation aller Content verwendbar sein. Mit Videos habe ich es nicht probiert, aber im wesentlichen funktioniert es mit allen CPs, die durch ein ein DIV umschlossen sind (einfacher Text funktioniert also nicht )
Nach einigem Herantasten ist mir dann die Idee mit den CostumerBlocks eingefallen und schon war die Lösung in meinem Kopf fertig.
Von der oben angegebenen Website habe ich mir die notwendigen JS/CSS-File geladen und mir die sehr einfach aufgebaute Struktur angeschaut. Hier wird bereits deutlich, es funktioniert ausschließlich nur mit DIV-CONTENT.
Code: Select all
<div id="demo">
<div class="slides">
<div>...</div> <--- Das sind unsere CPs
<div>...</div> <--- Das sind unsere CPs
<div>...</div> <--- Das sind unsere CPs
<div>...</div> <--- Das sind unsere CPs
</div>
</div>
0. Voraussetzung: Übertrage die CSS/JS-Files in das im Code angegebene Verzeichnis.
1. Vorbereitung: einen CostumerBlock in der Vorlage neu definieren { CONTENSLIDER } und mit entsprechenden Angaben versehen:
Code: Select all
<!-- JS: /template/lib/jquery/plugin/jContent/jquery.easing.min.1.3.js -->
<!-- JS: /template/lib/jquery/plugin/jContent/jquery.jcontent.0.8.min.js -->
<!-- CSS: /template/lib/jquery/plugin/jContent/jcontent.css -->
<!-- JS:
$("document").ready(function(){
// ----- Standarddefinitonen zum Ändern ------
$("div#demo").jContent({orientation: 'horizontal',
easing: 'easeOutCirc',
duration: 500,
auto: true,
direction: 'next', //or 'prev'
pause: 1500,
height:230,
width:700,
pause_on_hover:true
});
});
-->
<div class="demo" id="demo">
<div class="slides">{CONTENSLIDER}</div>
</div>
Das war's schon und es funktioniert. Die Anpassungen sollten zuerst im aufrufenden JSscript vorgenommen werden (Breite/ Höhe) und dann kann man mit Firebug an der CSS, soweit es geht rumspielen Vielleicht müssen auch einige CPs angepasst werden, dass diese hier auch laufen? Bilder zum Beispiel stellt sich quer!