Question

I have a thumbnails scroller driven by a jquery plugin, everything works fine.
The plugin that I’m trying to integrate works perfect individually but when I try to add on my actual markup I check it with Firebug and I receive this strange error: Uncaught TypeError: Cannot call method 'extend' of undefined

I can not post the entire markup on jsfiddle or here so I prefer to give you a link to that error maybe you can help me understand what’s happening. It’s very stressful.

Here is my attempt.

Answer 1

You are running jQuery in so-called “no-conflicts” mode. This basically boils down to not using the $ function as an entry point. If your module is not programmed with this in mind, you will see failures such as this one.

Either: 1) do not use jQuery in no-conflicts mode

If you are not planning on using other javascript libraries (and really, one is enough I assure you) then you’re perfectly fine taking this route,

Simply remove this code

* jQuery.noConflict() for using the plugin along with other libraries. 
   You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or 
   if you include jQuery before other libraries in yourdocument's head tag. 
   [more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
jQuery.noConflict(); 

… and check out the documentation that comment references for a deeper understanding: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Never hurts to read the docs!

Or: 2) Fork and fix the source code of the module (if it is on github or other open-source repository)

You’ll need to re-write the module to use the safer entry point jQuery instead of assuming that $ is available (as it currently does). You can also just correct your copy, but if you’re doing the work you may as well put it in a place where someone else can benefit too — after all, you’re benefiting from the work of others (jQuery, the module, etc) 😀