Two jquery tools interfere with each other

Question

I am new to jquery. I am working on a website that uses a scroll function I found to move from page to page its scripts looks like this:

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

I also have a script that I want to use on a few pages that is a type of shadowbox for an image gallery. Its script looks like this:

<script type="text/javascript"src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> 

If I have both scripts on the page then only the shadowbox works and the scrolling does not. If I take the shadowbox script off then the scrolling does work. If I put the shadowbox script above the scrolling script then only the scrolling works.

I am not sure if I need to include any more information to explain my problem. From what I can tell it is these scripts that are causing the problem and conflicting with each other.

Answer 1

With jQuerytools, you only need to include it and you get jQuery 1.6.4 for free (read quick start, and you can remove jquery from it if you want, look below the quick start). Therefore, by including jQuery 1.3.1 above jQuery tools, you are trying to load two different versions (1.3.1 and 1.6.4) of the same toolkit, thus conflicting with each other and causing you problems.

Remove the line including jquery 1.3.1 and try that.

Answer 2

I had a problem with jQuery plugins clashing somehow. So after a little research I loaded both scripts into the head of the html document, between consecutive separated script tag zones. Then I used:

window.onload = function() {function01(); function02();};

to load each function in an orderly fashion and separately.

It worked for me this time.