Confliction between Lightbox2 and jQuery

I have used the typical Lightbox 2 and jQuery form plugin on the product detail page for our shopping cart application. Lightbox 2 was implemented first and it worked beautifully. However, it failed to work once the jQuery form was implemented. After some googling, it turned out jQuery conflicts with Lightbox2’s prototype.js.

The work around is to place jQuery.noConflict() before the $(document).ready function in your jQuery script. Then replace all “$” with “jQuery” where the “$” is used for a jQuery functions.

Before:

$(document).ready(function(){
 $(window).load(
   function() {
     var foo = $('#content-wrapper').height();
...etc.

After:

    jQuery.noConflict();
   jQuery(document).ready(function(){
     jQuery(window).load(
       function() {
      var foo = jQuery('#content-wrapper').height();
   ...etc.

Thanks to Phil’s post in Objective Development Forum.