How to use multiple jquery at a time?

Question

I need to use three different scripts >> jquery-1.2.6.min.js , jquery-1.4.2.min.js and jquery-1.9.0.min.js

First one is needed for Navigation menu bar, second one is for bubble effect on home page and third one is for opening fancy box.

But after using first, rest two are not working. In rest two i have used no-conflict and it worked. But when used first one, nothing is working...Only Bubble effect (that is first one - 1.4.2.min.js ) is working.

All codes are as follows:

For Bubble Effect:

    <script type="text/javascript" src="jshome/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jshome/jquery.easing.1.3.js"></script>
    <script type="text/javascript">

        $(function() {
            $('#nav > div').hover(
            function () {
                var $this = $(this);
                $this.find('img').stop().animate({
                    'width'     :'210px',
                    'height'    :'210px',
                    'top'       :'-25px',
                    'left'      :'-25px',
                    'opacity'   :'1.0'
                },500,'easeOutBack',function(){
                    $(this).parent().find('ul').fadeIn(700);
                });

                $this.find('a:first,h2').addClass('active');
            },
            function () {
                var $this = $(this);
                $this.find('ul').fadeOut(500);
                $this.find('img').stop().animate({
                    'width'     :'52px',
                    'height'    :'52px',
                    'top'       :'0px',
                    'left'      :'0px',
                    'opacity'   :'0.1'
                },5000,'easeOutBack');

                $this.find('a:first,h2').removeClass('active');
            }
        );
        });
    </script>

For Navigation Menu Effect:

 <script type="text/javascript" src="jsnav/jquery-1.2.6.min.js"></script>
 <script type="text/javascript" src="jsnav/jquery.bgpos.js"></script>

 <script type="text/javascript">
 var $j = jQuery.noConflict();
 $(function(){

     $j('#b a')
         .css( {backgroundPosition: "0 0"} )
         .mouseover(function(){
            $j(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
       })
         .mouseout(function(){
        $j(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
            $j(this).css({backgroundPosition: "0 0"})
        }})
       })

  });
 </script>

For Fancy Box:

<script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script>

<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
    $(document).ready(function() {
        /*
         *  Simple image gallery. Uses default settings
         */

        $('.fancybox').fancybox();          

        $("#fancybox-manual-b").click(function() {
            $.fancybox.open({
                href : 'test.html',
                type : 'iframe',
                padding : 5
            });
        });


    });
</script>

Out of above three scripts, 1.4.2 and 1.9.0 are added in nav.php and 1.2.6 is added in index.php page. nav.php is added in index.php with include("nav.php")

Answer 1

Have you tried like this?

<script  src="../jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
var first= $.noConflict(true);
</script>

<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="../jquery-1.2.2.js"></script>
<script type="text/javascript">
var second= $.noConflict(true);
</script>

Answer 2

I updated my code for bubble effect as follows and now everything is working.....

Thank you for your support.

Updated code is :

<script type="text/javascript">
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
        $(function() {
            $('#nav > div').hover(
            function () {
                var $this = $(this);
                $this.find('img').stop().animate({
                    'width'     :'210px',
                    'height'    :'210px',
                    'top'       :'-25px',
                    'left'      :'-25px',
                    'opacity'   :'1.0'
                },500,'easeOutBack',function(){
                    $(this).parent().find('ul').fadeIn(700);
                });

                $this.find('a:first,h2').addClass('active');
            },
            function () {
                var $this = $(this);
                $this.find('ul').fadeOut(500);
                $this.find('img').stop().animate({
                    'width'     :'52px',
                    'height'    :'52px',
                    'top'       :'0px',
                    'left'      :'0px',
                    'opacity'   :'0.1'
                },5000,'easeOutBack');

                $this.find('a:first,h2').removeClass('active');
            }
        );
        });
        });
    </script>

After using this code, bubble effect, navigation effect and Fancybox Opening is Working.

Answer 3

Please search before asking a question, a Google search for 'multiple jquery libraries' gives many useful results.

Anyway, you can add an extra code to your pages(s) so the jQuery libraries don't conflict with each other:

<script>
var jq142 = jQuery.noConflict();
</script>

I believe this code must be placed before the first jQuery library is loaded. I advise you not to use two jQuery libraries on one page but if you must to the above answer may help you.