>Featured Content Gallery And Fancybox Conflict Fix | Make Money Online - Your Guide To How To Make Money Online
  

13229 registered users and counting!

Featured Content Gallery And Fancybox Conflict Fix

This post has been read 11141 times
Featured Content Gallery And Fancybox Conflict Fix
has been rated 1 Star2 Stars3 Stars4 Stars5 Stars (2,971 votes, average: 3.98 out of 5)


You can click the stars to rate now.
Loading ... Loading ...

After hours of trying numerous solutions to the conflict between the Mootools engine that runs Featured Content Gallery and JQuery that runs the Fancybox lightbox I found a very simple solution.

I should first point out that I’m not using the Fancybox plugin for WordPress but implementing the installation manually.

OK, the problem lies with the default variable that JQuery uses ‘$’.

Here’s the basic code I was using for the Fancybox implementation –

  1. $(document).ready(function() {
  2.  
  3. $("a#imagetag").fancybox({
  4. ‘transitionIn’    : ‘elastic’,
  5. ‘transitionOut’    : ‘elastic’,
  6. ‘padding’            : 0,
  7. ‘margin’ : 0,
  8. ‘autoDimensions’ : false,
  9. ‘width’ : 597,
  10. ‘height’ : 431
  11. });
  12.  
  13. });

To fix the ‘$’ variable issue we simply need to rename the variable. In the code below it’s been redefined as ‘$xx’ in the first line.

  1. var $xx = jQuery.noConflict();
  2. $xx(document).ready(function() {
  3.  
  4. $xx("a#imagetag").fancybox({
  5. ‘transitionIn’    : ‘elastic’,
  6. ‘transitionOut’    : ‘elastic’,
  7. ‘padding’            : 0,
  8. ‘margin’ : 0,
  9. ‘autoDimensions’ : false,
  10. ‘width’ : 597,
  11. ‘height’ : 431
  12. });
  13.  
  14. });

It’s really that easy to fix this conflict. Define the variable in the first line and then edit the ‘$’ variable in the code.

I hope that saves someone else hours of trawling the Web for the solution. ;)

Featured Content Gallery And Fancybox Conflict Fix 3.98451699764 out of 5 based on 2971 ratings.

8 Responsesto “Featured Content Gallery And Fancybox Conflict Fix”

  1. avatar Andy says:

    Thank you so much!! I have the exact same problem. I am also using fancybox manually (no plugin like yourself), and just installed featured content gallery and it broke everything. Especially all outgoing links, which I am calling using fancybox. I was extremely stressed out and searching and this solution worked like magic!! thank you so much.

    On another note – Just in case you don’t know, your site is throwing errors on Firefox 3.6 for plugin wassup.php. I am copying and pasting the following error that I see on the footer.
    —–
    Warning: preg_match() [function.preg-match]: Compilation failed: nothing to repeat at offset 1 in /home/makemo/public_html/wp-content/plugins/wassup/wassup.php on line 3954
    —–

    You may already know this, just thought I will point it out! Once again thanks for the noconflict variable!!!! :)

  2. avatar Darren Yates says:

    So simple to fix but it was such a pain to track down the solution. I was aiming to save others the same headache. Glad it worked for you Andy. ;) And thanks for the heads up on the ‘Wassup’ error but I’m using 3.6 and all’s fine here. Was it a specific page?

  3. avatar Philip says:

    Oh my goodness thank you so much!!!

    Fyi people: add a name to both functions :)

  4. avatar Cobian says:

    Many thanks, you rock !!!

  5. avatar Jonny Rapp says:

    Genius!!!

    Thankyou so much!!!!!!!

  6. avatar Isuru says:

    thank you very much
    you saved my day !!!!!!!!!!!!!!

  7. avatar Sven says:

    Thanks so much, I was searching for at least two hours for the reason my FancyBox script broke, went through each script, css when I finally removed my mootools code, worked perfectly. But was unable to get to work together. I will try this.

Leave a Reply

*