Bonjour,
je suis en train d'intégrer dans mon site un diaporama simple Jquery en fondu enchainé de plusieurs images. Dans mes paramètres, j'ai la possibilité de modifier le "delay" et "l'animationSpeed", pour le temps de transition et le temps d'animation (fade pour moi). j'ai voulu un fade très long pour mon animation.
J'ai aussi une flèche pour revenir à l'image précédente et une flèche droite pour aller à l'image suivante. Ce que je voudrai, c'est que quand je clique sur la flèche de droite ou gauche, la photo apparaisse instantanément et non en fondu (le temps paramétré pour l'animationSpeed du diapo).
Merci beaucoup
Voici le code:
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
104
105
106
107
108
109
110
111
112
(function($){
	$.fn.diaporama = function(options) {
 
		var defaults = {
			delay: 10,
			animationSpeed: 5000,
			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'><table border='0' style='text-align:center;' width='100%'><tr><td width='15%'><a href='#' class='prev'>Prec.</a></td> <td><a href='#' class='pause'>Pause</a></td> <td width='15%'><a href='#' class='next'>Suiv.</a></td></tr></table></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);
$(document).ready(function(){
 
	$(".diaporama").diaporama({
		animationSpeed: 5000,
		delay: 8
	});
 
});
//delay en seconde et animationSpeed en seconde/1000