javascript - PHP:如何为每个图像创建模态

Question

我有一个表单，用户可以将事件图像上传到特定患者，并且图像的路径将存储到数据库中。

现在我的问题是，当我以显示患者图像的患者形式时，我想为患者拥有的每张图像显示一个模式。

这是我的表格:

这是我的代码:

<?php 

$con_mysql = mysql_connect('localhost','root','admin');
mysql_selectdb('dbphotos'); 

$sql = "SELECT * FROM  `tblphotos` WHERE `pnt` LIKE '1' ";
$result= mysql_query($sql);
while($data = mysql_fetch_assoc($result))
  {
      $id = $data['id'];
      $pnt = $data['pnt'];
      $path = $data['path'];

      ?>
      <div >
      <img id="myImg" src="uploads/<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
      </div>

      <div id="myModal" class="modal">
        <span class="close">X</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
      </div>

        <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;
          modalImg.alt = this.alt;
          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>

      <?php
  }
 ?>

只有第一张图像有模态，其他图像没有打开模态

现在我知道问题出在 div 的 ID 和 script 上，因为它只会循环相同的 ID。

所以我认为解决方案是使用 echo $id 来获取 ID 和类:

      <div>
      <img id="<?php echo $id; ?>" src="<?php echo $path; ?>" title="<?php echo $path; ?>" alt="<?php echo $path; ?>" width="300" height="200">  
      </div>

      <div id="<?php echo $id; ?>" class="modal">
        <span class="<?php echo $id; ?>-close">X</span>
        <img class="<?php echo $id; ?>-content" id="<?php echo $id; ?>-img01">
        <div id="caption"></div>
      </div>

但我不知道如何将 PHP 的循环 ID 显示到 javascript。

提前谢谢您......

Answer 1

最简单的方法是使用一些灯箱插件，如 this one

下载文件并在 html 页面上调用脚本，然后使用它，如下所示:

<a href="<?php echo $path ?>"><img src="<?php echo $path ?>"></a>