SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Colorbox and Revolution slider conflict ... i think ...

    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/scOnline...orboxTest.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

    Ive also tried various hosted jquery <script> links of various configurations and still cant seem to get anything happening.

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

    Thanks
    | scott

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <!-- 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. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by scott1964 View Post
    I noticed you also move up the MM_openBrWindow function in the stack ... what was the reason for that?
    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. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Location
    Wilmette, IL
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Pullo!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •