Using more than one Jquery plugin at a time?
 

I have one jquery plugin that stretches the background image (Backstretch) and another that is a picture slideshow/accordion (Slidorion). My problem is that one will never work while the other exists, but on their own they work fine. Backstretch is used in my master page so it makes up the background on all my pages while slidorion is only on one page. How do I seperate them some how so they aren't affecting each other?

The simplest thing to try – and thus the first thing to try – is rearranging the order you load the plugins. It sounds silly, but sometimes it helps.

However, I only give that a fairly small chance. After that, it's time to figure out what is going wrong. If both plugins truly conflict in the sense that they are writing over each others' variables, you have a problem.

I never encountered this before, but my first idea would be trying to trap each plugin in a closure. That way, whatever (formerly) global objects they shared (that caused the interference) are now within a plugin-specific closure. You'd have to think about how you can make the plugin available from outside that closure then, though.

How do I trap each plugin in a closure?

If and how this works heavily depends on how the plugins are written, so before going into this trouble you might wanna check what's actually causing the interference. In any case, this is potencially a lot of work and it might not work at all. But there is no easy answer on "how do I do it?", so if you're not too experienced, this is not really an option for you, sorry.

Did you try changing the order you load the scripts in?

I did try switching the order in which they load and what I found is that whichever one I try to load first ends up not working but the second one works perfect.

In that case, if you have the knowledge and feel like it's worth it, start debugging to find out what kind of interference the plugins have. You might also try to use Google and see if there are general recommendations or even a known interference of those plugins.

However, the more I think about it, the less I think the closure trap will work. I don't think either plugin just registers global variables that interfere, but instead they define objects attached to jQuery which interfere. Now you could change at least one of the plugins to adapt it to a different object, but that would most likely break the plugin as it cannot use jQuery functions anymore.

In that case, and if you can't find anything on Google, the way to go would be deactivating one plugin. Either the one you only need on one page (hurts less) or the one you might be able to find a different plugin for or even write yourself.

Ok I figured it out! I took your suggestion and googled any known conflicts and although I didn't find any with my specific slideshow involved I did find some helpful suggestions. All I had to do was omit the version of jquery in the second plugin and let the declaration at the beginning work for the second plugin. I'm sure this was a total no brainer and I should've known but my Javascript knowledge is 0. haha, but I got it working. Thanks for your responses and suggestions.

Awesome. Glad to hear it worked out for you!

You could just have looked at the sticky in the JS frameworks (sub) forum where I thoroughly explained the issue you encountered. :rolleyes: