Unable to load jCarousel function in html

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://www.emusician.com/slides.aspx?slideshowid=15&page=1

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:

<link href="/SlideShowScroller/css/jCarouselStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/SlideShowScroller/css/colorbox.css" />
<link rel="stylesheet" type="text/css" href="/SlideShowScroller/css/tangoskin.css" />
<link rel="stylesheet" type="text/css" href="/SlideShowScroller/css/slider_css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/SlideShowScroller/js/jquery.jcarousel.min.js"></script>
<script src="/SlideShowScroller/js/jquery.colorbox.js" type="text/javascript"></script>

Here's my Javascript function:

<script type="text/javascript">
        function querySt(queryStringName) {
            var queryStrings = window.location.search.substring(1);
            var splitQueryStrings = queryStrings.split("&");
            for (i=0;i<splitQueryStrings.length;i++) {
            var splitQueryStringsNameValue = splitQueryStrings[i].split("=");
            if (splitQueryStringsNameValue[0] == queryStringName) {
            return splitQueryStringsNameValue[1];
                }
            }
        }
        $(document).ready(function () {
            $('#mycarousel').jcarousel(
                {
                    scroll: 1, 
                    start: parseInt(querySt("page")), 
                    buttonNextHTML : '<div onclick="navigation(\'next\')"></div>', 
                    buttonPrevHTML: '<div onclick="navigation(\'previous\')"></div>' 
                });
            $(".group1").colorbox({rel:'group1'});

        });
</script>

I confirmed the path and its all correct. i even tried placing a alert message in the JS file to check whether the js file is executing properly, and yes its working, but still it says jcarousel in not a function

Answer 1

You are doing everything right,

• Order of the script tags are proper
• The URL provided is directing to proper page
• Script tags are properly closed

But, I see three different version-ed jQuery libraries (1.9.0, 1.4.2, 1.6.2) are included. Avoid using multiple libraries and I am not sure this would be a solution, this may fix the issue.