Css image modal with MySQLデータベース

Question

私は自分のデータベースから画像を読み込み、それをクリックして "ポップアップウィンドウ"に表示させる方法を理解しようとしていました。今のところ私はすべての画像をロードして、すべての画像の詳細を表示するためにそれらをクリックすることができますが、私は画像がより大きく表示されるようにしたいと思います。私はw3schoolsに関するチュートリアルを見つけましたが、それは最初の写真にしか表示されません。

データベースから読み込まれたすべての画像に対して、これをどのように行うことができますか？

はここCODE OFデータベース

<?php 

$sql = "select id, image from items order by id desc"; 
$result = mysqli_query($con, $sql); 

while($row = mysqli_fetch_array($result)){ 
$image = $row['image']; 
$id = $row['id']; 
?> 
<div class="img"> 
    <a href="view_product.php?id=<?php echo $id; ?>"> 
     <img src="items/<?php echo $image; ?>"> 
    </a> 
</div> 

<?php 
} 

?> 

UPDATEからすべての画像を読み取るために私のコードです：

<?php 

$sql = "select id, image from items order by id desc"; 
$result = mysqli_query($con, $sql); 

while($row = mysqli_fetch_array($result)){ 
$image = $row['image']; 
$id = $row['id']; 
?> 
<img id="myImg" src="items/<?php echo $image; ?>" alt="<a href='view_product.php?id=<?php echo $id; ?>"> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 
<span class="close">&times;</span> 
<img class="modal-content" id="img01"> 
<div id="caption"></div> 
</div> 

<?php 
} 

?> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a  caption 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
modal.style.display = "block"; 
modalImg.src = this.src; 
captionText.innerHTML = this.alt; 
} 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
modal.style.display = "none"; 
} 
</script> 

Answer 1

私はいくつかの異なる方法を試した後、それを自分で解決しました。ソリューションは以下のとおりです。

<?php 

$sql = "select id, image from items order by id desc"; 
$result = mysqli_query($con, $sql); 

while($row = mysqli_fetch_array($result)){ 
$image = $row['image']; 
$id = $row['id']; 
?> 

    <div id="modal01" class="w3-modal" onclick="this.style.display='none'"> 
<span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">&times;</span> 
<div class="w3-modal-content w3-animate-zoom"> 
<img id="img01" style="width:100%"> 
</div> 
</div> 

<div class="img"> 
<img src="items/<?php echo $image; ?>" style="width:179px; height: 135px;cursor:pointer" 
onclick="onClick(this)"> 
<a href="view_product.php?id=<?php echo $id; ?>">Visa information</a> 
</div> 

<?php 
} 

?> 

<script> 
function onClick(element) { 
document.getElementById("img01").src = element.src; 
document.getElementById("modal01").style.display = "block"; 
} 
</script>