conflicht between "pretty photo" and "easy slider"

conflicht between "pretty photo" and "easy slider"

i have been added 2 scripts in one page in my website and portfolio.
 "pretty photo" from here http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
and "easy slider" from here http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
but when i put them in one page they don't work together. the easy slider work and the pretty photo stop. and when i remove the easy slider codes entry in the header the pretty photo work and easy slider stop. i really don't know what to do i try many things.
here is some pages from my website show the problem:
http://www.osmanassem.com/printed_portfolio.html

and as you see the slider is working but not the pretty photo in the images in the bottom.
and here is my website:
http://www.osmanassem.com

here is the codes in the head tags
  1. <link rel="shortcut icon" href="images_folder/favicon.ico" />
    <script type='text/javascript' src='jquery-1.4.js'></script>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
            <script type="text/javascript" charset="utf-8">
                google.load("jquery", "1.3");
            </script>
            <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
             <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
            <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Osman Assem| Web &amp; Graphics Designer</title>
    <link href="layout.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){
    $("img.a").hover(
    function() {
    $(this).stop().animate({"opacity": ".5"}, "slow");
    },
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    });
     
    });
    </script>
    <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/easySlider1.7.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){   
                $("#slider").easySlider({
                    auto: true,
                    continuous: true
                });
            });   
        </script>

































and here is the codes in the bottom related to pretty photo and i put it before i end the body tag
  1. <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto();
            });
        </script>



i wish anybody can help me and find the problem because i really tried very hard doing that.

also i have another problem with easy slider
the 2 arrows in the sides is not fixed beside the slider div. so when somebody use different screen resolution it looks shifted to left. and when i zoom in or out from the browser view it also shifted to left and not being beside the slider. but in the demo the arrows is fixed
and i didn't do anything i just edit the slider width and height and the images width and height.
and here is the css file related to the easy slider:
http://www.osmanassem.com/css/screen.css