I have two calls for jquery on my page, they are conflicting and breaking one another
I have two calls for jquery on my page, they are conflicting and breaking one another
OK. I have the flow player tools:overlay working nicely on my page.
<!-- jquery overlay menu -->
<script src="http://cdn.jquerytools.org/1.2.2/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("img[rel]").overlay();
});
</script>
THEN I ADDED the colorbox script which also uses jquery
<!-- this is the colorbox -->
<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".example5").colorbox();
});
</script>
The issue is with the two jquery.js files
<script src="http://cdn.jquerytools.org/1.2.2/jquery.tools.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
They are conflicting.
When I remove one the other works fine and vice versa?
Dont know what to do about it...I have tried adding the jquery no conflict and that didn't work. I need them both to work on my page. One just pulls up a hidden div that Im using for a sub navigation. The color box script is graying the screen and is pulling a hidden div that's an HTML file that has embedded video.