我是否使用 jQuery noconflict 来避免插件冲突？

Question

---

更新：我发现 jquery.bxslider 插件本身克隆并附加/前置是李造成了麻烦。不过，没有解决这个问题的方法，除非使用另一个脚本:(

---

我不得不让 jQuery 插件部分相互冲突，Boxslider （图像滑块）和 Colorbox （灯箱）它们都可以工作，但滑块脚本不知何故。广告到灯箱，因此第一个和最后一个图像会重复两次，

如果您查看示例页面。

您会看到滑块中有 3 个图像，但打开灯箱时它会给您 5 个图像。

我已经用 尝试过运气noconflict()，但这只是停止了任何工作，经过一番搜索后，我假设存在一些命名空间问题，尽管我不知道在哪里或如何调试

我正在使用的脚本

<link type="text/css" media="screen" rel="stylesheet" href="assets/css/colorbox.css" />
<script type="text/javascript" src="assets/js/jquery.bxslider2.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#gallery').bxSlider({
        auto: true,
        wrapper_class: 'gallery-holder',
        auto: false,  
        speed: 100,
        pager: true,
        next_text: 'next',
        prev_text: 'back'
    });
}); 
</script>
<script type="text/javascript" src="assets/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        $("#gallery a[rel='group']").colorbox({maxWidth:"80%", maxHeight:"80%", scalePhotos: true});
    });
</script>

。我尝试过交换顺序，但这只会使一个或两个停止工作。我浪费了很多时间试图解决这个问题，所以任何帮助将不胜感激！

Answer 1

迟到总比不到好，是吗？我想我会分享我的解决方案，以防其他人遇到这个问题。

我最近使用 colorBox/bxSlider 组合并遇到了这个问题。当您初始化 bxSlider 时，它会将第一张和最后一张幻灯片复制到最后一个和第一个位置（分别）。我不太关心为什么，但我想这是为了支持循环。虽然理论上应该首先初始化 colorBox，但 bxSlider 中的某些内容会擦除 colorBox 设置的 $.data() 。

言归正传，我的快速解决方法是从重复的元素中删除类名。在 setChildrenLayout() 中，您可以看到项目在两个 $.each() 块中前置/后置的位置。您所要做的就是修改它以删除有问题的类名。

$.each($prependedChildren, function(index) {
    var moddedChild = $(this);
    moddedChild.children().removeClass("removeThisClass");
    $parent.prepend(moddedChild);
});

注意：我编写它是为了适合我的特定情况，如果您的列表项更复杂，则可能需要修改。

Answer 2

发生的情况是，两个脚本都试图在同一组图像上进行操作，结果导致彼此崩溃。

Noconflict 基本上删除了 $ 的定义，因此其他使用 $ 的库（例如 Prototype）不会被覆盖。

因此， noconflict 在这里对你没有帮助。只使用其中一个插件怎么样？

Answer 3

当您在 Firebug 中查看页面的源代码时，虽然滑块只显示三个图像，但实际上有 5 个 LI。您用于添加图像的选择器找到五个元素。

console.log($("#gallery a[rel='group']")); // yields....
>> [a.cboxElement B10_02.jpg, a.cboxElement  B10_01.jpg, a.cboxElement  B10_04.jpg, a.cboxElement  B10_02.jpg, a.cboxElement  B10_01.jpg] 

该数组有五个元素，这就是为什么颜色框有 5 个图像。

查看Curl获取的源代码，在任何JS运行之前，最初只有三个图像，BLADE/B10_02.jpg、B10_04.jpg和B10_01.jpg。所以，我想目标是看看何时添加这些内容。用于颜色盒的实际图像存储在作为第一个子项附加的单独区域中，那么什么是将这些添加到滑块 UL 中呢？

当您完全删除颜色框并仅初始化滑块时，请检查 Firebug 中的图库 UL。它有原来的三个 LI 还是五个？如果有五个，则 colorbox（或其他东西）会出于某种原因添加另外两个。如果有三个，请尝试重新添加颜色框初始化，并在重新加载页面时查看它是否有五个。这应该会稍微缩小一下添加这些内容的范围。

添加：
从源代码来看，bxSlider 似乎故意重复了第一个和最后一个项目。

var first = $this.children(':first').clone(); 
var last = $this.children(':last').clone(); 
/*etc, etc */
$this.append(first).prepend(last);

我建议尝试在滑块之前运行 colorbox 插件。当然，如果您更改源顺序，它不会首先运行，因为滑块上有 document.Ready() ，颜色盒上有 window.load() 。您可以在 Slider 执行之前在 document.ready() 中执行 colorbox 操作吗？