Search code examples
jquerywordpressincludefancyboxmultiple-instances

Multiple jQuery includings causing fancybox to break?

I'm not sure what's going on here, i'm a little bit confused.

This is the page i'm currently working on: http://tinyurl.com/a8yuzdt

When you go to the page, everything works, right? All scripts are running good! Except for the fancybox jquery plugin, it gives me the error:

Uncaught TypeError: Object [object Object] has no method 'fancybox'

It appears it didn't load for some reason. I have no idea why. I tried checking if jQuery was loaded correctly (perhaps the fancybox script was included before jquery or something), and found that i include two instances of jquery on every load. The second including is from wordpress though, i think it automatically includes jQuery.

The problem is, if i remove my own jquery inclusion, nothing works! If i run $ in the console i get undefined. If i run jQuery i get this:

function (a,b){return new e.fn.init(a,b,h)}

So i guess... it's kind of working, but only if i use jQuery instead of $? Check it yourself, go to the page and search for jquery in the source.

Any ideas how i fix this?

Solution

  • If you include jQuery, then some plugins (for example, fancyBox) and then another jQuery, then all previously loaded plugins will be lost.

    Edit. I inspected your page and found that

    1. The actual error message is - TypeError: $ is not a function

    2. The reason of this is because your jQuery runs into "noConflict" mode. For some reasons, the last line of your jQuery file is - jQuery.noConflict();

    And therefore you either have to use jQuery instead of $ or remove jQuery.noConflict(); line.