title: Do I use jQuery noconflict to avoid plugins conflict?
body: <hr>
  
  <p><strong>UPDATE:</strong> I've found that the <a href="http://bxslider.com" rel="nofollow noreferrer">jquery.bxslider</a> plugin itself clones and appends/prepends the LIs causing the trouble. No solution to this though, except maybe using another script :(</p>
  
  <hr>
  
  <p>I'm having to jQuery plugins partially conflicting with each other, <a href="http://bxslider.com/" rel="nofollow noreferrer">Boxslider</a> (an image slider) and <a href="http://colorpowered.com/colorbox/" rel="nofollow noreferrer">Colorbox</a> (a lightbox). They both work, but the slider script somehow ads to the lightbox so the first and last images get repeated twice. </p>
  
  <p>This is easier to understand if you have a look at the <a href="http://sfa-j002.universalfavourite.com.au/products/bollards/blade.html" rel="nofollow noreferrer">example page</a>.</p>
  
  <p>You'll see there are 3 images in the slider, but when opening the lightbox it gives you 5 images.</p>
  
  <p>I've tried my luck with <code>noconflict()</code>, 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.</p>
  
  <p>The scripts I'm using are</p>
  
  <pre><code>&lt;link type="text/css" media="screen" rel="stylesheet" href="assets/css/colorbox.css" /&gt;
  &lt;script type="text/javascript" src="assets/js/jquery.bxslider2.0.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('#gallery').bxSlider({
          auto: true,
          wrapper_class: 'gallery-holder',
          auto: false,  
          speed: 100,
          pager: true,
          next_text: 'next',
          prev_text: 'back'
      });
  }); 
  &lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/jquery.colorbox-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(window).load(function(){
          $("#gallery a[rel='group']").colorbox({maxWidth:"80%", maxHeight:"80%", scalePhotos: true});
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>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!</p>