Navigation galerie d'images
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:
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 :oops: )
