Discussion :

[Geoffrey74]

Bonjour,

j'ai réalisé un petit slideshow pour interchanger automatiquement une image dans une div, seulement j'ai un petit soucis visuel au changement de l'image.

Voici mon code :

Partie html :
Génération du tableau JS

Code php :

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

1
2
3
<script>
	var TabSlide = <?php echo json_encode(array_values(array_diff(scandir('Photos/Slide/'), array('..', '.')))); ?>;
</script>

la div concernée

Code html :

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

<div id="SlideShow"><img src="Photos/Slide/Img1.jpg" /></div>

Partie javascript :

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() {
	var NbImg = TabSlide.length;
	var EnCours = 1;
 
	setInterval(function(){
		$("#SlideShow").fadeOut("slow");
		$("#SlideShow").empty();
		$("#SlideShow").html('<img src="Photos/Slide/'+TabSlide[EnCours]+'" />');
		$("#SlideShow").fadeIn("slow");
 
		if(EnCours < NbImg - 1 )
			EnCours++;
		else
			EnCours = 0;
	}, 2000);
 
});

Donc, dans l'idée, je veux cacher la dire (fadeOut), vider le contenu, charger le nouveau contenu, et afficher ensuite le nouveau contenu (fadeIn).

Seulement voila, tout ne se passe pas comme je voudrais...

J'ai la première image chargée par défaut, au bout de 2s, la deuxième image remplace brutalement la première, et ensuite j'ai le fadeOut, fadeIn, ce qui n'est pas vraiment ce que je souhaite.

Auriez-vous donc une idée du pourquoi ?

Merci d'avance.

[NoSmoking]

Bonjour,
peut être que ceci pourrait t'intéresser, sans jQuery
Galerie avec effet de fondu

[Geoffrey74]

Merci pour le lien, mais je souhaite comprendre pourquoi ça ne marche pas, car des Slideshow j'en trouve partout sans pour autant les comprendre

[danielhagnoul]

Bonsoir

1. Construire un sélecteur est une opération coûteuse, il faut stocker l'objet jQuery si on l'utilise plusieurs fois.
2. La méthode html() remplace l'ancien contenu par le nouveau, l'utilisation de la méthode empty() est donc inutile.
3. Pour avoir l'animation voulue, il faut utiliser la fonction de rappel

Code :

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

1
2
3
4
5
6
7
var jObjSlide = $( "#SlideShow" );
 
jObjSlide .fadeOut( "slow", function(){
    jObjSlide
        .html( '<img src="Photos/Slide/'+TabSlide[EnCours]+'" />' )
        .fadeIn( "slow" );
});

[Geoffrey74]

Parfait !


Merci beaucoup