Agfdhyk

I'm making a Image Gallery with model popup, The JavaScript code is working, but only with first image of the gallery popup modal box. How can i use every image popup modal ?
Any Help is Greatly Appreciated, thanks.

<!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">&times;</span>

  <img class="modal-content" id="myImg1">

  <div id="caption"></div>

</div>



<?php echo '<img id="myImg" src="'.esc_url( $info['0'] ).'" alt="Snow" style="width:100%;max-width:300px">'; ?>











<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("myImg1");



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>

Please try this. Add this line for get defined src

var myImg= document.getElementById("myImg");

Replace Your JavaScript.

function imgPopup(){

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

    var modalImg = document.getElementById("myImg1");

    var myImg= document.getElementById("myImg");



    modal.style.display = "block";

    modalImg.src = myImg.src;



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

    span.onclick = function() { 

        modal.style.display = "none";

    } 

}

The problem could be that all your images have same id myImg.
var img = document.getElementById('myImg'); always select the first element with given id. You could try putting the js in a function and calling it onclick.

function imgPopup(){

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

var modalImg = document.getElementById("myImg1");

modal.style.display = "block";

modalImg.src = this.src;

}



<?php echo '<img id="myImg" src="'.esc_url( $info['0'] ).'" onclick="imgPopup();" alt="Snow" style="width:100%;max-width:300px">'; ?>

Do the following updates: wrap you new images in a container. Add the event listener to the container, match the tag you want(img) then update the src element in the modal and show it:

<!-- The Modal -->

<div id="myModal" class="modal">

  <span class="close">&times;</span>

  <img class="modal-content" id="myImg1">

  <div id="caption"></div>

</div>



<div id="gallery">

  <?php echo '<img src="'.esc_url( $info['0'] ).'" alt="Snow" style="width:100%;max-width:300px">'; ?>

</div>









<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 gallery = document.getElementById('gallery'),

    modalImg = document.getElementById("myImg1");



gallery.addEventListener('click', function(e){

    if(e.target.nodeName.toLowerCase() === 'img'){

        modalImg.src = e.target.src;

        modal.style.display = "block";

    }

});



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