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.