My localscroll and lightbox are in conflict

Question

I am coding a site that uses localscroll and lightbox but when I add the lightbox the localscroll stops working and vice versa.

I read one of the answers (http://stackoverflow.com/questions/5149448/adding-multiple-js-files-in-the-header) and tried what was suggested but it is still not working. the code in the header is:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


<script type="text/javascript">jQuery.noConflict();</script>
  
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>



<script type="text/javascript"> 
     // When the document is loaded...
      $(document).ready(function()
    {   // Scroll the whole document
         $('#nav').localScroll({
           target:'body'
        });
    });
</script>


</head>

Right now the lightbox is working but the localscroll is not.

I would really appreciate any help. You can see the site here: http://www.cayennecreative.ca/s/sg/

Thank you in advance :)

Answer 1

It is generally not a good idea to use both the jQuery and Prototype libraries at the same time, and it's usually not necessary. In your case you should probably use a jQuery-based lightbox (e.g. the jQuery lightbox plugin) instead of your Prototype-based one and get rid of your compatibility problems.