Discussion :

[darkterreur]

Bonjour a tous,

Tout d'abord merci de l'intérêt que vous porter a mon sujet.
Je vais essayer d'être le plus clair possible dans le cas contraire merci de me le faire savoir.

J'essaye donc de réaliser un slideshow avec mes petites mains, oui je sais qu'il en existe déjà de tout fait.
J'ai donc un code fonctionnel qui fonctionne grâce a des "fadeIn" "fadeOut".

Mais des que je les remplace par des "show('bounce')" ou "hide('bounce')", mon code se met a faire n'importe quoi je ne passe plus dans les condition de mon if

Code :

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

 if(!$("li.zsl_active").is(":last-child"))

Et donc cela met le bazar, le plus parlant je pense est de vous mettre mon code.
Voici le html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="zsl_wrapper">  
	<div class="zsl_icon_prev"><i class="fa fa-chevron-circle-left"></i></div>
	<div class="zsl_icon_next"><i class="fa fa-chevron-circle-right"></i></div>
	<ul>  
		<li class="zsl_imgSLide"><img src="./images/chaz.jpg" alt="" width="200" height="200" /></li>
		<li class="zsl_imgSLide"><img src="./images/dave.jpg" alt="" width="200" height="200" /></li>  
		<li class="zsl_imgSLide"><img src="./images/elcholo.jpg" alt="" width="200" height="200" /></li>  
		<li class="zsl_imgSLide"><img src="./images/fred.jpg" alt="" width="200" height="200" /></li>  
		<li class="zsl_imgSLide"><img src="./images/mack.jpg" alt="" width="200" height="200" /></li> 
		<li class="zsl_imgSLide"><img src="./images/mike.jpg" alt="" width="200" height="200" /></li> 
		<li class="zsl_imgSLide"><img src="./images/ivy.jpg" alt="" width="200" height="200" /></li> 
		<li class="zsl_imgSLide"><img src="./images/nick.jpg" alt="" width="200" height="200" /></li>   
	</ul>
</div>  
<input type="hidden" id="etatSlide" value="true">

Voici mon JS :

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
$(document).ready(function(){
	var dataForm = '';
	$.ajax({
		type: "POST",
		processData: true,
		url: 'zsl_conf.php',
		data: dataForm,
		dataType: 'json'
	})
	.done(function( Data ) {
	 	zsl_diaporama(Data);
	 })
	.fail(function(Data) {
		console.log("erreur load config ");
	}); 
});
function zsl_diaporama(Init){
	$("li").first().show();
	$("li").first().addClass("zsl_active");
	if(Init.timer == true){
		setInterval(function() {		
			console.log('je boucle');
			if($('#etatSlide').val() == 'true'){
				zsl_next();
			}
		}
		, Init.delay);
	}
	function zsl_prev(){
	    $("li.zsl_active").fadeOut(Init.animationSpeed);
	    //$("li.zsl_active").hide();
	    //$("li.zsl_active").hide('explode',Init.animationSpeed);
	    if(!$("li.zsl_active").is(":first-child")){
	        $("li.zsl_active").removeClass("zsl_active").prev().addClass("zsl_active");
	        $("li.zsl_active").fadeIn(Init.animationSpeed);
	        //$("li.zsl_active").show();
	        //$("li.zsl_active").show('explode',Init.animationSpeed);
	    }
	    else{
	        $("li:last-child").addClass("zsl_active").fadeIn(Init.animationSpeed);
			$("li:first-child").removeClass("zsl_active");
	    }
	}
	function zsl_next(){
		console.log('next ->');
	    //$("li.zsl_active").fadeOut(Init.animationSpeed);
	    $("li.zsl_active").hide('bounce');
	    if(!$("li.zsl_active").is(":last-child")){
	        console.log('pas le dernier enfant');
	        $("li.zsl_active").removeClass("zsl_active").next().addClass("zsl_active");
	        //$("li.zsl_active").fadeIn(Init.animationSpeed);
	        $("li.zsl_active").show('bounce');
	    }
	    else{
	        console.log('dernier enfant');
	        //$("li:first-child").addClass("zsl_active").fadeIn(Init.animationSpeed);
	        $("li:first-child").addClass("zsl_active");
	        $("li:last-child").removeClass("zsl_active");
	        //$("li.zsl_active").fadeIn(Init.animationSpeed);
	        $("li.zsl_active").show('bounce');
	    }
	}
	$('.zsl_icon_prev').on('click',function(){
		//console.log('preview');
		zsl_prev();
	});
	$('.zsl_icon_next').on('click',function(){
		//console.log('next');
		zsl_next();
	});	
}
$('.zsl_wrapper').hover(function(){
	//console.log('souris entre');
	$('#etatSlide').val('false');
	$('.zsl_icon_next').show();
	$('.zsl_icon_prev').show();
},function(){
	//console.log('souris sort');
	$('#etatSlide').val('true');
	$('.zsl_icon_next').hide();
	$('.zsl_icon_prev').hide();
});

Et voici le tableau de paramètre que je récupère en Ajax :

Code php :

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

1
2
3
4
5
6
7
8
<?php
$init = array(
	"animationSpeed" => "slow"
 	,"delay" => 2000
 	,'timer' => false
);
echo json_encode($init);
?>

Voila pour faire une synthèse d'utilisation, je recupère en ajax mon tableau de paramètre
puis je lance un "setInterval" qui appel la fonction zsl_next().
lorsque le curseur rentre dans la div je bloque le timer, et j'affiche les bouton pour faire suivant précédant a la main.

Je voulais rajouter une option dans mon tableau de paramètre pour permettre de choisir son effet et des que je rajout un effet (a la main).
Tout plante.

Voila j'espère avoir été clair.

Je vous remercie par avance pour vos lumières.

[darkterreur]

Bonjour,

je vous remercie de l'intérêt que vous avez portez a mon problème.
C'est le moment de faire voler les mouches

trêve de plaisanterie, j'ai une solution qui pourra peut être intéresser quelqu'un on ne sais jamais.

Le problème étais que les action UI modifie le DOM le temps de l'action donc mes selecteurs "first" et "last" sont perdu.

Donc il faut attendre la fin de l'action voici un exemple de 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
function zsl_prev(){
    $("li.zsl_active").hide(Init.effet,function(){
 
	   	if(!$(".zsl_wrapper li.zsl_active").is(".zsl_wrapper li:first-child"))
	    {
	        $(".zsl_wrapper li.zsl_active").removeClass("zsl_active").prev().addClass("zsl_active");
	        $(".zsl_wrapper li.zsl_active").show(Init.effet);
	    }
	    else
	    {
	        $(".zsl_wrapper li:last-child").addClass("zsl_active");
			$(".zsl_wrapper li:first-child").removeClass("zsl_active");
			$(".zsl_wrapper li.zsl_active").show(Init.effet);	
	    }
    });
}

et la on est parfait.