jQuery("#mycarousel").jcarousel is not a function

Question

I must be doing something really stupid here, but I've been beating my head against it for a while and I haven't been able to find what's wrong.

On this page: http://ww2.accudata.com/

I'm trying to implement jCarousel, and I keep getting this error:

jQuery("#mycarousel").jcarousel is not a function

Here's what I have in my header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/skins/carousel/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({

});
});
</script>

So as far as I can tell, I'm loading all of the scripts in the correct order, and I have verified that they are all there. So why does it say it's not a function?

Answer 1

On line 39, you are reloading jQuery, which overwrites the jQuery object, removing the .jcarousel function. Make sure you are loading jQuery only once.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
<script type="text/javascript" src="http://ww2.accudata.com/wp-content/themes/accudata/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ww2.accudata.com/wp-content/themes/accudata/js/skins/carousel/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({ //Would work if you called it here, but it gets deferred until the DOM is loaded

    });
});
</script>

...

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4'></script>
<!-- This gets loaded after you load the plugin, overwriting the jQuery object -->

Answer 2

The error you're seeing basically means:

"we tried looking for the jcarousel function, and couldn't find it."

Open the page source and see what HTML is being rendered. Are you paths to the .js files correct and what you expect? Most of the times this is the cause of these types of problems.

So once you're sure that your references to the .js files are correct, try something like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('#mycarousel').jcarousel({
            //Settings here.
        }); 
    });
</script>