I realize there are already various answers out there to questions about using multiple jquery versions on a page, but I have not been able to figure out how to apply them.
On my page I have two .js files - one for operating a collapsible menu, and the second for a thickbox gallery. The collapsible menu stopped working when I added the gallery. When I tried to use the no conflict solution from the link below, the menu worked but the gallery images would no longer load.
http://api.jquery.com/jQuery.noConflict/
Any ideas of what I'm doing wrong? Do I need to add things to both the .html file and the .js files?
code:
<script type="text/javascript" src="../../01 Main/includes/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../../01 Main/includes/main.js"></script>
<script type="text/javascript">
<div id="log">
<h3>Before $.noConflict(true)</h3>
</div>
</script>
<script type="text/javascript" src="../scripts/jquery-latest.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<script type="text/javascript">
var $log = $( "#log" );
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
jq16min = jQuery.noConflict(true);
$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jqlatest): " + jqlatest.fn.jquery + "<br>" );
</script>
also tried:
<script type="text/javascript" src="../../01 Main/includes/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../../01 Main/includes/main.js"></script>
<script type="text/javascript">
var jQuery_1_6_min = $.noConflict(true);
</script>
<script type="text/javascript" src="../scripts/jquery-latest.js"></script>
<script type="text/javascript" src="../scripts/thickbox.js"></script>
<script type="text/javascript">
var jQuery_latest = $.noConflict(true);
</script>