Discussion :

[ConceptInterWEB]

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.

[SpaceFrog]

J'ai un script qui charge des images dans un ARRAY,

?

Code :

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

1
2
3
<?php for ($i = 0; $i < count($arrPhoto1); $i++){
   echo('arrPhoto1[" . $i . '] = new Image()'.
           'arrPhoto1[" . $i . '].src='".$arrPhoto1[$i] . "'."\r\n");?>

puis:

Code :

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

img.src = 'images/' + arrPhoto1[picNum1].src;

[ConceptInterWEB]

Merci pour ta réponse.

Ce que je désire en fait, c'est que chaque image soit cliquable afin qu'elle s'ouvre dans une nouvelle fênetre dans un format établi.

Je ne vois pas en quoi les modifications au script que tu as fais, m'apporte ce dont j'ai de besoin.

J'ai vraiment de la difficulté à assimiler le JavaScript.

Merci
Sylvain

[SpaceFrog]

je ne vois pas ou tu attribues un onclick à l'image ...

[ConceptInterWEB]

Hello,

Je n'ai pas inclus ce que j'ai essayé car ca ne fonctionne pas.

J'ai essayé effectivement avec un a href et un onclick, mais sans succès.

J'ai placé le script tel quel présentement dans son bon fonctionnement. Je veux ajouter un lien sur l'image pour qu'elle soit cliquable, c'est à ce niveau que je demande de l'aide.

Merci d'avance

[SpaceFrog]

ton resultat final devra ressembler à :

Code :

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

<img onclikc="mafonction()" ...

en js tu attibues un onclick dynamiquement au moyen de:

Code :

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

monobjmage.onclick=fucntion(){mafonction()}

[ConceptInterWEB]

Merci pour ton tuyau.

Finalement la seule chose que j'ai changé est ma balise image, et elle ressemble à ceci :

Code :

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

1
2
 
<img border="0" id="myPhoto1" width="200" height="250" onclick="popup(this.src)">

La seule chose qui me dérange, c'est que on ne sait pas que l'image est cliquable car la petite main n'apparaît pas quand on place la souris sur celle-ci.

J'aurais aimé quelque chose avec un a href à la place.

[SpaceFrog]

rajoute

Code :

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

style="cursor:pointer"

et hop magique tu as la main