Display PHP images from directory with modal popup viewer

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

Thanks for the help guys, here's the final build that worked!

Javascript /

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

function showImage(imgElement) { 
   var src = imgElement.getAttribute("src");
   modal.style.display = "block";
   modalImg.src = 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";
}

PHP /

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

Answer 2

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