如何獲取模式彈出窗口以顯示在畫廊中單擊的圖像？

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元素指定的名稱。 考慮轉換為安全性准備好的聲明 。

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>