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 plugins, either pop up close button not working or else the colorbox not working. Ive tried all the ways, but no use... im herewith adding the scripts..

<link href="02/css/login Popup/popup.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="02/js/Login pop_up/jquery.min.js"></script>


   <script type="text/javascript">

   $(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button
  $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#"   class="close"><img src="02/images/close1.png" class="btn_close1" title="Close Window"    alt="Close" /></a>');

//Define margin for center alignment (vertical   horizontal) - we add 80px to the  height/width to accomodate for the padding  and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup
$('#' + popID).css({
    'margin-top' : -popMargTop,
    'margin-left' : -popMargLeft
});

//Fade in Background
 $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
 $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

return false;
   });

   //Close Popups and Fade Layer
 $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
   $('#fade , .popup_block').fadeOut(function() {
    $('#fade, a.close').remove();  //fade them both out
});
return false;
 });
 });

 </script>

  <!---Popup plugin ending---> 



   <!---Slider plugin starting---> 

 <script type="text/javascript" src="slide/jquery-1.3.1.min.js"></script>

 <script type="text/javascript" src="slide/jquery.scrollTo.js"></script>



   <script>



    $(document).ready(function() {



$('a.panel').click(function () {



    $('a.panel').removeClass('selected');

    $(this).addClass('selected');



    current = $(this);



    $('#wrapper').scrollTo($(this).attr('href'), 800);      



    return false;

});



$(window).resize(function () {

    resizePanel();

});



     });



     function resizePanel() {



width = $(window).width();

height = $(window).height();



mask_width = width * $('.item').length;



$('#debug').html(width  + ' ' + height + ' ' + mask_width);



$('#wrapper, .item').css({width: width, height: height});

$('#mask').css({width: mask_width, height: height});

$('#wrapper').scrollTo($('a.selected').attr('href'), 0);



        }



        </script>

               <!---Slider plugin ending---> 

       <!---Colorbox plugin starting--->


        <link rel="stylesheet" href="css/colorbox.css" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
           <script src="plugins/jquery.colorbox.js"></script>
         <script src="plugins/colorbox-main.js" type="text/javascript"></script>
         <script src="plugins/jquery.colorbox-min.js" type="text/javascript"></script>

         <!---Colorbox plugin ending--->

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.