让两个jquery脚本像他们应该的那样一起工作

时间:2012-08-15 08:10:44

标签: javascript jquery

为了爱上帝,我需要帮助!我正试图让Caroufredsel和fancybox一起工作,就像他们在这里一样:

http://caroufredsel.frebsite.nl/examples/carousel-lightbox-tooltip.php

...我只能让他们独立工作。我真的不知道javascript,所以我很难做到:(

以下是我尝试实施的地方:

http://www.meanbeangames.com/

只有Caroufredsel在这一点上工作。如果我删除所有Caroufredsel代码,Fancybox可以工作。

2 个答案:

答案 0 :(得分:2)

您在第15行和第189行(查看源代码)两次引用jQuery库,这导致之前添加的fancybox插件的所有引用都丢失(因为jQuery变量是第二次包含jQuery时定义。

删除

<script type="text/javascript" src="js/jquery.js"></script>

在189行,你应该被设置。

答案 1 :(得分:1)

首先

您正在加载jQuery(Javascript库)两次。进入<head>部分(<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>),然后进入结束</body>代码(<script type="text/javascript" src="js/jquery.js"></script>)之前。删除最后一个并将第一个更新到最新版本的jQuery,如下所示:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<强>第二

为您的脚本提供更好的结构可能更好:或者在结束</body>标记之前将所有这些结构加载到您的头脑中或所有这些结构中。这样,您就不会查看那些您不希望它们出现的脚本。通常认为最佳做法是在结束</body>标记之前包含所有脚本。不要忘记在所有其余脚本之前加载jQuery !在你的情况下,它看起来像这样:

<footer>...</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#foo2").carouFredSel({
        circular: true,
        infinite: false,
        auto: false,
        prev: {
            button: "#foo2_prev",
            key: "left"
        },
        next: {
            button: "#foo2_next",
            key: "right"
        },
        pagination: "#foo2_pag"
    });
    $('.fancybox').fancybox();
});
</script>