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