Question

I am trying to use Lightbox plugin but with jquery there is a conflict and gone through some articles and find out to get work around this but I have no luck in implementing it.

Here is my code:
References:

<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<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:

<script type="text/javascript">
    jQuery.noConflict();
    (function ($) {
        $(document).ready(function () {
            $("a[rel=lightbox[group1]]").live("click", function () {
                $("a[rel^='lightbox[group1]']").lightbox();
                return false;
            });
        });
    })(jQuery);
</script>

Any help will be greatly appreciated!

I am using jquery 1.5.2 version

Answer 1

To prevent $ conflicts between jQuery and prototype, you have to put jQuery.noConflict(); right after you include jQuery and before any other code that expects $ to belong to another library. Then, once you’ve done that, $ will not map to jQuery, it will be used by the other libraries.

You don’t show how you include jQuery. Here’s an example right from the jQuery doc page for .noConflcit():

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

In your case, I think your code would go like this:

<link href="Lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
<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" src="jquery.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    (function ($) {
        $(document).ready(function () {
            $("a[rel=lightbox[group1]]").live("click", function () {
                $("a[rel^='lightbox[group1]']").lightbox();
                return false;
            });
        });
        // other jQuery code that uses $ can go here
    })(jQuery);
    // other jQuery code that uses jQuery (but not $) can go here or in other script tags
</script>

The order of including js files in relation to the call to jQuery.noConflict() is critically important.