我是否使用jQuery noconflict来避免插件冲突？ [英] Do I use jQuery noconflict to avoid plugins conflict?

问题描述

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

UPDATE: I've found that the jquery.bxslider plugin itself clones and appends/prepends the LIs causing the trouble. No solution to this though, except maybe using another script :(

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

I'm having to jQuery plugins partially conflicting with each other, Boxslider (an image slider) and Colorbox (a lightbox). They both work, but the slider script somehow ads to the lightbox so the first and last images get repeated twice.

如果您查看示例页面。

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

You'll see there are 3 images in the slider, but when opening the lightbox it gives you 5 images.

我已经尝试过使用 noconflict（），但这只是阻止了任何工作。经过一些搜索我'我假设有一些命名空间问题，虽然我有n o想知道在哪里或如何调试这个。

I've tried my luck with noconflict(), but that just stopped anything from working at all. After some searching I'm assuming there are some namespacing issues, though I have no idea where or how to debug this.

我正在使用的脚本是

<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>

我尝试过交换订单，只有一个或两个停止工作。我已经浪费了很多时间试图解决这个问题，所以任何帮助都会非常感激！

I've tried swapping the order around, which only made one or both stop working. I've wasted to much time trying to nail this down, so any help would be much appreciated!

推荐答案

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

Better late than never, eh? Figured I'd share my solution in case anyone else runs into this problem.

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

I've recently been using a colorBox/bxSlider combo and had this issue. When you initialize the bxSlider it duplicates the first and last slides into the last and first positions (respectively). I wasn't much concerned with why but I imagine it's to support looping. While initializing the colorBox first should have worked in theory, something in bxSlider wipes the $.data() that colorBox sets.

到达目的地，我的快速解决方法是从重复的元素中删除类名。在setChildrenLayout（）中，您可以看到项目在两个$ .each（）块中预先/后置的位置。您所要做的就是修改它以删除有问题的类名。

Getting to the point, my quick fix was to strip the class name from the duplicated elements. In setChildrenLayout() you can see where the items get pre-/post-pended in the two $.each() blocks. All you have to do is modify it to remove the offending class name.

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

注意：我写的是为我的特定情况而工作，如果列表项是更复杂。

NOTE: I wrote it to work for my particular case, it might need modifications if your list items are more complex.

这篇关于我是否使用jQuery noconflict来避免插件冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！