使用模态弹出查看器显示目录中的PHP图像

Question

How id's being rendered to page:

The code below will display all the photos for me in order from the 'resources/php/disImg' directory.

My goal is to click on the image and display the 'onclick' image in an image modal from the directory.

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

<!-- Displays all photos from folder -->
<div class="containerPhotos">
        <?php 
            $dirname = "resources/php/disImg/";
            $images = glob($dirname."*.{jpg,jpeg,png}",GLOB_BRACE);
            natcasesort($images);

            foreach($images as $randomImage) {
                echo '<img id="myImg" src="'.$randomImage.'" class="photo" />';
            }
        ?>
</div>

Currently I am able to target the first image with (id="myImg") from the PHP/ image directory and have it display in the modal.

Modal popup after clicking first photo:

<script>
// Get the modal
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;
}

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

Anyone know how to make it so whatever image I click with id="myImg" it would popup and display inside the modal?

I can't get a solution to work yet with the :nth select but I think that would work.

Below is the .css for the modal popup

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 1000px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

Answer 1

There's a few different ways to accomplish this, but the first one off the top of my head is to add an onclick event to each of your img HTML elements in your PHP foreach loop.

        foreach($images as $randomImage) {
            echo '<img id="myImg" onclick="showImage(this)" src="'.$randomImage.'" class="photo" />';
        }

Then you'll need a javascript function of the same name and you can get the source string like this.

function showImage(imgElement) { 
   var src = imgElement.getAttribute("src");
   /* Do the stuff with your modal */}