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