加载了JQuery和Colorbox,但“colorbox不是函数”

时间:2013-12-29 19:02:57

标签: javascript jquery colorbox

我已经检查过是否加载了jQuery并且加载了colorbox脚本并且它们都已正确加载(我使用.getScript来查看colorbox是否正确加载并获得了肯定的结果)。然而,该功能不加载colorbox,Firebug说“$(...)。colorbox不是一个函数”。用来工作的代码,但我不知道我做了什么打破它。这是标题:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="colorbox.css"/>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/scripts.js"></script>
<script>

$(document).ready(function(){
    $(".popup").colorbox({transition: "elastic", opacity: 0.5, speed: 350});
    var panels = $('.accordionButton > .accordionContent').hide();
    $("div.accordionButton").click(function(){
        panels.slideUp();           
        $(this).parent().next().slideDown();
        return false
    });

});
</script>
</head>

我已多次检查以确保脚本位于正确的目录中。这是链接:

<div id='supermenu'><table><tr><td><a href='login.php?lang=en' class='popup'>Login</a></td><td> or </td><td><a href='register.php?lang=en'> Register </a></tr></td></table></div>

2 个答案:

答案 0 :(得分:4)

您需要在 jquery文件后引用colorbox文件。像这样:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="Scripts/scripts.js"></script>

顺便说一句,对于大多数jquery插件来说就是这种情况。

答案 1 :(得分:4)

我在Chrome浏览器中显示相同的错误。

如果上述解决方案没有帮助,#MannyFleurmond解决方案对我的情况有帮助。 尝试用函数($)扭曲colorbox js调用:

 (function($) {
   // Inside of this function, $() will work as an alias for jQuery()
   // and other libraries also using $ will not be accessible under this shortcut
 })(jQuery);

所以我的ColorBox调用看起来像这样:

 (function ($) {
        $('#myelement').click(function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $.colorbox({ href: url, width: 936, height: 582, top: 160});

        });
    })(jQuery);