Question

我正在创建一个带有图库的摄影作品集，并通过mySQL数据库的上传功能添加了图像。我正在尝试添加一项功能，当您单击照片时，它会在模式弹出窗口中打开，以便您可以查看完整图像。但是，我无法获得模态来打开被单击的特定图像，而是获得了图库中的最新图像。

php / html

$sql = "SELECT * FROM gallery ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
  echo "SQL statement failed";
} else {
  mysqli_stmt_execute($stmt);
  $result = mysqli_stmt_get_result($stmt);

  while ($row = mysqli_fetch_assoc($result)) {
    echo '       
     <a href="#" class="myBtn">
     <div class="myImg" style="background-image: 
       url(img/gallery/'.$row["imgFullNameGallery"].');"></div>

      </a>

    <!-- The Modal -->
    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <img src="img/gallery/'.$row["imgFullNameGallery"].'" >
      </div>

    </div>
   ';

JS：

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

var btn = document.getElementsByClassName("myBtn");

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


btn.onclick = function() {
  modal.style.display = "block";
}



for (var i = 0; i < btn.length; i++) {
  var img = btn[i];

  img.onclick = function(evt) {
    modal.style.display = "block";

  }
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

我认为问题可能出在模态内容中的图像src线

 <img src="img/gallery/'.$row["imgFullNameGallery"].'" >

这只是将第一个图像添加到每个模式上，而不是目标图像上。有什么办法可以更改模式内容，使其链接到被单击的目标图像？

Answer 1

您需要将参数传递给服务器，以告诉服务器所需的图像。您从未做过，只是在select *查询中从数据库中选择了所有图像文件名。结果是许多模态元素都具有相同的id，因此JavaScript可能只是在选择找到的第一个元素。

您需要在sql查询中附加从页面传递的参数。最简单的方法是执行某种形式的表单提交，用户可以选择他们想要的图像。表单提交会重新加载页面，但是现在提供了php / sql需要获取正确数据的参数。

首先创建图像选择表单。目前，它是文本输入，更好的方法可能是填充选择下拉列表。

<form action="relative/path/to/the/php/page">
    Image filename:<br>
    <input type="text" name="imageSelection"><br>

    <input type="submit" value="Submit">
</form>

使用php参数构建查询。参数的名称是您在表单中为html元素指定的名称。为了安全起见，请考虑切换到 prepared statement 。

if ($_GET['imageSelection']) {
$imageSelection = $_GET['imageSelection']
$sql = "SELECT * FROM gallery WHERE imgFullNameGallery = '$imageSelection' ORDER BY idGallery DESC;";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql)) {
  echo "SQL statement failed";
} else {
  mysqli_stmt_execute($stmt);
  $result = mysqli_stmt_get_result($stmt);

  while ($row = mysqli_fetch_assoc($result)) {
    echo '       
     <a href="#" class="myBtn">
     <div class="myImg" style="background-image: 
       url(img/gallery/'.$row["imgFullNameGallery"].');"></div>

      </a>

    <!-- The Modal -->
    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <img src="img/gallery/'.$row["imgFullNameGallery"].'" >
      </div>

    </div>
   ';
}

Answer 2

尝试一下，队友！

http://jsfiddle.net/bn4t81ac/15/

jQuery(document).ready(function(e) {
  $('button').on('click', function(e) {
    $img = $(this).attr("data-src");
    $('#myModal img').attr('src', $img);
  });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-src="http://blog.visual.ly/wp-content/uploads/2014/06/IMG_6424-1300x866.jpg">
  First IMG
</button>

<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-src="https://cdn.pixabay.com/photo/2018/07/16/13/17/kiss-3541905__340.jpg">
  Second IMG
</button>

<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-src="https://cdn.pixabay.com/photo/2018/08/06/16/30/mushroom-3587888__340.jpg">
  Third IMG
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div style="width:100px" class="modal-dialog" role="document">
    <div class="modal-content">
      <img style="width:100%" src="https://cdn.pixabay.com/photo/2018/08/06/16/30/mushroom-3587888__340.jpg">
    </div>
  </div>
</div>

如何获取模式弹出窗口以显示在画廊中单击的图像？

2 个答案: