Diaporama carousel + lightbox

Bonjour

Je suis débutante en javascript et jquery.
je souhaitais intégrer sur un site un diaporama de photos de type carousel combiné avec un affichage ligthbox
J'ai trouvé sur la web un plug-in me permettant de faire exactement ce que je souhaitais moyennant quelques paramètrages :
http://caroufredsel.frebsite.nl/exam...l_lightbox.php
Je souhaite l'affichage "jquery.fancybox", exactement comme sur la page ci dessus.
Mais je ne parviens à le faire fonctionner sur mon site :
http://raphaelstephan.com/photos.html
J'ai besoin d'aide.
Dans le head de ma page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Raphael Stephan - Aménagement intérieur </title>
<link href="css/stephan.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox-1.3.4.css" />
 
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-4.0.2.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-4.0.2-packed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
		!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 
 
<script type="text/javascript" language="javascript">
$("#foo").carouFredSel({
	width: 450,
	padding: "auto",
	items: {
		visible: 3,
		start: "random",
		width: 140,
		height: 140
	},
	scroll: {
		mousewheel: true
	},
	auto: 1500
});
);
$("#foo1 a").fancybox({
	cyclic	: true,
	onStart	: function() {
		$("#foo1").trigger("pause");
	},
	onClosed: function() {
		$("#foo1").trigger("play");
	}
});
</script>
 
 
 
</head>

Dans le body

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="image_carousel">
	<div id="foo1">
		<a rel="fancybox" href="/images/large/1.jpg">
			<img src="/images/small/1s.jpg" alt="" width="140" height="140" />		</a><a rel="fancybox" href="/images/large/2.jpg"><img src="/images/small/2s.jpg" alt="" width="140" height="140" /></a><a rel="fancybox" href="/images/large/3.jpg">
			<img src="/images/small/3s.jpg" alt="" width="140" height="140" />
		</a>
		<a rel="fancybox" href="/images/large/4.jpg">
			<img src="/images/small/4s.jpg" alt="" width="140" height="140" />		</a>
		<a rel="fancybox" href="/images/large/5.jpg">
			<img src="/images/small/5s.jpg" alt="" width="140" height="140" />		</a>
		<a rel="fancybox" href="/images/large/6.jpg">
			<img src="/images/small/6s.jpg" alt="" width="140" height="140" />		</a>	</div>
	<div class="clearfix"></div>
</div>