Jssor Slider - Einbauhilfe

[NilsK]

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>

[[email protected]]

Hallo Nilsk,

deine JS Dateien im Body einzubauen ist eigentlich nicht gut, da solche Dateien grundsätzlich im Header eingebaut werden sollten.

Ich habe den JSSOR Slider zwar noch nie irgendwoe eingebaut aber soweit ich das seh müsstest du in deinem js.php file etwa folgendes einbauen:

$xtMinify->add_resource( _SRV_WEB_TEMPLATES._STORE_TEMPLATE. '/javascript/jssor.slider.mini.js',140);

wichtig dabei ist, dass oberer Code VOR

$xtMinify->add_resource( _SRV_WEB_TEMPLATES._STORE_TEMPLATE. '/javascript/script.js',160);

steht. Jquery selbst brauchst du nicht einzubinden, da dies normalerweise schon von xtCommerce eingebunden wird. Schau dafür im Shop-Backend unter "Shop-Einstellungen > Template" nach. Du musst eine jQuery Version ausgewählt haben und eingestellt haben, dass die Biblithek geladen wird (CDN kannst du auf OFF lassen). In der Datei script.js machst du nach dem geöfnetten "$(document).ready(function(){" deinen Code rein:

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);

Den Rest kannst du wie schon oben geschrieben direkt im Template einbauen. Für HTML-Code benötigst du allerdings kein Literal .

BTW. Schau dir das mal an: http://www.webhosting-finder.de/ecommerce/nivo-slider-in-xtcommerce-4-1-xt_grid.html.

Falls du das auch für den JSSOR Slider umsetzen kannst sparrst du dir ne Menge Administrations-Arbeit später und musst nicht immer mühsam über das template deine Bilder wechseln.

[NilsK]

Hallo,

wenn ich die drei Dateien (core/utils/slider) in die js.php Datei einbinde:

$xtMinify->add_resource(_SRV_WEB_TEMPLATES . _STORE_TEMPLATE.'/javascript/jssor.core.js',100);

$xtMinify->add_resource(_SRV_WEB_TEMPLATES . _STORE_TEMPLATE.'/javascript/jssor.jssor.utils.js',120);

$xtMinify->add_resource(_SRV_WEB_TEMPLATES . _STORE_TEMPLATE.'/javascript/jssor.slider.js',140);

$xtMinify->add_resource(_SRV_WEB_TEMPLATES . _STORE_TEMPLATE.'/javascript/script.js',160);

$xtMinify->add_resource('xtFramework/library/jquery/pikaday.jquery.min.js',180);

$xtMinify->add_resource('xtFramework/library/jquery/moments.js',200);

?>

dann erfolgt folgende Fehlermeldung:

Parse error: Illegal token in file 'jssor.core.js' on line 1

Parse error: Illegal token in file 'jssor.utils.js' on line 1

Parse error: Illegal token in file 'jssor.slider.js' on line 1

Später wollte ich es auch nach der Anleitung einbauen, zum testen erst mal so als literal, ob es überhaupt funktioniert.

Sonstige Ideen, woran es liegen könnte?

Herzliche Grüße

Nils

[NilsK]

Hallo liebe Leute,

habe mal 2-3 andere Slider eingebaut, da funktioniert es problemlos, allerdings gefallen die mir nicht.

Wenn ich vor der script.js dies einfüge:

$xtMinify->add_resource(_SRV_WEB_TEMPLATES . _STORE_TEMPLATE.'/javascript/jssor.slider.mini.js',100);

...kommt folgende Fehlermeldung und der Slider funktioniert auch nicht (Bild wir angezeigt, ist logisch):

Parse error: Illegal token in file 'jssor.slider.mini.js' on line 1

Allerdings gibt das Netz nicht viel über die Meldung her und da hört mein Wissen leider auch auf - hat jemand eine Idee woran es liegen kann?

Den Script-Teil (var options = { ...) kann ich auch nur nach der Tab-Code einfügen, da sonst die Bewertungen unter dem Produkt ausgegeben werden (hier kommt sich vermutlich "gleicher" Programmcode in die Quere?) - scheint dann wohl zu funktionieren.

Bin für jede Hilfe dankbar.

Herzliche Grüße

Nils

[[email protected]]

Ich kann dir zwar keine direkt Lösung geben aber ich habe so das Gefühl dass da etwas nicht gefunden wird und deshalb der Error auftaucht.

Falls du Chrome oder Firefox nutzt kannst du das rel. einfach abchecken. Aktiviere bei Chrome die Entwicklertools (diese sollten am "unteren Teil" deines Browsers auftauchen) oder lade dir bei Firefox das "Firebug" Plugin runter.

Jetzt solltest du erstmal im Backend unter "Einstellungen > Konfiguration > Suchmaschinen" Javascript minify Optionen auf "Einzeln ausliefern" einstellen und speichern.

Wenn du im Frontend nun in den Entwicklertools auf den "Tab" Network geht und die Seite neu lädst siehst du welche dateien alle geladen werden. Scrolle da mal durch und schaue ob alle deine Javacript dateien auch geladen werden. Falls etwas nicht geladen wird wird dir das mit roter Schrift angezeigt und in der Spalte Status steht vermutlich 404. Falls dies der Fall wäre hast du irgend eine datei entweder falsch abgelegt oder die Pfadangabe falsch gesetzt. Check das mal ab

[NilsK]

Hi,

habe unter "Einstellungen > Konfiguration > Suchmaschinen" Javascript minify Optionen auf "Einzeln ausliefern" eingestellt und siehe da, es funktioniert schon, keine Fehlermeldung mehr - aber das ist vermutlich nicht Sinn & Zweck der Sache, oder?

Ok, habe Firebug installiert.

Unter Netzwerk/Javascript wird alles geladen (Status: 200 ok). Nichts rotes & kein 404.

Wenn ich statt Netzwerk auf den Javascript-Tab gehe, wird mir immerhin: $, Pikaday und jQuery im rechten Fenster (Überwachen) mit rot angezeigt...

Herzliche Grüße

Nils

[NilsK]

Hallo liebe Gemeinde,

gibt es weitere Ideen, woran es liegen könnte?

Herzliche Grüße

Nils

[NilsK]

Hallo liebe Experten,

wie "schlimm" ist es denn für den Shop oder für die Performance, wenn ich unter:

"Einstellungen > Konfiguration > Suchmaschinen" Javascript minify Optionen auf "Einzeln ausliefern" einstelle?

Weil nur unter dieser Option läuft der Slider...

Bin für jeden Hinweis sehr dankbar. :D

Herzliche Grüße

Nils