Блог

Я использую Modal для отображения нескольких изображений во всплывающем окне, оно отлично работает для первого изображения, но не для всех изображений, которые извлекаются PHP во время цикла.

Кто-нибудь может помочь отобразить все выбранные изображения с помощью Modal?

Код:

     <?php
    $id = $_GET['id'];
    $result = mysqli_query($connection, "SELECT * FROM test WHERE id = $id");
    $rows = mysqli_num_rows($result);
    
    if($id){
    while($img = mysqli_fetch_assoc($result)) {
    ?>                
        
    
    <tr>
        <td><img style="height:100px;" id="myImg" src='<?php echo "uploads/" . $img['img_url']; ?>'>
                    
    <div id="myModal" class="modal">
      <span class="close">amp;times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
                    </td>
                    
                </tr>
                
                <?php
        }
    }
    ?>
            </tbody>
            <tfoot>
                <tr>
                    <th>Images</th>
                    <
                </tr>
            </tfoot>
            </tbody>
          </table>

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

Заранее спасибо.