Question

更新：我发现jquery.bxslider插件本身克隆并追加/预先导致问题的LI。虽然没有解决方案，但可能使用另一个脚本:(

我不得不将jQuery插件彼此部分冲突，Boxslider（图像滑块）和Colorbox（灯箱）。它们都有效，但滑块脚本以某种方式广告到灯箱，因此第一个和最后一个图像重复两次。

如果你看一下example page，这会更容易理解。

您会看到滑块中有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中查看页面的来源时，虽然Slider只显示三个图像，但实际上有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);

我建议尝试在Slider之前运行colorbox插件。当然，如果您更改源顺序，它将不会先运行，因为您在滑块上有document.Ready（），而在colorbox上有window.load（）。你可以在Slider执行之前在document.ready（）中执行colorbox吗？

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

3 个答案: