How can I use plugins for different versions of jQuery on the same page?

Question

I\'ve added 3 jqueryscripts for an html page (a colorbox plugin for gallery, a popup plugin for a reservation form and a sliding jquery for footer. While adding these three plug

Answer 1

The real problem is that the plugins you want require different versions of jQuery: You say the popup and slider work with 1.9.1, but colorbox requires 1.3, meaning that so far you can't get a situation whereby all 3 work. The real question, then, is "how can I use different versions of jQuery on the same page?".

This has been answered before: Use jQuery's noConflict function to get both versions of jQuery represented by different variables, then invoke the plugins as necessary.

Seeing as colorbox is the odd one out (and using an ancient version of jQuery for most of your code will be increasingly difficult), it's probably best to use jQuery 1.9.1 (or higher) by default, then set jQuery 1.3 to a different variable. I've paraphrased filenames, paths, etc, but the code below should give you an idea:

<script src="jquery-1.9.1.min.js"></script>
<script src="popup.js"></script>
<script src="slider.js"></script>

<script src="jquery-1.3.2.min.js"></script>
<script src="colorbox.js"></script>

<script>
    $old = $.noConflict( true );
</script>

Now a runthrough of what's happening above:

1. Load jQuery 1.9.1, which assigns itself to the $ and jQuery variables.
2. Load the popup and slider scripts. These assume that jQuery 1.9.1 is bound to the variable names above (which it is), and attach their behaviour.
3. Load jQuery 1.3.2, which replaces the jQuery variables with itself - jQuery 1.9.1 can no longer be referenced in the global scope — but that's not a problem for the popup and slider plugins, because they've already executed and attached their behaviour.
4. Load the colorbox script, which finds jQuery 1.3.2 and binds to it.
5. Call jQuery 1.3.2's noConflict - this assigns current $ and jQuery variables back to whatever they were before this version of jQuery executed (jQuery 1.9.1), and assigns the current jQuery (1.3.2) to whatever variable you provide. From this point onwards, you'll need to use that varialbe instead of $ if you want to use jQuery 1.3.2 or the colorbox plugin.

I created a proof of concept here: these plugins are extremely simple (all they do is use jQuery to make clicking paragraphs alert messages), but they will only function if they have the correct version of jQuery.