colorbox breaks on rel attribute when bxslider is loaded

Question

After much debugging I came to the conclusion these two libraries are colliding. I tested them both separate and they work but when used together (and there is a rel attribute things break)

How to reproduce

• If the link has a rel or $('something').colorbox({rel:'something'});
• $('somethingelse').bxSlider(...);

colorbox will fail when clicking on any image that has colorbox (not just the shared options) With:

Uncaught TypeError: Cannot read property 'rel' of undefined

Offending lines of code are:

      if (settings.rel !== 'nofollow') {
          $related = $('.' + boxElement).filter(function () {
              var relRelated = $.data(this, colorbox).rel || this.rel;
              return (relRelated === settings.rel);
          });

I found a similar issue Do I use jQuery noconflict to avoid plugins conflict? however the effect was different. Yet the cause seems similar. According to someone answering that question the problem is that bxSlider whipes out the $.data() set by colorbox.

So my questions are:

• Is there a way around this?
• Is it a bug in colorbox?
• Is it a bug in bxSlider?

Answer 1

I know its been ages since this question asked but I had the similar problem and after much struggling the error for me was that I was calling colorbox before bxslider, I change the order of calls and it works as a charm. Maybe someone will be helped by this.