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

Well, when the global.js script is in the page, Fancybox it's not working — Juan, Apr 25 '11 at 22:21
Juan: Please use Chrome or FireFox, then open Developer Tools or FireBug respectively and check the console for errors. I assume there will be errors since your scripts aren't doing anything, so edit your question with the error message(s). — Hubro, Apr 25 '11 at 22:22
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...++)a[b]()||a.splice(b--,1);a.length|| Line 143 of http://www.planetdescargas.com/wp-includes/js/jquery/jquery.js?ver=1.4.2 — Juan, Apr 25 '11 at 22:34
Please try removing the `noConflict()` function. I can easily picture that killing other scripts. — Hubro, Apr 25 '11 at 22:43
c.easing[this.options.specialEasing && this.options.specialEasing[this.prop] || a] is not a function http://www.planetdescargas.com/wp-includes/js/jquery/jquery.js?ver=1.4.2 Line 143 — Juan, Apr 25 '11 at 22:52
Well I can only argue that you shouldn't be using bad javascript scripts that kill the jQuery globals — Hubro, Apr 25 '11 at 22:54

score 3 · Answer 1 · edited Sep 04 '12 at 12:15

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.

Hubro · Answer 2 · 2011-04-25T22:06:45.600

1

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/

edited Apr 25 '11 at 22:06

answered Apr 25 '11 at 22:01

Hubro

56,214
69
228
381

Still not working. I'm using Wordpress' jQuery. Global.js is loaded as a dependency, fancybox no, I do not know if that is relevant – Juan Apr 25 '11 at 22:10

score 0 · Answer 3 · answered Apr 26 '11 at 14:37

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!

Conflict between two jQuery's scripts

3 Answers3

Linked