Diaporama carousel + lightbox

Babagaya · 04/05/2011, 23h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

danielhagnoul · 05/05/2011, 22h19

Bonsoir

Il y a tellement de choses à dire sur votre head que je renonce, je vous conseille vivement de lire la FAQ jQuery (lien dans ma signature). Voici le code remis en ordre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Raphael Stephan - Aménagement intérieur </title>
	<link rel="stylesheet" href="css/stephan.css" />
	<link rel="stylesheet" media="all" href="fancybox/jquery.fancybox-1.3.4.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<script src="jquery.carouFredSel-4.0.2-packed.js"></script>
	<script>
		$(function(){
			$("#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>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email