JQuery ("# ​​mycarousel"). jcarousel is not a function

Question

I have to do something really stupid here, but for a while I hit my head about it and I could not find what was wrong.

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

I am trying to implement jCarousel and I keep getting this error:

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

Here is what I have in the title:

<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 load all the scripts in the correct order, and I confirmed that they are all there. So why does he say that this is not a function?

Answer 1

On line 39, you reload jQuery, which overwrites the jQuery object by removing the .jcarousel function. Make sure you download 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

You get an error that the jcarousel function jcarousel unknown, which means that the js file with the jcarousel function is jcarousel loaded correctly. (The JQuery link itself works because jQuery(document).ready... didn’t give you an error)

Look at the rendered HTML and see if the file path matches its actual location. (They are not...)

By the way, why aren't you using the jQuery $ alias?
jQuery('#mycarousel') => $('#mycarousel')

JQuery slogan - "Write less do more"

Answer 3

The error you see basically means:

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

Open the page source and see what HTML is displayed. Are you correct .js file paths and what do you expect? In most cases, this is the cause of these problems.

So, once you're sure that your .js file links are correct, try something like this:

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