Navigation galerie d'images

**Ysae68** · 23/08/2013, 10h32

Bonjour à tous,

Je cherche à réaliser une galerie d'image toute simple. Des vignettes sont affichées en une ligne horizontale, avec des boutons "gauche" et "droite" qui permettent de naviguer parmi ces vignettes. La vignette sélectionnée est affichée en grand en dessous. La première image affichée lorsque l'on arrive sur la page est la vignette au milieu de la ligne de vignettes.

Tout cela fonctionne plutôt bien, si ce n'est un dernier problème pour lequel je ne trouve pas ce qui ne va pas dans mon code :
- quand la page vient d'être chargée, si je clique sur le bouton "droite", au lieu de sélectionner la première vignette à droite, c'est la 6ème à droite qui est sélectionnée.
- quand la page vient d'être chargée, si je clique sur le bouton "gauche", au lieu de se décaler d'une vignette vers la gauche, la sélection se décale de 3 vignettes vers la gauche.

Les boutons fonctionnent très bien par la suite, ces problèmes n'apparaissent que dès la première utilisation de l'un ou l'autre bouton.

Voila le code que j'ai réalisé :

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
<head>
 
<script type="text/javascript">
 
var n_photo = 0;
 
var photos = new Array (
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg",
"image6.jpg",
"image7.jpg",
"image8.jpg"
);
 
var commentaires = new Array (
"commentaire1",
"commentaire2",
"commentaire3");
 
document.getElementById('navbar').style.display='none';
document.getElementById('menu').style.display='none';
 
 
function affiche (decal)
{
  var p;
  n_photo=n_photo+decal;
  if (n_photo >= photos.length)
    n_photo=0;
 
  if (n_photo < 0)
    n_photo=photos.length-1;
 
  p=n_photo;
  for (i=1; i<=9; i++)
  {
    document.getElementById("vignette"+i).src="images/"+photos[p];
//	alert (photos[p]+" "+p);
	if(i==5)
	{
		var objet_photo = document.getElementById('photo');
		var objet_com = document.getElementById('commentaire');
		var objet_num = document.getElementById('numerotation');
 
		objet_photo.src="images/"+photos[p];
		objet_com.innerHTML = commentaires[p]; 
		objet_num.innerHTML = "Photo "+(p+1)+" sur "+photos.length; 
	}
	p++;
    if (p >= photos.length)
      p=0;
  }
}
 
function AdapterDivAResolution() {
var x_res = screen.width;
var y_res = screen.height;
if(x_res > 1024)
{
document.getElementById('fond_texte').style.height = 1024 + 'px';
}
}
 
</script>
 
</head>
 
<body onload="AdapterDivAResolution(); affiche(0)">
 
<h1><p align="center">Galerie</p></h1>
 
<div id="vignettes" align="center">
 
<img id="vignette1" class="vignette" src="" onclick="affiche(-4)"/>
<img id="vignette2" class="vignette" src="" onclick="affiche(-3)"/>
<img id="vignette3" class="vignette" src="" onclick="affiche(-2)"/>
<img id="vignette4" class="vignette" src="" onclick="affiche(-1)"/>
<img id="vignette5" class="vignette_principale" src="" onclick="affiche(0)"/>
<img id="vignette6" class="vignette" src="" onclick="affiche(1)"/>
<img id="vignette7" class="vignette" src="" onclick="affiche(2)"/>
<img id="vignette8" class="vignette" src="" onclick="affiche(3)"/>
<img id="vignette9" class="vignette" src="" onclick="affiche(4)"/>
</div>
 
<div id="boutons">
<img id="bouton_g" name="bouton_g" class="bouton" src="left_ghosted.gif" onmouseover="bouton_g.src='left_normal.gif'" onmouseout="bouton_g.src='left_ghosted.gif'" onclick="affiche(-1)"/>
<img id="bouton_d" name="bouton_d" class="bouton" src="right_ghosted.gif" onmouseover="bouton_d.src='right_normal.gif'" onmouseout="bouton_d.src='right_ghosted.gif'" onclick="affiche(1)"/>
</div>
 
<br /><br />
<p align="center" id="numerotation"></p>
<p align="center" id="commentaire"></p>
 
<div align="center">
<img id="photo" class="photo" src=""/>
</div>
</body>

J'ai déjà lu, relu, et rerelu, je ne vois vraiment pas ce qui cloche. Une piste serait donc grandement bienvenue.

Merci d'avance à ceux qui se pencheront sur mon problème.

(J'espère également avoir bien expliqué ce qui ne va pas

)

**undead001** · 28/08/2013, 11h14

Tu as deux façons de programmer...
la premiere tu fais un affiche qui prend des valeur negative ou positives (pour aller a gauche ou à droite)
dans affiche, ligne 31 ce n'est pas cohérant. tes valeurs varient de -photos.length/2 à photos.length
Pas de 0 à photos.length

ensuite pourquoi de 1 à 9 ligne 38? c'est plutot de 1 à photos.length?

déjà ça ne va pas

à toi de jouer maintenant
ps: je regarde la suite

Navigation galerie d'images

JavaScript

Discussions similaires

Partager

Partager