Image insert inside the modal popup

Question

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>

I'm assuming all your tags have the id `myImg`, which is a conflict as many different elements are using the same id and `getElementById` is only attached to the first occurence. [Learn More](https://stackoverflow.com/questions/3607291/javascript-and-getelementbyid-for-multiple-elements-with-the-same-id) — Jaswinder, Nov 13 '18 at 11:48

score 2 · Answer 1 · answered Nov 13 '18 at 12:28

2

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">'; ?>

answered Nov 13 '18 at 12:28

Atul

75
10

SRC= Undefined what is the problem. – noufal Nov 14 '18 at 04:51
browser showing src not defined( myimg1) What I do? and How i can impliment close button? – noufal Nov 14 '18 at 05:14

score 1 · Accepted Answer · answered Nov 14 '18 at 06:02

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

n1kkou · Answer 3 · 2018-11-14T07:29:30.890

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>

You can also refactor a lot this piece of code... set an ID to modal, then only hook by tags, set the close event on the container and so on... — n1kkou, Nov 13 '18 at 13:31
Yes, my bad, I updated the answer. I used "p" tag instead of "img" — n1kkou, Nov 14 '18 at 07:29

Image insert inside the modal popup

3 Answers3