Conflict between two jQuery's scripts

Question

I'm spanish (sorry for my english), and it's the first time that i write here for ask something.

After hours of debugging and searching why the Fancybox script didn't work i search a conflict between two scripts in my website (now in Maintence Mode)

I use a few scripts on my website, but I can safely say that I have a conflict between these two scripts:

http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/jquery.mousewheel-3.0.4.pack.js    
http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/jquery.fancybox-1.3.4.pack.js

AND

http://www.planetdescargas.com/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js?ver=3.0.5

The first two scripts is the plugin for jquery "fancybox", the other is the main javascript (Ajax) for wordpress plugin: BuddyPress.

The latter creates conflict in fancybox. If I remove BuddyPress' script, fancybox works perfectly, but if not, fancybox don't work.

BuddyPress' script, global.js has a variable defined at the outset that is the one that makes the script. I try to define it this way:

var jq = jQuery.noConflict ();

But still not working.

Any suggestions?

In Firebug console i got this:

c.easing[this.options.specialEasing && this.options.specialEasing[this.prop] || a] is not a function

[Detener en este error] e,this.options.orig[e]);this.options.c...++)ab||a.splice(b--,1);a.length||

Line 143 of

http://www.planetdescargas.com/wp-includes/js/jquery/jquery.js?ver=1.4.2

Thanks

Answer 1

Simply use this way.

Open the wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js

Add on top:

jQuery.noConflict (jquery_working =! html bind);

Go to line #1264
Add this below:

;(function(jQuery){  ///Add this before start jQuery.easing.
  jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing, {def:"easeOutQuad",swing:function(e,f,a,h,g){return ......
  // ...
})(jQuery); //Add this end of the call.

Similarly you can resolve the jQuery Cookie plugin conflict error.

Answer 2

I don't know what was wrong, but i solved the problem. I use this code in my functions.php in my theme root:

    function fancybox_js() {
            wp_enqueue_script('jquery.fancybox', 'http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/fancybox/jquery.fancybox-1.3.4.pack.js', array('jquery'), '1.3.4');
            wp_enqueue_script('jquery.easing', 'http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/fancybox/jquery.easing-1.3.pack.js', array('jquery'), '1.3');
            wp_enqueue_script('jquery.mousewheel', 'http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/fancybox/jquery.mousewheel-3.0.4.pack.js', array('jquery'), '3.0.4');
    }

add_action('wp_enqueue_scripts', 'fancybox_js', 999); 

I took the libraries from a wordpress plugin called Easy Fancybox, and now all work fine. Thanks!

Answer 3

That's not how you use jQuery.noConflict(). noConflict() releases control of the $ symbol. From what I see from your other scripts though, they use the safe way ((function($){ }(jQuery))) so using noConflicts() has no actual effect.

Change this

var jq = jQuery.noConflict ();

into this:

jQuery.noConflict ();
var jq = jQuery;

To make sure.

Documentation: http://api.jquery.com/jQuery.noConflict/