当前位置： 文江博客话题详情

jCarousel 和 Thickbox 面临错误

发布于 2024-11-28 03:14:06 字数 3563 浏览 4 评论 0原文

错误是 - “$ 未定义”

我从 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>
原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

日裸衫吸 2024-12-05 03:14:06

你需要在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 ready 语句中：

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

You need to load thickbox after jquery has been loaded, and then put your js into the ready function.

Change this:

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

To this:

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

Also, you should put all of your javascript inside of the jquery ready statement:

 jQuery(document).ready(function () {
        // put ALL js in here
    });
回复 原文
满地尘埃落定 2024-12-05 03:14:06

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

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

回复 原文
~没有更多了~

关于作者

野心澎湃

暂无简介

文章
评论
623 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

知足的幸福

文章 0 评论 0

我一向站在原地

文章 0 评论 0

慕烟庭风

文章 0 评论 0

秉忠贞之诚 守退让之实

文章 0 评论 0

小兔几

文章 0 评论 0

mb_3y7WUgWY

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文