I'm using two different jQuery functions and one seems to be canceling the other out
<p>I am trying to use two pieces of jquery for a lightbox and a scroller for  a single page website I'm building. They both work fine on their own, but when I put them together on the same page, the scroller seems to cancel out the lightbox, rendering it ineffective.</p>

<p>Here's the lightbox code:</p>

<pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
&lt;/script&gt;
</code></pre>

<p>Here's the scroller code:</p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;// &lt;![CDATA[
$(document).ready(function() {
    function filterPath(string) {
        return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }
    $('a[href*=#]').each(function() {
        if (filterPath(location.pathname) == filterPath(this.pathname) &amp;&amp; location.hostname == this.hostname &amp;&amp; this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash),
                $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function() {
                    $('html, body').animate({
                        scrollTop: targetOffset
                    }, 2000);
                    return false;
                });
            }
        }
    });
});​
// ]]&gt;&lt;/script&gt;
</code></pre>
