Bonjour,

J'ai un script qui charge des images dans un ARRAY, ensuite en dessous de mes images, j'ai 2 boutons, avec chacun une fléche pointant à gauche, et l'autre pointant à droite, permettant de naviguer à travers les photos, quand la dernière est atteinte, la première affiche, et vice-versa si l'on va dans l'autre sens.

J'aimerais que chaque image soit cliquable afin qu'elle s'agrandisse dans une nouvelle selon un format établi.

Voici le script qui gère mes images

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
 
<script type="text/javascript">
arrPhoto1 = new Array();
picNum1 = 0;
 
<?php for ($i = 0; $i < count($arrPhoto1); $i++) echo("arrPhoto1[" . $i . "] = '" . $arrPhoto1[$i] . "';\n");?>
 
function gotoPhoto1(num) {
 
   var img = document.getElementById('myPhoto1');
   picNum1 = picNum1 + num;
   if (picNum1 < 0) picNum1 = arrPhoto1.length - 1;
   if (picNum1 >= arrPhoto1.length) picNum1 = 0;
   img.src = 'images/' + arrPhoto1[picNum1];
}
</script>

Et la partie de mon code qui appele le script :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php if (count($arrPhoto1) > 0) { ?>
<img border="0" id="myPhoto1" width="200" height="250">
<script type="text/javascript">
	gotoPhoto1(0);
</script>
<?php if (count($arrPhoto1) > 1) { ?>
   <div align="center" style="font-size: 14px; font-weight: bold;">
   <input type="button" value="&lt;--" onClick="gotoPhoto1(-1);">
   <input type="button" value="--&gt;" onClick="gotoPhoto1(1);">
    </div>
<? } ?>
<?php } ?>
D'après moi le travail doit se faire au niveau de la balise img, j'ai essayé plusieurs choses, mais sans résultat.

Merci de votre aide.