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
and "easy slider" from here
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:

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

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="" type="text/javascript"></script>
            <script type="text/javascript" charset="utf-8">
                google.load("jquery", "1.3");
            <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>
    function() {
    $(this).stop().animate({"opacity": ".5"}, "slow");
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/easySlider1.7.js"></script>
        <script type="text/javascript">
                    auto: true,
                    continuous: true

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">

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: