Lightbox with SQL [duplicate]

Question

i'm trying to create a Lightbox Image Gallery using a SQL Database.

I'm storing the images as Image Hoster links in my database.

It is only showing one image using my code. Is it possible to show all?

  $res = "SELECT * FROM user";
$result = $conn->query($res);
    while($myRow = $result->fetch_array())
    { 
        $Foto = $myRow["Foto"];
    }

 
?>

<img id="myImg" src="<?php echo $Foto; ?>">

<div id="myModal" class="modal">

<span class="close">&times;</span>

  
<img class="modal-content" id="img01">

<div id="caption"></div>
</div>


<script>

var modal = document.getElementById("myModal");


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;
}


var span = document.getElementsByClassName("close")[0];


span.onclick = function() {
  modal.style.display = "none";
}
</script>

Answer 1

I managend to load all Images and i can open the first image onclick. How can i open all images onclick?

<?php
$res = "SELECT * FROM user";
$result = $conn->query($res);
   while($myRow = $result->fetch_array())
   { 
       echo "<tr>";
       echo "<span class='Gallerie'>" . $myRow['Foto'] . "</span>";
       echo "</tr>";
       
   }
   


?>

<div id="myModal" class="modal">

 
 <span class="close">&times;</span>

 
 <img class="modal-content" id="img01">
 
 <div id="caption"></div>
</div>
<script>

var modal = document.getElementById("myModal");


var img = document.getElementById("image");
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;
}


var span = document.getElementsByClassName("close")[0];


span.onclick = function() {
 modal.style.display = "none";
}
  </script>