Ajouter un bouton de validation sur un modal image
J'extrais d'une table image (img), le chemin de toutes les images qui viennent d'être partagées par les utilisateurs pour qu'elles soient (ou non) validées et accessibles à tous ensuite.
Je prends l'id, le chemin (path_img1020) et la description saisie par l'utilisateur.
Je fais une boucle pour afficher toutes les images concernées.
Le click sur une photo permet de créer un modal contenant l'image à valider.
Le souci : je ne parviens pas à ajouter un bouton sur l'image du modal qui déclencherait le script de validation.
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
| <?php
$servername = 'localhost';
$username = 'root';
$bidule = '';
$dbname = 'photos';
$conn = new mysqli($servername, $username, $bidule, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$result = $conn->query('SELECT id, path_img, path_img400, path_img1020, description FROM img WHERE reachable = 0;') ;
if (!$result) {
die('<p>error invalid : '.$conn->error.'</p>');
}
?>
<!DOCTYPE html>
<html>
<title>To validate</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
</head>
<body>
<div class="w3-container w3-teal">
<h1>List of photos to validate</h1>
</div>
<div class="row w3-center">
<div class="w3-row-padding w3-margin-top">
<!-- Itération sur chacune des images concernées -->
<?php
for ($i=0 ; $i < $result->num_rows ; $i++) {
$row = $result->fetch_assoc() ;
$id = $row['id'];
$path_img = $row['path_img'];
$path_img400 = $row['path_img400'];
$path_img1020 = $row['path_img1020'];
$description = $row['description'];
// Visualisation des images à l'écran
echo '<img src="' . $path_img1020 . '" style="width:100%;max-width:400px;cursor:pointer" onclick="onClick(this)" class="w3-margin w3-hover-sepia">';
}
$result->free();
?>
</div>
</div>
<!-- Création du modal -->
<div id="modal01" class="w3-modal w3-dark-grey" onclick='this.style.display="none"'>
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-opacity">
<img id="img01" style="width:100%">
</div>
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
</body>
</html> |
