Discussion :

[louise70]

Bonjour,
Voila je vous explique mon problème.
J'ai réaliser 3 diaporamas d'images qui démarrent en même temps en Jquery.
Seulement mon client désire qu'ils démarrent chacun leur tour avec une transition.
Or je ne sais pas du tout comment m'y prendre.
Si quelqu'un pourrait m'aider, sa serait sympa.

Merci

[Spartacusply]

Temporise le démarrage du deuxième et du troisième diaporama avec la fonction setTimeout.

[louise70]

J'y avais pensé mais ce n'est pas possible.

Voici mon code Jquery :

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
 
(function($) {
    $(document).ready(function() {			
	$(".slider").each(function() {
	    var nbImg = $(this).find("img").length;
	    var i=0;
	    var slider = $(this);
 
	    setInterval(function() {
 
		slider.find('img:eq('+i+')').fadeOut(2000);
		i=(i+1)%nbImg;
		slider.find('img:eq('+i+')').fadeIn(2000);
	    },4000);  
	});
    });
})(jQuery);

Et dans mon code HTML, j'utilise 3 fois la classe slider.

[Spartacusply]

C'est pas possible, et pourtant un truc dans le genre devrait fonctionner :

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
(function($) {
    $(document).ready(function() {
        $(".slider").each(function(index) {
            var nbImg = $(this).find("img").length;
            var i = 0;
            var slider = $(this);
 
            var timeout = index* 4000;
            setInterval(function() {
 
                slider.find('img:eq(' + i + ')').fadeOut(2000);
                i = (i + 1) % nbImg;
                slider.find('img:eq(' + i + ')').fadeIn(2000);
            }, timeout);
        });
    });
})(jQuery);

[louise70]

Merci pour votre aide, cela fonctionne à peu près.
Je pense qu'il faut juste que je règle la durée.

J'ai une dernière question, est-ce que à la place des fadeIn et fadeOut je pourrais utiliser une fonction (dont j'ignore le nom) qui décalerais les images de droite à gauche par exemple sans modifier mon code ?

[Spartacusply]

Oui tu le peux en utilisant la méthode animate qui te permet de créer une animation personnalisée.

Autrement, plus simplement tu peux utiliser la librairie jquery UI qui intègre cet effet nativement avec l'effet blind.

[louise70]

D'accord, je vous remercie. Je vais aller étudier cela.

Par contre pour le code précédent, cela fonctionne vu que sa décale les trois diaporamas, seulement, c'est vraiment aléatoire.
Je m'explique :
- Le premier slider fonctionne en continu
- Le deuxième slider fonctionne une fois sur trois
- Et le troisième slider fonctionne très peu.

J'aurais aimé, si cela est possible, que le premier slider change d'image s'arrete ,puis le deuxième puis le troisième et ensuite on recommençait au premier.
Mais je pense que mon code ne va pas du coup.

[Spartacusply]

J'ai oublié quelque chose dans mon code ci-dessus (je poste sans tester aussi) :

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
(function($) {
    $(document).ready(function() {
        $(".slider").each(function(index) {
            var nbImg = $(this).find("img").length;
            var i = 0;
            var slider = $(this);
 
            var timeout = index * 4000;
 
            setTimeout(function() {
                setInterval(function() {
                    slider.find('img:eq(' + i + ')').fadeOut(2000);
                    i = (i + 1) % nbImg;
                    slider.find('img:eq(' + i + ')').fadeIn(2000);
                }, 4000);
            }, timeout);
        });
    });
})(jQuery);

[louise70]

C'est parfait !
Merci beaucoup !

[louise70]

Excusez moi de revenir sur ce sujet, mais j'ai un petit soucis avec le code.
Les 3 sliders fonctionnent bien chacun leur tour au démarrage.
Mais lors du deuxième passage tous est décalé.
Je m'explique :
- Si le premier slider démarre au bout d'une seconde
- Le deuxieme au bout de deux secondes
- Le troisième au bout de trois secondes.
Et bien lors du second passage, le premier va se déclencher toute les secondes, le deuxieme toute les deux secondes ...
Donc du coup il ne sont plus chacun leur tour.

Avez-vous une idée ?