Une galerie image

**mariaorea** · 27/07/2014, 12h32

Bonjour,

Je souhaite réaliser une galerie photo très simple.
Ce petit script fonctionne parfaitement sauf quand je clique sur le dernier onglet du menu, tout se déglingue !
Quelqu'un peut-il me dire ce qui ne va pas dans mon script ?
Merci infiniment par avance, je suis webdesigner et nulle en javascript malheureusement !

Voici le HTML et le CSS.

Code :

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

1
2
3
4
5
6
7
8
function showC(value){
	for(var x = 0;x<4;x++){
		var idc = document.getElementById("slide" + x);
		idc.style.display = 'none';
	}
	var idl = document.getElementById("slide" + value);
	idl.style.display = 'block';
}

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
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
<body>
	<section class="section">
		<div class="section_contenu">
			<div id="galerie">
 
				<figure id="slide0">
					<figcaption>
						<h4>couleur bleu</h4>
						<p>Duis aute irure dolor eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt 
						ut enim ad minim veniam, excepteur sint occaecat.</p>
					</figcaption>
					<img src="images/bleu.jpg" alt="">
				</figure>
 
				<figure id="slide1">
					<figcaption>
						<h4>couleur jaune</h4>
						<p>Cumque nihil impedit quo minus vel illum qui dolorem eum fugiat quo voluptas 
						nulla pariatur? Praesentium voluptatum deleniti magnam aliquam quaerat voluptatem.</p>
					</figcaption>
					<img src="images/jaune.jpg" alt="">
				</figure>
 
				<figure id="slide2">
					<figcaption>
						<h4>couleur vert</h4>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, 
						consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. </p>
					</figcaption>
					<img src="images/vert.jpg" alt="">
				</figure>
 
				<figure id="slide3">
					<figcaption>
						<h4>couleur rouge</h4>
						<p>Or bends with the remover to remove. Admit impediments; love is not love oh, no, 
						it is an ever fixed mark whose worth's unknown, although his height be taken.</p>
					</figcaption>
					<img src="images/rouge.jpg" alt="">
				</figure>
 
				<figure id="slide4">
					<figcaption>
						<h4>couleur violet</h4>
						<p>Vivamus ut sem. Fusce aliquam nunc vitae purus. Duis aute irure dolor eu fugiat nulla pariatur. 
						Sed do eiusmod tempor incididunt ut enim ad minim veniam.</p>
					</figcaption>
					<img src="images/violet.jpg" alt="">
				</figure>
			</div><!--FIN de #galerie-->
			<div class="cb"></div>
 
			<nav id="galerie_nav">
				<ul>
					<li><a value="0" onclick="showC(this.getAttribute('value'));">couleur<br>bleu</a></li>
					<li><a value="1" onclick="showC(this.getAttribute('value'));">couleur<br>jaune</a></li>
					<li><a value="2" onclick="showC(this.getAttribute('value'));">couleur<br>vert</a></li>
					<li><a value="3" onclick="showC(this.getAttribute('value'));">couleur<br>rouge</a></li>
					<li><a value="4" onclick="showC(this.getAttribute('value'));">couleur<br>violet</a></li>
				</ul>
			</nav>
		</div><!--FIN de .section_contenu-->
	</section>
</body>

Code css :

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
@charset "UTF-8";
 
html, body, h4, ul, li,
figure, figcaption, nav, section {
	margin: 0; padding: 0;}
 
a { text-decoration: none; }
ul { list-style: none; }
img { border: 0; }
.cb{ clear:both; }
 
.section_contenu {
	width: 968px;
	margin: 50px auto 0;
}
 
#galerie figure img {
	display: block;
	float: right;
}
#galerie figure figcaption {
	width:300px;
	height: 100px;
	float: left;
}
 
#galerie figure figcaption h4 { font-size: 2.5em; }
 
#slide0 { display:block; }
 
#slide1, #slide2, #slide3, #slide4 { display:none; }
 
/*navigation*/
#galerie_nav {
	width: 700px;
	margin: 30px auto;
}
#galerie_nav ul li {
	width: 136px;
	display: inline-block;
	text-align: center;
	font-size: 1.4em;
}
#galerie_nav ul li a { cursor: pointer; }
#galerie_nav ul li a:hover { color: red; }

**sekaijin** · 27/07/2014, 12h47

tout se déglingue !

Et....

ça signifie quoi ?

A+JYT

**mariaorea** · 27/07/2014, 14h26

Merci d'avoir répondu aussi vite à mon message,
c'est une expression pour dire que ça ne fonctionne plus. C'est sans doute une expression de ma région...
En fait qu'en je clique sur le dernier onglet de la liste, deux images apparaissent l'une au-dessus de l'autre.
C'est pas simple à expliquer. Vous est-il possible de tester avec les fichiers HTML et CSS joint à mon message ?

**sekaijin** · 27/07/2014, 16h00

les éléments HTML figure et figcaption sont du HTML5 sont-il supporté par votre navigateur ?
A+JYT

**mariaorea** · 27/07/2014, 20h44

oui, oui sans problème, ce qui pose problème c'est le bout de code javascript,
pouvez-vous le regarder et me dire si le script est correct ?

**sekaijin** · 28/07/2014, 07h02

Oui ça veut dire quoi précisément tout ce déglingue ???
car a priori je ne vois pas de pb de JS
A+JYT

**mariaorea** · 28/07/2014, 08h17

bonjour,
Vous l'avez testé ?

Invité · 28/07/2014, 11h32

Vous avez crée 5 éléments numérotés de 0 à 4. Hors la boucle qui masque les div va de 0 à 3. Le dernier n'est pas masqué.
Changez la limite supérieure de la boucle :

Code :

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