Help with Jquery and prototype

Help with Jquery and prototype

hey guys,
i have been pulling my hair out about this for some time now.
i have read all the articles online about noConflict(); and the like,
and am still not getting any success from this!!
even replacing all the $ with $$$ in prototype.js and effects.js did not solve the issue. (source)

could someone PLEASE help me out of this rut!!

I am trying to make use of this scrolling effect on the same page as this jquery image slider
Both work independently if i remove the conflicting library.

my code is as follows
any help would be GREATLY appreciated!!
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="easySlider1.7.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){   
                $("#slider").easySlider({
                    auto: true,
                    continuous: true,
                    nextId: "slider1next",
                    prevId: "slider1prev"
                });
                $("#slider2").easySlider({
                    numeric: true
                });
            });   
        </script>
       
    <script src="prototype.js" type="text/javascript"></script>
    <script src="effects.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        Event.observe(window, 'load', function() {
      $$('a[href^=#]:not([href=#])').each(function(element) {
        element.observe('click', function(event) {
          new Effect.ScrollTo(this.hash.substr(1));
          Event.stop(event);
        }.bindAsEventListener(element))
      })
    })
       Event.observe(window, 'load', function() {
         $('view_source').observe('click', function(event){
           $('source').toggle();
           Event.stop(event);
         });
       });
        </script>