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

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 2

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?