Loading a plugin with a different version of jQuery

Question

I'm trying to run a plugin on CS Cart site which only allows jQuery 1.7+ http://owlgraphic.com/owlcarousel/ is the plugin i'm using.

I've found a snippet of code on another ticket, which allows to run two version of jQuery using the noConflict method. All of the original code is running fine. But this plugin is not running and it keeps throwing the error Uncaught TypeError: undefined is not a function on this line: $j("#wrapper").owlCarousel({ However if I add the following lin inside my document on load function it seems to run, then breaks when it gets to the .owlCarousel function. - $j('body').css('background-color', 'red');

Here is a breakdown of my code:

//Loaded n at the top of the page

{script src="lib/js/jquery/jquery.min.js"}
{script src="lib/js/jquery/jquery.min.1.8.js"}

<script>var $j = jQuery.noConflict(true);</script>
    <script type='text/javascript'>
      $(document).ready(function(){
       console.log($().jquery); // This prints v1.5.2
       console.log($j().jquery); // This prints v1.8
      });
   </script>

//Loaded in lower down the page, after most of the existing JS

<script type='text/javascript'>
$j(document).ready(function(){
   $j('body').css('background-color', 'red');

$j("#wrapper").owlCarousel({

        //autoPlay: 3000, //Set AutoPlay to 3 seconds

        items : 2,
       itemsCustom : [
          [200, 2],

        ],
        navigation : true
    });

});

</script>

The strange thing is, if i replace the old version of jQuery with the new one, it works, but breaks all the old code that relies on the old version.

I hope I've provided enough info.

Thanks in advance.

Answer 1

jQuery plugins normally hooks to the current jquery version attached to it, first load the old jquery version then the plugin that will be using it then, load the newer one.

I believe that the "plugin1" will be attached to the older version of jquery.

{script src="lib/js/jquery/jquery.min.js"}
<script>var j1 = jQuery.noConflict(true);</script>
{script src="lib/js/jquery/plugin1.js"}

{script src="lib/js/jquery/jquery.min.1.8.js"}
<script>var j2 = jQuery.noConflict(true);</script>
{script src="lib/js/jquery/plugin2.js"}
{script src="lib/js/jquery/plugin3.js"}

sorry for my english.