带有 SQL 的灯箱 [重复]答案

【问题标题】：Lightbox with SQL [duplicate]带有 SQL 的灯箱 [重复]
【发布时间】：2022-01-24 17:40:43
【问题描述】：

我正在尝试使用 SQL 数据库创建灯箱图片库。

我将图像作为 Image Hoster 链接存储在我的数据库中。

使用我的代码只显示一张图片。可以全部显示吗？

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

【问题讨论】：

我不熟悉 PHP，但我不知道这会在哪里循环查询。
你只获取一行$Foto = $myRow["Foto"];
我明白了，如何获取所有行？

标签： javascript sql database gallery lightbox

【解决方案1】：

我设法加载所有图像，我可以打开第一个图像 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>

【讨论】：