Discussion :

[ConceptInterWEB]

Bonjour à tous,

Je suis à modifier une page WEB en PHP. Dans cette page, il y a un script qui affiche des images dans un endroit précis de la page WEB. Il est possible de naviguer avec les photos, en cliquant soit sur précédent ou suivant.

Je veux avoir la possibilité d'afficher la source de la photo en dessous de celle-ci. Tout d'abord on vérifie si les photos sont présentes, jusqu'a un maximum de 10 photos pour une fiche. Si les photos existent, elles sonts placés dans un tableau avec la commande array_push, j'effectue egalement une requete SQL pour voir si il ya une source pour cette photo, ensuite le resultat est mis aussi dans un tableau a l'aide de array_push.

Ce qui est dans le tableau des photos en position 0, et le tableau de la source de la photo en position 0, correspondent ensemble.

Donc, voici le code JAVA pour faire afficher la photo, et ainsi que le petit bout de code dans le fichier .PHP qui permet de naviguer sur les photos.

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">
  arrPhoto = new Array();
  picNum = 0;
  <?php 
    for ($i = 0; $i < count($arrPhoto); $i++) echo("arrPhoto[" . $i . "] = '" . $arrPhoto[$i] . "';\n");
  ?>
 
  function gotoPhoto(num) {
    var img = document.getElementById('myPhoto');
    picNum = picNum + num;
    if (picNum < 0) picNum = arrPhoto.length - 1;
    if (picNum >= arrPhoto.length) picNum = 0;
    img.src = '../images/plantes/' + arrPhoto[picNum];
}
</script>

Ce code permet de naviguer dans le tableau (Array) et d'avoir la bonne image a afficher selon l'action prise.

Voici dans le fichier .PHP

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php if (count($arrPhoto) > 0) { ?>
  <img border="0" id="myPhoto" height="260">
  <script type="text/javascript">
    gotoPhoto(0);
  </script>
 
  <?php if (count($arrPhoto) > 1) { ?>
  <div align="center" style="font-size: 14px; font-weight: bold;">
    <a href="javascript:gotoPhoto(-1);">Précédent</a>&nbsp;
    <a href="javascript:gotoPhoto(1);">Suivant</a>
  </div>
  <? } ?>
<?php } ?>

JE désire afficher la source de l'image qui sera affiché. J'ai placé la requete SQL dans un tableau qui se nomme arrSource

Merci de votre aide, car JAVAScript c'est du chinois pour moi.

Sylvain

[ConceptInterWEB]

Bonjour,

Ne recevant aucune réponse à ma requête, peut-être que je suis impatient aussi, j'ai continué a fouiller sur le NET, et j'ai trouvé une solution qui fonctionne pour mon problème. Je vous fais part de ce que j'ai réalisé, et je vous demande votre avis à savoir si c'était la solution, ou si j,aurais pu m'y prendre autrement.

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
 
<script type="text/javascript">
   arrPhoto = new Array();
   arrSource = new Array();
   picNum = 0;
   txtNum = 0;
   <?php 
      for ($i = 0; $i < count($arrPhoto); $i++) echo("arrPhoto[" . $i . "] = '" . $arrPhoto[$i] . "';\n");
      for ($i = 0; $i < count($arrSource); $i++) echo("arrSource[" . $i . "] = '" . $arrSource[$i] . "';\n");
   ?>
 
   function gotoPhoto(num) {
      var img = document.getElementById('myPhoto');
      picNum = picNum + num;
      if (picNum < 0) picNum = arrPhoto.length - 1;
      if (picNum >= arrPhoto.length) picNum = 0;
      img.src = 'images/plantes/' + arrPhoto[picNum];
   }
 
   function gotoText(num) {
      txtNum = txtNum + num;
      if (txtNum < 0) txtNum = arrSource.length - 1;
      if (txtNum >= arrSource.length) txtNum = 0;
      document.getElementById('myText').innerHTML = 'Source : ' + arrSource[txtNum];
   }
</script>

Ceci est le code JAVAScript. J'ai aujouté la fonction gotoText. La boucle en PHP permet d'ajouter au tableau crée dans le script JAVA l'information trouver dans la requête SQL pour la source des images.

Voici le CODE PHP que j'ai modifié :

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
 
<?php if (count($arrPhoto) > 0) { ?>
   <img border="0" id="myPhoto" height="260">
   <script type="text/javascript">
      gotoPhoto(0);
   </script>
   <div id="myText">
      <script type="text/javascript">
         gotoText(0);
      </script>
   </div>
   <?php if (count($arrPhoto) > 1) { ?>
      <div align="center" style="font-size: 14px; font-weight: bold;">
      <a href="javascript:gotoPhoto(-1);javascript:gotoText(-1);">Précédent</a>&nbsp;
      <a href="javascript:gotoPhoto(1);javascript:gotoText(1);">Suivant</a>
      </div>
   <? } ?>
<?php } ?>

Merci d'avance pour vos commentaires.
Sylvain