Fonction dans un modal pour des images.

**Underlike** · 08/11/2018, 17h09

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 HTML :

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
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.

**NoSmoking** · 11/11/2018, 08h27

Bonjour,
dans ta boucle PHP while ($donnees = $reponse->fetch()) tu génères des ID identiques ce qui est le mal une ID doit être UNIQUE, mais d'ailleurs en as tu besoin ?

Sur toutes tes images ciblées il te faudra affecter la même fonction.

Fonction dans un modal pour des images.

JavaScript

Discussions similaires

Partager

Partager