Two jQuery object conflict

Question

I'm having this problem, I can't get to work two jQuery based objects on my page. According to placement, on or other doesn't seem to work properly.

Codes looks about this at the moment :

   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>
    <script type="text/javascript" src="sprinkle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="js/slides.min.jquery.js"></script>

    <script>
        $(function(){
            $('#slides').slides({
                preload: true,
                generateNextPrev: false
            });
        });

    </script>

I'm out of options, any ideas how to get these guys to work together?

Answer 1

You're really not supposed to use two jQuery versions together at the same time, but if you must:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script>
    $jq1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    $jq2 = $.noConflict(true);
</script>

Now you have the 1.2.6 version as $jq1 and the other as $jq2:

$jq1(function(){
        $jq1('#slides').slides({
            preload: true,
            generateNextPrev: false
        });
    });