Как сделать модальную всплывающую кнопку для всех изображений, которые я загрузил?

Question

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

<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
</div>

<div class="gallery">
    <div class="containerPhotos">
        <?php
            require_once 'classes/dbh.php';
            if (isset($_GET['entry_id'])) {
                $entry_id = $_GET['entry_id'];
                $query = mysqli_query($conn, "SELECT * FROM images WHERE entry_id='$entry_id'");

                if ($query->num_rows > 0) {
                    while ($row = $query->fetch_assoc()) {
                        $dirname = 'uploads/' . $row["file_name"];

                        echo '<img class="photo" onclick="showImage(this)" id="myImg" src="' . $dirname . '" />';
                    }
                }
            }
        ?>
    </div>
</div>
    <script>
        var modal = document.getElementById('myModal');

        var img = document.getElementById('myImg');
        var modalImg = document.getElementById("img01");
        img.onclick = function () {
            modal.style.display = "block";
            modalImg.src = this.src;
        }

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

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }
    </script>

Я рассчитываю работать для всех с кодом foreach, но я не знаю, как.

Answer 1

Вам необходимо реализовать функцию showImage

  function showImage(el){
    var modal = document.getElementById('myModal');
    var modalImg = document.getElementById("img01");
    modalImg.src = el.src;
    modal.style.display = "block";
  }

Использовать загрузочную платформу.Это поможет вам начать