Hallo liebe Experten,
auf der Suche nach einen schönen Slider gibt es jede Menge kostenpflichte als auch kostenlose Slider.
Wie ich finde, gibt es ein paar sehr schöne Slider von http://www.jssor.com/index.html - hat den schon mal jemand eingebaut?
Das Forum habe ich schon durch, einige Hilfeseiten im Netz auch, aber irgendwie komme ich mit 4.1.10 nicht weiter, zumindest hört es bei JS bei mir auf.
Schaut man sich den einfachsten Slider ohne Schnickschnack an, gibt es vier JS-Dateien, eine Script- und eine DIV-Datei (siehe Bsp.-Code ganz unten).
So, wie ich es verstanden habe, kommen die vier JS-Dateien in die js.php-Datei rein, mit angepasster Nr. am Ende:
Bsp.
$xtMinify->add_resource(_SRV_WEB_TEMPLATES . _STORE_TEMPLATE.'/javascript/xyz.js',160);
$xtMinify->add_resource('xtFramework/library/jquery/xyz.js',170);
Hier weiß ich noch nicht genau, welche Schreibweise richtig ist, ob _SRV oder der komplette Pfad?
Wie dem auch sei, hier gibt mir das Frontend direkt in Zeile 1 folgende Fehlermeldung aus:
"Parse error: Illegal token in file xyz.js' on line 1" - für jede xyz.js Datei.
Der Teil zwischen < script > jQuery... < /script > kommt in die script.js-Datei rein, direkt nach Zeile 1? Oder nach der schließenden ")};" oder ganz am Ende? Hat jedenfalls auch keine Auswirkungen, bzw. erzeugt keine Fehlermeldung.
Der DIV-Bereich kommt in die Index.html-Datei - zeigt leider auch keine Wirkung, außer die Bilder werden angezeigt, aber noch kein Slide-Effekt.
Packe ich den ganzen Code als {literal} in die index.html, dann funktioniert es.
So sollte es aber vermutlich nicht sein, da die Datei dann schon etwas größer wird und der Slider schon recht langsam ist (Zeiteinstellung meine ich jetzt aber nicht oder ist es dann der Server?)?
Hat jemand eine Idee, wie es richtig funktioniert, bzw. wie sich xtc das vorgestellt hat (über js.php, script.js und index.html)?
Wäre auch eine schöne "Grundgerüst"-Ergänzung für xtc.
Bin für jede Hilfe dankbar.
Herzliche Grüße
Nils
Hier der Code als literal eingebunden (soll mit jeder jquery-Datei abwärtskompatibel funktionieren, habe es auch mal ohne 1.9.1 versucht, passiert nichts )
< script type="text/javascript" src="templates/xt_grid/javascript/jquery-1.9.1.min.js" >< /script >
< script type="text/javascript" src="templates/xt_grid/javascript/jssor.core.js" >< /script >
< script type="text/javascript" src="templates/xt_grid/javascript/jssor.utils.js" >< /script >
< script type="text/javascript" src="templates/xt_grid/javascript/jssor.slider.js" >< /script >
< script >
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$DragOrientation: 3 //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><img u="image" src="templates/xt_grid/img/landscape/01.jpg" /></div>
<div><img u="image" src="templates/xt_grid/img/landscape/02.jpg" /></div>
<div><img u="image" src="templates/xt_grid/img/landscape/03.jpg" /></div>
<div><img u="image" src="templates/xt_grid/img/landscape/04.jpg" /></div>
<div><img u="image" src="templates/xt_grid/img/landscape/05.jpg" /></div>
<div><img u="image" src="templates/xt_grid/img/landscape/06.jpg" /></div>
<div><img u="image" src="templates/xt_grid/img/landscape/07.jpg" /></div>
<div><img u="image" src="templates/xt_grid/img/landscape/08.jpg" /></div>
</div>
<a style="display: none" href="">content slider</a>
</div>