Modal display of only the first image (how can I change codes from id to class?)

Question

I have a magazine in which each article shows several images. They are immortalized and made. I am not sure what their identifiers are. I recently added a code showing modal images, however the code has only one identifier, and therefore only the first image is displayed as a modal image. The rest are not displayed.

Please see the JavaScript and html code. Let me know how to change it. Thanks

JS code

// 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("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

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

HTML code

<div class="imagewrap">

{** check if link is from galley attachments*}
                {if strpos($secCont->getLink(), "/") == false}
                    {foreach from=$imageUrlArray key=fileName item=urlLink}
                        {if $fileName == $secCont->getLink()}

                            <img src="{$urlLink}" id="myImg" alt="{$secCont->getLabel()}" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>



 <a style="font:4;"><a class="imagewrap" href="{$urlLink}"><strong>[Download figure]</strong></a>
 {/if}
                    {/foreach}
                {else}
                    <img src="{$secCont->getLink()}">

 <a style="font:4;"><a class="imagewrap" href="{$secCont->getLink()}"><strong>[Download figure]</strong></a>


                {/if}

   </div>

Answer 1

Well, we do not need identifiers. We can use document.querySelectorAllto get different images. Take a look at the code below.

// Get the modal
// and all the variable we need.
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

showImageInModal = function(e) {
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// get all the images using querySelector: we want all the direct descendants of div with class imagewrap.
//Loop them using Array forEach. Since querySelector returns a nodelist which is array like, we can loop it with forEach. Use call to pass the nodelist as a reference.
var images = document.querySelectorAll("div.imagewrap > img");
Array.prototype.forEach.call(images, function(element){
  element.addEventListener("click", showImageInModal, true); //attach the onclick handler to the image using the correct approach with addEventListener.
});

// 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.addEventListener("click", function(e) {
  modal.style.display = "none";
}, true);

.modal{
position: absolute;
left: 10px;
top: 10px;
border: 1px solid black;
width: 300px;
display: none;
background-color: white;
}

<div class="imagewrap">
  <!-- added # to the getLabel so you can see the difference, please remove when copied -->
  <img src="{$urlLink}" alt="{$secCont->getLabel(1)}" width="300" height="200">
  <img src="{$urlLink}" alt="{$secCont->getLabel(2)}" width="300" height="200">
  <img src="{$urlLink}" alt="{$secCont->getLabel(3)}" width="300" height="200">
  <img src="{$urlLink}" alt="{$secCont->getLabel(4)}" width="300" height="200">
  <img src="{$urlLink}" alt="{$secCont->getLabel(5)}" width="300" height="200">
  <img src="{$urlLink}" alt="{$secCont->getLabel(6)}" width="300" height="200">

  <!-- The Modal -->
  <div id="myModal" class="modal">

    <!-- The Close Button -->
    <span class="close" >&times;</span>

    <!-- Modal Content (The Image) -->
    <img class="modal-content" id="img01">

    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
  </div>

</div>

Run codeHide result