jQuery in Magento

Question

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>

Answer 1

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.