Fonction dans un modal pour des images.

Bonjour,

Je vous explique mon problèmes, dans le cadre de mon projet scolaire de BTS SIO je dois faire un site marchand.

Dans ce site marchand je voudrais utiliser un modal pour afficher les articles un par un avec leurs prix.
J'ai donc pris un code sur internet pour faire le modal mais il ne me permet d'afficher qu'un seul de mes produits.

Mon professeur ma dit que je devais faire une fonction dans mon script pour faire fonctionner toutes les images mais je suis perdu.

Pouvez-vous m'aider ?

Je vous laisse donc mon code.

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
<!DOCTYPE html>
<html>
<head>
	<title>Site Marchand</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body style="background-color:#D8D8D8">
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Site Marchand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>
<?php include "modal.php" ?> //CSS du modal.
<br>
<div class="container">
	<div class="text-center">
		<div class="row">
		<?php
                        try
                        {
                                $bdd = new PDO('mysql:host=localhost:3306;dbname=site_marchand;charset=utf8', 'root', '');
                        }
                        catch(Exception $e)
                        {
                                die('Erreur : '.$e->getMessage());
                        }
 
                        $reponse = $bdd->query('SELECT id,Nom_Produit,Prix_Produit,Desc_Produit FROM produits');
 
                        while ($donnees = $reponse->fetch())
                        {
                        ?>
 
 
			<div class="card" style="width: 15rem;">
			  <?php echo '<img class="card-img-top" id="myImg" src="imgs/'.$donnees['id'].'.jpg" alt="'.$donnees['Desc_Produit'].'<br>Prix: '.$donnees['Prix_Produit'].'">' ?>
			  <center><?php echo $donnees['Nom_Produit']; ?></center>
			  <center><?php echo $donnees['Prix_Produit']; ?></center>
			</div>
 
			<div id="myModal" class="modal">
			  <span class="close">&times;</span>
			  <?php echo '<img class="modal-content" id="'.$donnees['id'].'">' ?>
			  <div id="caption"></div>
			</div>
 
<script>
    var modal = document.getElementById('myModal');
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("1"); // Fonction pour faire marcher le code avec plusieurs images.
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        modalImg.alt = this.alt;
        captionText.innerHTML = this.alt;
    }
    var span = document.getElementsByClassName("close")[0];
 
    span.onclick = function() {
        modal.style.display = "none";
    }
</script>
 
			<?php
                        }
 
                        $reponse->closeCursor();
 
                ?>
		</div>
	</div>
</div>
<?php include "java.php" ?>
</body>
</html>

Je vous remercie d'avance.