Slider jQuery i prestashop 1.4.6

[pbpo]

 

Z powodu problemów na IE postanowiłem zrobić od nowa slidery
Wykorzystałem musli jquery. Wygląda to wszystko w ten sposób - > http://supron1.pl/slider/slider.html

Mam problem z wywołaniem animacji slidera przez jquery i moduł musli.
Slidery fizycznie są na stronie ale nie chcą się animować (nie wysuwają się)

 

Wrzuciłem kod do header.tpl wywala mi błąd o treści :

 

Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template

 Samą treść błędu rozumiem, a dzieje się to dokładnie w linijce  z funkcją 

<script type="text/javascript" >
$(function(){
     $('#musli4').musli( { musliPosition: "left", animationAction: "click" } );
});</script>
Część pliku header.tpl który zawiera slider wygląda tak jak niżej,
<div id="left_column" class="column">
<!-- Musli Slider-->
<link rel="stylesheet" type="text/css" href="http://supron1.pl/slider/slider.css" />        
<script type="text/javascript" src="http://supron1.pl/slider/jquery.min.js"></script>
<ul id="musli4" class="musli musli-left">
    <li>
        <img src="http://supron1.pl/like_box/facebook-1.png" />
        <div class="musli-facebook"><div id="fb-root"></div>
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1&appId=107479619442032";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
         <div class="fb-like-box" data-href="http://www.facebook.com/supron1olkusz" data-width="300" data-height="350" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true">
         </div>
        </div>
    </li>
    <li id="li-yt">
        <img src="http://supron1.pl/like_box/youtube-1.png" />
        <div class="musli-youtube">
<div id="musli-yt" >Oglądaj materiały video na naszym kanale w serwisie YouTube </div><a href="http://www.youtube.com/user/supron1pl" style="font-weight: bold;color: rgb(0, 0, 0);position:absolute;left: 80px;">Supron 1 w Olkuszu</a><br />
<div id="musli-yt-can"><script src="//www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=supron1pl&synd=open&w=290&h=385&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
</div>
</div>
    </li>
</ul>
<script type="text/javascript" src="http://supron1.pl/slider/musli.js"></script>
<script type="text/javascript" >
$(function(){
     $('#musli4').musli( { musliPosition: "left", animationAction: "click" } );
});</script>
<!-- Musli Slider End-->

Plik Musli.js:
 

(function($) {
	$.fn.musli = function(options) {

	var settings = $.extend({
		animationAction : 'hover',
		animationSpeed : 1000,
		musliPosition: 'right'
	}, options );

	if(settings.musliPosition == 'top' || settings.musliPosition == 'bottom')
	{
		var animationBegin = {};
			animationBegin[settings.musliPosition] = this.find('li > div').outerHeight();
		var animationEnd = {};
			animationEnd[settings.musliPosition] = "0";
	}
	else
	{
		var animationBegin = {};
			animationBegin[settings.musliPosition] = this.find('li > div').outerWidth();
		var animationEnd = {};
			animationEnd[settings.musliPosition] = "0";
	}

	if(settings.animationAction == 'click'){

		this.find('li > img').click(function(){
			if($(this).parent('li').hasClass('musli-opened')) {
				$(this).parent('li').animate(animationEnd, parseInt(settings.animationSpeed)).removeClass('musli-opened');
			}
			else {
				$(this).parent('li').animate(animationBegin, parseInt(settings.animationSpeed)).addClass('musli-opened');
			}
		});
	}
	else
	{
		this.find('li').hover(
			function(){	$(this).stop().animate(animationBegin, parseInt(settings.animationSpeed)); },
			function(){ $(this).stop().animate(animationEnd, parseInt(settings.animationSpeed)); }
		);			
	}
}
}(jQuery));

$('#musli').musli( { musliPosition: "left", animationAction: "click", animationSpeed: 1500, } );	

Pomożecie ? 

Edited February 24, 2014 by pbpo (see edit history)

[wzr1one]

wrzuciłes to pomiędzy <head> </head> czy gdzieś indziej? Użyłeś znaczników {literal} {/literal} ?

[pbpo]

Odwołania do plików JS zrobiłem w <head></head> w ten sposób - > 

<script type="text/javascript" src="http://supron1.pl/slider/musli.js"></script>	
	<script type="text/javascript" src="http://supron1.pl/slider/musli_style.js"></script>
	<link rel="stylesheet" type="text/css" href="http://supron1.pl/slider/slider_.css" />	
	<script type="text/javascript" src="{$js_dir}tabs/jquery-1.11.0.min.js"></script>
		{$HOOK_HEADER}
	</head>

a kod html wrzuciłem już zaraz po 

<div class="flatClear"><div/>
			<div id="columns">
				<!-- Left -->
				<div id="left_column" class="column">

Wszystko jest w pliku header.tpl 

I tak, jeśli kod js był po <body> dodałem znaczniki {iteral}{/iteral}

Edited February 25, 2014 by pbpo (see edit history)