Layne Mayo Layne Mayo - 2 months ago 7
CSS Question

Trouble adding multiple images to CSS/JS modal

I am trying to make a few images pop up individually in a modal. I can only seem to get the first image to pop up, but not the 2nd. I would prefer to make the images pop up in a modal that will let you switch between them, but I at least need them to pop up individually.

Html:

<div class="container">
<img id="myImg" src="images/300-200.png" alt="Filler Text" width="300" height="200">
<img id="myImg2" src="images/300-200.png" alt="Filler Text" width="300" height="200">
<div id="myModal" class="modal">
<span class="closeimg" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>


Javascript:

var modal = document.getElementById('myModal');
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;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}


I know there is an issue since I can't use
.getElementByID
to pick up more than one ID and I know that two elements can't be labeled the same ID. With that being said, I have tried
.getElementByClassName
which didn't work either.

Answer

When trying to select multiple elements of the same kind you should use a class selector since it has the ability to appear multiple times on a page, where an id is unique to one element.

So, first we'll add class="myImg" to each of the two images.

<img id="myImg" class="myImg" src="images/300-200.png" alt="Filler Text" width="300" height="200">
<img id="myImg2" class="myImg" src="images/300-200.png" alt="Filler Text" width="300" height="200">

Then we'll change how we're selecting the images:

// From this
var img = document.getElementById('myImg');
// To this
var imgs = document.getElementsByClassName('myImg');

Since getElementsByClassName returns the array-like HTMLCollection type, you need to iterate through each element, then add the event listener to it.

for (i = 0; i < imgs.length; i = i + 1) {
    var img = imgs[i];
    img.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    };
};

Here's a working version of this example:

var modal = document.getElementById('myModal');
var imgs = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (i = 0; i < imgs.length; i = i + 1) {
	var img = imgs[i];
  img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  };
};

var span = document.getElementsByClassName("closeimg")[0];
span.onclick = function() {
  modal.style.display = "none";
};
.modal {
  display: none;
  padding: 10px;
  background-color: blue;
}
<div class="container">

  <img id="myImg" class="myImg" src="http://placekitten.com/300/200" alt="Cat 1" width="300" height="200">
  <img id="myImg2" class="myImg" src="http://placekitten.com/300/300" alt="Cat 1" width="300" height="200">
  
  <div id="myModal" class="modal">
    <span class="closeimg">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
  </div>
  
</div>