Colorbox and Revolution slider conflict ... i think

JavaScript
1

I seem to be having a Jquery conflict. I had a portfolio type page with thumbnails as anchored links. When you click these thumbs, the corresponding full sized image should open in the Jquery colorbox. I had all of this functioning just fine and then I got the big idea to incorporate the Revolution Slider up top. After this installation, colorbox no longer functions.

http://www.savagepixels.com/scOnlineDesign/colorboxTest.html

Also interesting to note, if I separate out the colorbox section apart from the slider in another test page, it works perfectly. So, my best guess would be some sort of JQ function conflict or something.

The Firefox error console reveals that no errors are thrown when I click a thumbnail …

I’ve also tried various hosted jquery <script> links of various configurations and still can’t seem to get anything happening.

Is there a way to get these two plugins to play together nicely?

Thanks
| scott

2

Hi there,

The file script.js is setting jQuery into no-conflict mode.

That means for things to work properly, you’ll have to use jQuery instead of the dollar alias after this point.

Like this:

<!-- scriptage -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="scripts/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/jquery.pngFix.js"></script>
<script type="text/javascript">
  function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
  }
  jQuery(document).ready(function(){
    //assign the ColorBox event to portfolio thumbs
    jQuery("a[rel='album1']").colorbox({transition:"fade"});
    jQuery(document).pngFix(); 
  });
</script>

HTH

3

Ahhhh … yeah. I see what you mean. It is working now … thank you.

I noticed you also move up the MM_openBrWindow function in the stack … what was the reason for that?

| scott

4

Just a preference - functions first, as they get hoisted anyway.
You could also stick this at the bottom of your page (just before the closing<body> tag and eliminate the need for the call to $(document).ready(...)

5

Thanks again Pullo!