Home/ Questions/Q 6212577
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:32:31+00:00

the error is – $ is not defined i got the code from jCarousel

  • 0

the error is – “$ is not defined”

i got the code from jCarousel site for using with Thickbox but it is not working. i am not being able to find out the problem. so please help me to get the error.
i am posting my full code

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Simple_JCarousel.aspx.cs" Inherits="Carousel.JCarousel.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../Scripts/thickbox.js"></script>
    <link rel="stylesheet" href="../Styles/thickbox.css" type="text/css" media="screen" />

    <script language="javascript" type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
    <script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../Styles/skin.css" />
<style type="text/css">

#mycarousel .jcarousel-item-placeholder {
    background: transparent url(../images/JQNavBtn/loading-small.gif) 50% 50% no-repeat;
}

</style>

<script type="text/javascript">

    // Set thickbox loading image
    tb_pathToImage = "../images/img/loadingAnimation.gif";

    var mycarousel_itemList = [
    { url: "../images/1.jpg", title: "Flower1" },
    { url: "../images/2.jpg", title: "Flower2" },
    { url: "../images/3.jpg", title: "Flower3" },
    { url: "../images/4.jpg", title: "Flower4" },
    { url: "../images/5.jpg", title: "Flower5" },
    { url: "../images/6.jpg", title: "Flower6" },
    { url: "../images/7.jpg", title: "Flower7" },
    { url: "../images/8.jpg", title: "Flower8" }

];

    function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }

            if (i > mycarousel_itemList.length) {
                break;
            }

            // Create an object from HTML
            var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i - 1])).get(0);

            // Apply thickbox
            tb_init(item);

            carousel.add(i, item);
        }
        ShowImage();
    };

    /**
    * Item html creation helper.
    */
    function mycarousel_getItemHTML(item) {
        var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
        return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
    };

    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            size: mycarousel_itemList.length,
            itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
        });

        ShowImage();
    });

    function ShowImage() {
        jQuery('#mycarousel img').mouseover(function () {
            var img = '<img src="' + this.src + '" />';
            jQuery('#showImageArea').html(img);
        });

    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="mycarousel" class="jcarousel-skin-ie7">
     <!-- The content will be dynamically loaded in here -->
     </ul>

    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div id="showImageArea"></div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put jquery references before the jcarousel references. Because Jcarousel uses the jquery library and… so Jquery needs to be instantiated first.

    • 0