JQuery Slideshow and MooTools Conflict

Question

I am having a problem with the motools library conflicting with my jQuery library:

Here's the code:

<script language="Javascript" type="text/javascript" src="revamp/js/jquery-1.4.2.js"></script>
<script language="Javascript" type="text/javascript" src="revamp/js/jquery.blinds-0.9.js"></script>

<script type="text/javascript" src="js/mootools-1.2-core.js"></script> 
<script type="text/javascript" src="js/_class.viewer.js"></script> 

<script type="text/javascript">//<![CDATA[
        window.addEvent('domready',function(){
        var V5 = new viewer($('boxCont').getChildren(),{
            mode: 'alpha',
            fxOptions: {duration:500},
            interval: 6000
        });
        V5.play(true);  

        });
</script> 

<script type="text/javascript">

            $(window).load(function () {
                // start the slideshow
                $('.slideshow').blinds();
            })
</script>

If I disable mootools, the slideshow work (vice versa with the jQuery). I tried wrapping the jQuery around jQuery.noConflict(); like so:

<script type="text/javascript">
$.noConflict();
  jQuery(document).ready(function($) {
        $(window).load(function () {
                // start the slideshow
                $('.slideshow').blinds();
            })
});
</script>

But still the mootools dependent script doesn't work. Please help as I'm not really familiar with jQuery/javascript.

Thanks!

Answer 1

Once you call jQuery.noConflict(), you refer to jQuery via jQuery rather than $. $ is then usable by MooTools or another JavaScript library.

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery(window).load(function () {
                // start the slideshow
                jQuery('.slideshow').blinds();
        })
    });
</script>

If you want to give jQuery another name, you can do the following:

<script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(document).ready(function() {
        jq(window).load(function () {
                // start the slideshow
                jq('.slideshow').blinds();
        })
    });
</script>

Answer 2

You want jQuery.noConflict().

But you don't really need to, because you are using jQuery for your jQuery alias, and you are passing $ as the argument which maps to the jQuery object.

So long as all your jQuery (and jQuery only) happens inside that jQuery(document).ready(), then you can use $ for jQuery and not worry about about clashes.