Using the jQuery plugin ColorBox in noConflict() mode

Question

Hi All,

I am using the jQuery plugin ColorBox in a Joomla! theme, and am having a hard time getting it to work in noConflict() mode. I have the following code that calls my jQuery and the noConflict(); call, followed by my actual jQuery markup:

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" language="javascript">jQuery.noConflict();</script>
<script type="text/javascript" language="javascript" src="PATH TO COLORBOX"></script>
<script type="text/javascript" language="javascript">
    jQuery(document).ready(function(){
        jQuery('a.colorbox').colorbox();
    })
</script>

However, I simply cannot get it to work under noConflict() mode. when disabling the no conflict mode it works no worries, but then the associated Mootools scripts in Joomla do not work.

Can someone point me in the right direction here? Much Appreciated, Simon

Answer 1

It turned out that after all of this, it was related to the order in which Joomla! was calling scripts. So for all those who stumble across the same issue, your script calls must all be called AFTER Joomla! include head tag, like follows:

<jdoc:include type="head" />
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" language="javascript">jQuery.noConflict();</script>
<script type="text/javascript" language="javascript" src="<?php echo JURI::base(); ?>templates/helen-o-grady/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" language="javascript">
        jQuery(document).ready(function(){         
        jQuery('a.colorbox').colorbox({iframe:true, width:900, height:650});
        })(jQuery)
</script>