jCarousel 和Thickbox 面临错误答案

【问题标题】：facing error for jCarousel and ThickboxjCarousel 和Thickbox 面临错误
【发布时间】：2025-11-21 16:35:04
【问题描述】：

错误是 - “$ 未定义”

我从 jCarousel 站点获得了用于与 Thickbox 一起使用的代码，但它无法正常工作。我无法找出问题所在。所以请帮我解决错误。我正在发布我的完整代码

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

【问题讨论】：

请正确格式化您的代码并发布。那是眼睛疼。还要聪明一点，只粘贴相关代码。例如我看不到您在哪里实例化了轮播。为什么要粘贴整个轮播代码？我认为这是一个插件并且工作得很好。

标签： jquery asp.net thickbox

【解决方案1】：

你需要在jquery加载完成后加载thickbox，然后把你的js放到ready函数中。

改变这个：

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

到这里：

    <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" />
    <script type="text/javascript" src="../Scripts/thickbox.js"></script>
    <link rel="stylesheet" href="../Styles/thickbox.css" type="text/css" media="screen" />

此外，您应该将所有 javascript 放入 jquery 就绪语句中：

 jQuery(document).ready(function () {
        // put ALL js in here
    });

【讨论】：

【解决方案2】：

将 jquery 引用放在 jcarousel 引用之前。因为 Jcarousel 使用了 jquery 库并且...所以需要先实例化 Jquery。

【讨论】：