Discussion :

[Ctesias]

Bonjour,

Voila, j'ai un script javascript gérant un diaporama. Le problème, c'est qu'il va affreusement vite.. Beaucoup trop vite... Mais je n'arrive pas a trouver l'option qui gère sa vitesse.

Voila le script:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
(function($){
	$.fn.diaporama = function(options) {
 
		var defaults = {
			delay: 3,
			animationSpeed: "normal",
			controls:true
		};
 
		var options = $.extend(defaults, options);
 
		this.each(function(){
 
			var obj = $(this);
 
 
			if($(obj).find("li").length > 1){
				var inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
				var sens = "right";
				var pause = false;
 
				$(obj).find("li").hide();
				$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
 
				// Controls
 
				if(options.controls)
				{
					$(obj).after("<div class='diaporama_controls'><div class='btns'><a href='#' class='prev'>Prec.</a> <a href='#' class='pause'>Pause</a> <a href='#' class='next'>Suiv.</a></div></div>");
 
					$(obj).siblings().find(".prev").click(function(){
						clearInterval(inter);
						prevElt(options);
						if(!pause)
							inter = setInterval(function(){prevElt(options)}, (options.delay*1000));
						sens = "left";
					});
 
					$(obj).siblings().find(".next").click(function(){
						clearInterval(inter);
						nextElt(options);
						if(!pause)
							inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
						sens = "right";
					});
 
					$(obj).siblings().find(".pause").toggle(
						function(){
							$(this).removeClass("pause").addClass("play");
							clearInterval(inter);
							pause = true;
						},
						function(){
							$(this).removeClass("play").addClass("pause");
							inter = setInterval(function(){ (sens == "right")?nextElt(options):prevElt(options)}, (options.delay*1000));
							pause = false;
						}
					);
				}
 
				// Affiche l'élément suivant
 
				function nextElt(options)
				{
					$(obj).find("li.active").fadeOut(options.animationSpeed);
 
					if(!$(obj).find("li.active").is(":last-child"))
					{
						$(obj).find("li.active").next().addClass("active").prev().removeClass("active");
						$(obj).find("li.active").fadeIn(options.animationSpeed);
 
					}
					else
					{
						$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
						$(obj).find("li:last-child").removeClass("active");
					}
				}
 
				// Affiche l'élément précédent
 
				function prevElt(options)
				{
					$(obj).find("li.active").fadeOut(options.animationSpeed);
 
					if(!$(obj).find("li.active").is(":first-child"))
					{
						$(obj).find("li.active").prev().addClass("active").next().removeClass("active");
						$(obj).find("li.active").fadeIn(options.animationSpeed);
 
					}
					else
					{
						$(obj).find("li:last-child").addClass("active").fadeIn(options.animationSpeed);
						$(obj).find("li:first-child").removeClass("active");
					}
				}
			}
		});
 
		return this;
	};
})(jQuery);

J'ai bien essayé de changer animationSpeed, mais cela ne change absolument rien..


Cordialement,

Ctesias

[SpaceFrog]

heu là tu ne nous montre que l'initialisation ...
tu as tenté quoi ?

[Ctesias]

HA mince, je pensais avoir mis tous ce qu'il fallait.
Bref, j'ai tenté un Diaporama pour un site internet. Mais le defilement des images est beaucoup trop rapide. et je n'arrive pas a le regler. POur moi, c'etait soit animationSpeed, soit delay qui le gérer. MAis meme en changeant ses valeurs, la vitesse reste la meme...

Je vous met aussi les css en plus du script ci-dessus si vous avez besoin:

diapo.php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
		<!-- Cascading Style Sheets -->
		<link href="css/page_diapo.css" rel="stylesheet" type="text/css" />
		<link href="css/style_diapo.css" rel="stylesheet" type="text/css" />
 
		<!-- Javascript -->
		<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="script/jquery.diaporama.js"></script>
		<script type="text/javascript" src="script/script_diapo.js"></script>
 
 
 
		<ul class="diaporama">
			<li>suite d'image</li>
        </ul>

page_diapo.css :

Code :

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

1
2
3
4
5
6
7
8
a{
	outline:none
}
 
ul{
	margin:0;
	padding:0;
}

style_diapo.css :

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
48
49
50
51
52
.diaporama{
	width:955px;
	height:333px;
	top:opx;
	left:0px;
}
 
.diaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
	left: 0px;
	top: 0px;
	z-index:-1;
}
 
.diaporama_controls{
	width:512px;
	margin:3px 0;
	padding:5px;
	clear:both;
	overflow:hidden;
}
 
.diaporama_controls .btns{
	float:right;
}
 
.diaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:inline-block;
	margin:0 3px;
}
 
.diaporama_controls .prev{
	background:url(img/fleches_diapo.png) no-repeat top right;
}
 
.diaporama_controls .next{
	background:url(img/fleches_diapo.png) no-repeat top left;
}
 
.diaporama_controls .pause{
	background:url(img/fleches_diapo.png) no-repeat bottom right;
}
 
.diaporama_controls .play{
	background:url(img/fleches_diapo.png) no-repeat bottom left;
}

[SpaceFrog]

non mais tu dis avoir tenté de modifier

Code :

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

animationSpeed: "normal",

quelle valeur as tu tenté ????

[Ctesias]

ha euh. j'ai tenté speed, fast, slow. Mais ca, il me semble que c'est la vitesse de l'effet de l'animation non?

Ensuite, j'ai essayé delay, avec des valeur 10, 15... Mais rien ne change non plus...

[SpaceFrog]

a mon avis la norme de jquery est d'accepter les speed en millisecondes ...
essaye

Code :

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

animationSpeed: 5000,

=> 5 secondes

[Ctesias]

Cela ne change absolument rien... Je ne vois plus trop bien ce que cela peux etre d'autre la...

[SpaceFrog]

tu as un lien sur le plugin avec une doc ?

c'est celui là ?
http://www.guillaumevoisin.fr/develo...le-avec-jquery

a prioiri speed=vitesse de déplacements
delay=pause entre animations

pense a vider ton cache ...

[Ctesias]

Oui, c'etait celle la. Mais j'en ai trouvé un autre. C'est bon merci