Do I use jQuery noconflict to avoid plugins conflict?

Question

---

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

---

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.

This is easier to understand if you have a look at the example page.

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

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.

The scripts I'm using are

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

Answer 1

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

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.

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.

Answer 2

What's happening is both scripts are trying to operate on the same sets of images, and just making each other break.

Noconflict basically removes the definition of $, so that other libraries which use $, such as Prototype, won't be overridden.

Thus, noconflict won't help you here. What about just using one of the plugins?

Answer 3

When you look at the source for your page in Firebug, while the Slider does only show three images, there are actually 5 LIs there. The selector you are using to add images finds five elements.

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] 

This array has five elements, which is why the colorbox has 5 images.

Looking at the source as fetched by Curl, before any JS runs, there are only three images originally, BLADE/B10_02.jpg, B10_04.jpg and B10_01.jpg. So, I guess the goal is to see when those are added. The actual images used for the colorbox are stored in a separate area appended to as the first child, so what is adding those to the slider UL?

When you remove the colorbox altogether and just have the slider initialize, inspect the gallery UL in Firebug. Does it have the original three LIs, or five? If it has five, colorbox (or something else) is adding the other two for some reason. If it has three, try re-adding the colorbox initialization, and see if it has five when you reload the page. That should narrow it down a little as to what is adding those.

addition: From looking at the source, it looks like bxSlider intentionally duplicates the first and last items.

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

I'd suggest trying to run the colorbox plugin before the Slider. It won't run first though if you change the source order, of course, since you have document.Ready() on the slider and window.load() on the colorbox. Can you do the colorbox in document.ready() before the Slider executes?