Plusieurs diaporamas dans la page

**Letsrock23** · 23/01/2015, 18h02

Bonjour à tous,

J'ai un petit problème de diaporama sur mon site.

J'ai insérer plusieurs diaporama dans une même page html que je fais fonctionner grâce à du jQuery pour afficher plusieurs épisodes d'une BD. On passe d'un épisode à l'autre grâce à des onglets (il n'y a qu'un seul épisode d'afficher à la fois sur la page). Dans un même épisode, le diaporama sert à afficher les différents planches de cet épisode.

Mon problème c'est que le premier diaporama marche très bien (quel que soit l'épisode que j'ai sélectionné en premier) mais une fois que je sélectionne un autre onglet, le diaporama fait n'importe quoi et ne fonctionne plus correctement.
Bon voilà, j'espère que j'ai été assez clair

et si quelqu'un peut m'aider je lui en serait éternellement reconnaissant, c'est un problème sur lequel je bloque depuis pas mal de temps maintenant.

Je vous passe les codes pour les 2 premiers épisodes.

Le code 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="bd">
 
	<img id="flechegauche" class="fleche" src="images/bd/fleche-gauche.png"/>
 
	<div id="episode1" class="episode">
		<img class="planche" id="planche10" src="images/bd/episode1/bd-episode1-1.PNG"/>
		<img class="planche" id="planche11" src="images/bd/episode1/bd-episode1-2.PNG" style="display: none"/>
		<img class="planche" id="planche12" src="images/bd/episode1/bd-episode1-3.PNG" style="display: none"/>
	</div>
 
	<div id="episode2" style="display: none" class="episode">
		<img class="planche" id="planche20" src="images/bd/episode1/bd-episode2-1.PNG"/>
		<img class="planche" id="planche21" src="images/bd/episode1/bd-episode2-2" style="display: none"/>
		<img class="planche" id="planche22" src="images/bd/episode1/bd-episode2-3.PNG" style="display: none"/>
		<img class="planche" id="planche23" src="images/bd/episode1/bd-episode2-4.PNG" style="display: none"/>
	</div>
 
				<img id="flechedroite" class="fleche" src="images/bd/fleche-droite.png" onclick="diapo()"/>
 
</div>
				<ul>
		<li id="menu-episode1" class="padding menu-episode">Episode 1</li>				
		<li id="menu-episode2" class="padding menu-episode">Episode 2</li>				
		<li id="menu-episode3" class="padding menu-episode">Episode 3</li>				
		<li id="menu-episode4" class="padding menu-episode">Episode 4</li>				
		<li id="menu-episode5" class="padding menu-episode">Episode 5</li>				
		<li id="menu-episode6" class="menu-episode">Episode 6</li>				
	</ul>
 
</nav>

Et le 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
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
124
125
126
127
128
129
130
131
132
133
134
135
// L'animation du diaporama qui permet de passer d'une planche à l'autre de droite à gauche pour l'épisode 1
function diapo(){
	i = 0;
	gestionFleches = function () {
            $('#flechegauche, #flechedroite').css('display', 'inline');
            if (i == 0) {
                $('#flechegauche').css('display', 'none');
            }
            if (i == 2) {
                $('#flechedroite').css('display', 'none');
            }
        };
 
		$('#flechedroite').on('click', function(){
 
			var actuel = '#planche1' + i;
			var next = '#planche1' + (i+1);
 
			$(actuel).css('display', 'none');
			$(next).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i +=1;
			gestionFleches();
		});
 
		$('#flechegauche').on('click', function(){
 
			var actuel = '#planche1' + i;
			var pre = '#planche1' + (i-1);
 
			$(actuel).css('display', 'none');
			$(pre).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i -= 1;
			gestionFleches();
		});
		gestionFleches();
}
 
// L'animation du diaporama qui permet de passer d'une planche à l'autre de droite à gauche	pour l'épisode 2
function diapo2(){
	i = 0;
	gestionFleches2 = function () {
            $('#flechegauche, #flechedroite').css('display', 'inline');
            if (i == 0) {
                $('#flechegauche').css('display', 'none');
            }
            if (i == 3) {
                $('#flechedroite').css('display', 'none');
            }
        };
 
		$('#flechedroite').on('click', function(){
 
			var actuel = '#planche2' + i;
			var next = '#planche2' + (i+1);
 
			$(actuel).css('display', 'none');
			$(next).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i +=1;
			gestionFleches2();
		});
 
		$('#flechegauche').on('click', function(){
 
			var actuel = '#planche2' + i;
			var pre = '#planche2' + (i-1);
 
			$(actuel).css('display', 'none');
			$(pre).css('display', 'inline');
 
			$('#croix').removeClass('bigcroix');
			$('#flechedroite').removeClass('rightflechedroite');
			$('#flechegauche').removeClass('leftflechegauche');
 
			$('img.planche').removeClass('bigplanche');
 
			i -= 1;
			gestionFleches2();
		});
		gestionFleches2();
}
// L'animation lorque l'on clique sur l'onglet "épisode 1"
 
	$('#menu-episode1').on('click', function(){
 
		$(this).css('color', '#24629c');
		$('li').not(this).css('color', '#858585');
 
		$('#episode1').show(1000);
		$('#episode2').hide(1000);		
		$('#episode3').hide(1000);		
		$('#episode4').hide(1000);		
		$('#episode5').hide(1000);		
		$('#episode6').hide(1000);		
		diapo();
 
 
	});
 
// L'animation lorque l'on clique sur l'onglet "épisode 2"
 
	$('#menu-episode2').on('click', function(){
 
		$(this).css('color', '#24629c');
		$('li').not(this).css('color', '#858585');
 
		$('#episode1').hide(1000);
		$('#episode2').show(1000);		
		$('#episode3').hide(1000);		
		$('#episode4').hide(1000);		
		$('#episode5').hide(1000);		
		$('#episode6').hide(1000);		
		diapo2();		
 
	});

Voilà, j'espère que ce post n'est pas trop long.
Merci à tout ceux qui voudront bien y jeter un coup d'oeil.

Bonne soirée à tous !

**danielhagnoul** · 28/01/2015, 00h36

Je n'ai pas vos images , ni vos CSS.

En simplifiant les codes :

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
16
17
18
19
<div>
   <img id="flechegauche" src="../images/arrow-back_16.gif"/>
   <img id="flechedroite" src="../images/arrow-forward_16.gif"/>
   <div id="episode1">
       <img id="planche10" src="../images/imageTest.png" title="10"/>
       <img id="planche11" src="../images/imageTest.png" title="11" style="display: none"/>
       <img id="planche12" src="../images/imageTest.png" title="12" style="display: none"/>
   </div>
   <div id="episode2" style="display: none">
       <img id="planche20" src="../images/imageTest.png" title="20"/>
       <img id="planche21" src="../images/imageTest.png" title="21" style="display: none"/>
       <img id="planche22" src="../images/imageTest.png" title="22" style="display: none"/>
       <img id="planche23" src="../images/imageTest.png" title="23" style="display: none"/>
   </div>
</div>
<ul>
    <li id="menu-episode1">Episode 1</li>				
    <li id="menu-episode2">Episode 2</li>
</ul>

Code JavaScript :

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
$( function(){ // forme abrégée de $(document).ready(function(
 
    var planche = "planche1",
        jObjFlecheGauche = $( "#flechegauche" ),
        jObjFlecheDroite = $( "#flechedroite" ),
        n = 2,
        i = 0,
        gestionFleches = function(){
            jObjFlecheGauche.css( "display", "inline" );
            jObjFlecheDroite.css( "display", "inline" );
 
            if ( i == 0 ) {
                jObjFlecheGauche.css( "display", "none" );
            }
            if ( i == n ) {
                jObjFlecheDroite.css( "display", "none" );
            }
        };
 
    jObjFlecheDroite.on( "click", function(){
        $( "#" + planche + i ).css( "display", "none" );
        $( "#" + planche + ( i + 1 ) ).css( "display", "inline" );
        i++;
        gestionFleches();
    });
 
    jObjFlecheGauche.on( "click", function(){
        $( "#" + planche + i ).css( "display", "none" );
        $( "#" + planche + ( i - 1 ) ).css( "display", "inline" );
        i--;
        gestionFleches();
    });
 
    $( "[id^='menu-episode']" ).on( "click", function(){
 
        // reset ancien episode
 
        $( "[id^='" + planche + "']" ).css( "display", "none" );
 
        $( "#" + planche + "0" )
            .css( "display", "inline" )
            .parent()
            .hide();
 
        // init nouvel episode
 
        var value = this.id.slice( -1 ),
            jObjEpisode = $( "#episode" + value );
 
        planche = "planche" + value;
        n = jObjEpisode.children( "img" ).length - 1;
        i = 0;
 
        jObjEpisode.show();
        $( "#" + planche + i ).css( "display", "inline" );
 
        gestionFleches();
    });
 
    gestionFleches();
});

**Letsrock23** · 28/01/2015, 10h33

Ah oui désolé j'ai complétement oublié de mettre le css et les images mais ça marche super bien quand même et ça allège énormément mon code (surtout que, au final, je devrais avoir une dizaine d'épisodes !).
Merci beaucoup pour ton aide

Bonne journée

Plusieurs diaporamas dans la page

jQuery

Discussions similaires

Partager

Partager