Javascript Fancybox与Jquery冲突

我对一些相互冲突的Java脚本有问题。我有一个创建下拉菜单的脚本，还有一组使fancybox工作的脚本。但是，当两组脚本都在我的头代码中时，它们会冲突，只有一个函数可以工作。我在代码中放在第一位的脚本就是不起作用的脚本

我对javascript/jquery知之甚少，我只是在使用别人给我的一些脚本，然后将它们与我的HTML（我对HTML非常熟悉）结合起来。如果有人能帮我回答（并帮我把它说得哑一点：），那真的很有帮助

我曾尝试使用控制台检查脚本中的冲突，但我有点不知所措，不确定应该在其中查看什么。如果有人想告诉我如何正确地检查控制台中的问题，这也会起作用，尽管我不能保证单凭这一点就能帮到我

以下是fancybox first在我的主页html文件头部的代码（这样，fancybox不起作用，但下拉菜单起作用）：

$（文档）.ready（函数（）{
//vimeo的fancybox
$（“.vimeo”）.fancybox({
宽度：781，
身高：440，
键入：“iframe”，
菲托维：错，
wrapCSS:“fancybox导航视频”
});
$（'.fancybox'）。fancybox(
{
填充：0，
openEffect:“弹性”
}
);
$（“.fancybox”）.fancybox(
{
wrapCSS:“fancybox定制”，
closeClick:true，
助手：{
覆盖：{
css:{
“背景色”：“000”
}
},
拇指：{
宽度：50，
身高：50
}
}
}
);
}
);
$（[href$='.jpg']、a[href$='.jpeg']、a[href$='.png']、a[href$='.gif'].attr（'rel'，'gallery'）.fancybox（）；

您加载jQuery库两次，版本号也略有不同（1.7与1.7.2）

正如在评论中提到的，您也在别处加载它。一次就够了

编辑

您还在此处加载jQuery（两次）：

---

首先，正如您从其他人身上看到的那样，JQuery在其中太多了。不过，Fancybox在jQuery1.8方面存在问题，所以您需要坚持使用1.7版。去掉下拉框顶部的1.8脚本，暂时去掉谷歌的cdn版本，只需使用fancybox附带的1.7.2即可。最后，将剩下的一行Jquery移到页面顶部，它必须首先加载。

---

我不知道下拉代码，但是jQuery1.7应该可以。不确定这是否能解决问题，但这是一个更干净的起点。

改用colorbox，不会产生冲突。一点帮助，我认为您正在加载jquery库4次。jquery.min.js、jquery-1.7.2.min.js、jquery.main.js、jquery-1.8.3.min.js都是jquery库。试着只使用其中一个就可以开始了。在控制台中，单击右下角的红十字，然后将出现的错误粘贴到这里。呃。。你也错过了前2名：）。好吧，第一个肯定是的，在我发帖后发现了他们！你好，李和威利-我想试试你的解决方案，但我不确定我应该删除或保留什么。我应该只保留那些写着“脚本类型”的行吗？如果是，哪一个？谢谢你的帮助！您需要确定要使用哪个版本的jQuery。听起来Fancybox在1.8版上有问题。因此，只需使用1.7.2中的一个，然后删除其他3个。此外，我还将脚本放在另一个文件夹中，因为它会引起混乱（因为它在fancybox文件夹中，似乎（错误地）与fancybox有关）。我刚刚删除了上面列出的前两个脚本，它可以正常工作！非常感谢。我删除了这两行：嗨，本，谢谢你一步一步地写。通过使用1.7删除这两个脚本，我实际上能够让fancybox和下拉菜单一起工作。到目前为止，它还在工作，但如果我还有问题，我也会尝试这个解决方案。最好的做法是将JavaScript作为body元素的最后一个子元素加载。首先加载jQuery、Fancybox等，然后插入您自己的标记，并使用实际的DOM操作、动画、Ajax调用等。JavaScript应该最后加载，因为它确保在任何脚本操作发生之前已解析DOM元素。使用$（函数（）{//Code here}）；进一步确保在DOM完全加载之前不会解释脚本。

<!--dropdown menu script starts here--> 
<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>
<!--dropdown menu script ends here-->   

<!--fancybox script starts here-->      
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="/common/js/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {

    // fancybox for vimeo
    $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS : 'fancybox-nav-video'
    });

    $('.fancybox').fancybox(
    {
    padding : 0,
    openEffect  : 'elastic'
    }
    );
    $(".fancybox").fancybox(
    {
    wrapCSS    : 'fancybox-custom',
    closeClick : true,
    helpers : {
    overlay : {
    css : {
    'background-color' : '#000'
    }
    },
    thumbs  : {
    width   : 50,
    height  : 50
    }
    }
    }
    );
    }
    );

    $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"></script>  

<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>