Diaporama en fondu avec Jquery

**Bernie18** · 30/01/2016, 19h37

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

**danielhagnoul** · 30/01/2016, 21h11

'fast' : http://api.jquery.com/fadeIn/

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
113
114
115
116
117
118
119
120
121
122
123
<script>
  ( function( $ ){
    $.fn.diaporama = function( opts ) {
 
      var defaults = {
        delay: 10,
        animationSpeed: 5000,
        controls:true
      };
 
      var options = $.extend( defaults, opts );
 
      return this.each( function( i, item ){
 
        // Affiche l'élément suivant
        function nextElt(options)
        {
          $(item).find("li.active").fadeOut('fast');
 
          if (!$(item).find("li.active").is(":last-child"))
          {
            $(item).find("li.active").next().addClass("active").prev().removeClass("active");
            $(item).find("li.active").fadeIn('fast');
          }
          else
          {
            $(item).find("li:first-child").addClass("active").fadeIn('fast');
            $(item).find("li:last-child").removeClass("active");
          }
        }
 
        // Affiche l'élément précédent
        function prevElt(options)
        {
          $(item).find("li.active").fadeOut('fast');
 
          if (!$(item).find("li.active").is(":first-child"))
          {
            $(item).find("li.active").prev().addClass("active").next().removeClass("active");
            $(item).find("li.active").fadeIn('fast');
          }
          else
          {
            $(item).find("li:last-child").addClass("active").fadeIn('fast');
            $(item).find("li:first-child").removeClass("active");
          }
        }
 
        if ( $(item).find( "li" ).length > 1 ){
          var
            inter = setInterval( function(){ nextElt( options ) }, ( options.delay*1000 )),
            sens = "right",
            pause = false;
 
          $(item).find("li").hide();
 
          $(item).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
 
          // Controls
 
          if ( options.controls )
          {
            $(item).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>`
            );
 
            $(item).siblings().find(".prev").on( 'click', function(){
              clearInterval(inter);
              prevElt(options);
 
              if (!pause) inter = setInterval( function(){ prevElt( options )}, ( options.delay*1000 ));
 
              sens = "left";
            });
 
            $(item).siblings().find(".next").on( 'click', function(){
 
              if (!pause) inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
 
              sens = "right";
            });
 
            $(item).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;
              }
            );
          }    
        }
      });
    };
  })(jQuery);
 
  $(function(){
 
    $(".diaporama").diaporama({
      animationSpeed: 5000,
      delay: 8
    });
 
  });
</script>

**Bernie18** · 31/01/2016, 00h13

Bonsoir,
j'ai implémenté votre code à la place du mien mais les 3 images se superposent et il n'y a plus d'animation...
Merci

**Bernie18** · 31/01/2016, 19h59

Bonsoir,
je voudrai que la méthode fast ne s'applique que lorsque je clique sur les flèche prev ou next, mais que le diaporama reste en fade long en déroulement normal...
Merci

Diaporama en fondu avec Jquery

jQuery

Discussions similaires

Partager

Partager