using 2 different jquery releases on the same page

Question

I am using this jquery plugin for a carousel controller http://sorgalla.com/projects/jcarousel/, it is based on jquery release 1.2.1

I also need to have tabs on the page, but when including the current jquery release in the page, the carousel stops working.

Is there a way to have them both live together on the same page, or is there a way to have tabs work under realease 1.2.1?

I rather not rebuild the carousel on another plugin, since this one is already skinned and works just as needed.

I tried using jQuery.noConflict, the jcarousel controller still didn't work.

Answer 1

Hi Nat.

This one over at jQuery API docs might help you: jQuery.noConflict.

Have a nice day.

Answer 2

There are tons of other carousel plugins that you could use (this one looks pretty good). Is there any reason you need to use that specific one? If not, I'd recommend you save yourself a lot of headache and simply switch to a different plugin.

Otherwise, jQuery.noConflict should work. If not, then post the code you're using so we can tell you what's wrong.

Answer 3

Sorry to say, you are going to want to take the time to a) fix the old plugin to work on newer versions of jQuery yourself, or b) switch to a carousel that works with the new versions of jQuery. Including two versions of jQuery on a site is bad practice, and you will be asking for trouble later, but it is not impossible.

You may be able to do something like this:

<script type="text/javascript" src="/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="/js/oldcarousel.js"></script>
<script type="text/javascript">jQuery12 = jQuery.noConflict();</script>
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>

Assuming that oldcarousel.js uses the closure (meaning the first and last lines of code look like this):

(function($){
  // and that all plugin code in here references $ not jQuery
})(jQuery); 

It should be able to "hang on" to jQuery 1.2 after 1.4 overwrites it.

It might also work to change the include order: You may be able to do something like this:

<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="/js/oldcarousel.js"></script>
<script type="text/javascript">jQuery12 = jQuery.noConflict(true);</script>

As passing true to .noConflict() should restore the $ and jQuery aliases from the new version.