Question

I adapted the jQuery slider code from http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ into my website which is based on Twitter’s Bootstrap v2.0.

The problem is that the slider from webdeveloperplus.com is using an older version of jQuery and jQueryUI (1.3.2 and 1.5.3 respectively). The slider works fine if I import the two specified versions of jQuery/UI but Twitter’s Bootstrap JavaScript components doesn’t seem to work with the those versions. And if I use the latest version of jQuery/UI the slider won’t work.

On the webdeveloperplus.com page, the author said to change the following line of code for it to work with the “latest” version of jQueryUI

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

to:

$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

but it still won’t work. The article was probably last updated 2008 or 2009.

My guess was that the line of code above is using something deprecated and removed/changed in the current version of jQuery/UI but I checked jQuery UI’s API and it seems to me that’s not the case. I would appreciate it very much if someone could help me find out what’s the show stopper here. Thanks.

Answer 1

You could use jQuery’s noConflict() function to include two different versions of jQuery.

<script type="text/javascript" src="older_version_of_jquery"></script>
<script type="text/javascript">
    //Do slider work
    //...

    $.noConflict();
</script>

<script type="text/javascript" src="newer_version_of_jquery"></script>

Documentation: http://api.jquery.com/jQuery.noConflict/