Contentslider "jContent" läuft in R530
Posted: Fri 14. Jun 2013, 18:10
Es hat eine Weile gedauert ...es läft- siehe hier!
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.
Nachdem ich alles erst mit HTML-CPs ganz urwüchsig und altbacken zum Laufen gebaracht habe, wurden diese HTML-Part step by step umgelagert - in einen Costumerblock
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:
ein HTML-CP mit der einfachen Angabe {CONTENSLIDER} erzeugen! Dann einfach entsprechende CPs erzeugen und als Ausgabeort CONTENSLIDER angeben!
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!
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!
