Reputation: 2383
I've written a little slider script in jQuery which I want to run in my Magento store. I have included this script in my view.phtml but it doesn't seem to work. What am I doing wrong? I'm pretty new to Magento and have no idea on how to add custom scripts.
<script type="text/javascript">// < ![CDATA[
jQuery(document).ready(function(){
var active = 0; // starts at zero
var list = jQuery('ul');
list.children('li').eq('0').siblings().hide(); // Hide all except first list element
jQuery('.next').bind('click', function() {
active = active == list.children('li').length-1 ? 0 : active + 1;
});
jQuery('.prev').bind('click', function() {
active = active == 0 ? list.children('li').length-1 : active - 1;
});
var getActive = function() {
return list.children('li').eq(active);
};
jQuery('.prev,.next').bind('click', function() {
getActive().fadeIn().siblings().hide();
});
});// ]]></script>
And here is my HTML in view.phtml:
<ul>
<li>img1</li>
<li>img1</li>
<li>img1</li>
</ul>
Upvotes: 3
Views: 7146
Reputation: 75133
First things first: Magento does not use jQuery.
Magento uses PrototypeJs, and either convert your jQuery into PrototypeJs or you have to load jQuery, use the noConflict
method so they both run seamlessly.
To load jQuery in your page, either you use the .xml
template to load it into all your pages, or if it's only in this particular page, you could simply load it before your script, for example:
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
// noConflict so we can use both libraries
$.noConflict();
// your current code here
//]]>
</script>
if you want to load in all pages through your design template, here is a suggestion.
Upvotes: 9