jQuery and Lightbox conflict

Using jQuery with other libraries ? You can find a whole article about this directly on the jQuery page. RTFM is what I always say. Well, sometimes it's just not good enough. I was implementing jQuery into project where I use Lightbox and for the first time of my short jQuery experience I had to face the conflicts problem. First thought - jQuery page - conflicts - using jQuery with other libraries - noConflict - examples. I found sample code, first one:

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';


Result - JavaScript error. On the same page an another example:

jQuery.noConflict();
(function($) {
    $(function() {
        // more code using $ as alias to jQuery
    });
})(jQuery);
// other code using $ as an alias to the other library


Result - not working either. It looked really sad, the jQuery page didn't tell much more, which tolds me pretty much it's that simple, that is doesn't need to be explained more complex. Without further stalling, here is the solution. First I updated my lightbox JavaScript files from the script.aculo.us web page. Then an important step, rearranging scripts as follows:

<head>
    <script type="text/javascript" src="jquery.js"></script>
 
    <script type="text/javascript">
        jQuery.noConflict();
    </script>
 
    <script type="text/javascript" src="lightbox/js/prototype.js"></script>
    <script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="lightbox/js/lightbox.js"></script>
 
    <script type="text/javascript">
        jQuery(function ($) {
            $('div').hide();
        });
    </script>
</head>


This is of course an example of Lightbox, but the real issues were with prototype.js and scriptaculous.js, which have to be preceeded by the noConflict statement. These lines are followed by a little different jQuery DOM ready function inside which we can use the $ alias for jQuery. This should be enough to get it all to work. One final thought, you might need to use jQuery instead of $ inside functions, not quite explored that yet.