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