My is my modal only working for the first image in gallery-CodePudding

My page has a gallery with lots of pictures, and I've been able to set up a modal using js and css to show an enlarged image on click. However, while my fist image works as expected, my others don't.

I used

This is my HTML:

  <!-- The Modal -->
  <div id="myModal" >
    <!-- The Close Button -->
    <span  title="Close">&times;</span>

    <!-- Modal Content (The Image) -->
    <img  id="img01" />

    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
  </div>
  <div >
    <div >
      <img
        src=".//assets/carina-nebula.jpg"
        
        id="myImg"
        alt="Carina Nebula"
        title="Click to enlarge"
      />
    </div>
    <div >
      <img
        src=".//assets/tarantula-nebula.png"
        
        id="myImg"
        title="Click to enlarge"
      />
    </div>

My CSS:

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-height: 80%;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

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

My JS:

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

How can I fix this? Thanks

CodePudding user response：

document.getElementById("myImg") will always give you the very first DOM element. ID is used for one element in HTML.

Because you have multiple items you want to add click, use another method like document.querySelectorAll(".img") to get all elements that will return nodeList. You have to loop over elements and attach addEventListener to each element and pass img attribute to the function.

function openDialogueBox(img) {
  // 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 modalImg = document.getElementById("img01");
  var captionText = document.getElementById("caption");

  modal.style.display = "block";
  modalImg.src = img.src;
  captionText.innerHTML = img.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";
  }
}

document.querySelectorAll(".img").forEach((element) => {
  element.addEventListener("click", function (e) {
      openDialogueBox(e.target)
  });
});

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
img {
  max-width: 200px;
}
#myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-height: 80%;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

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

<!-- The Modal -->
<div id="myModal" >
    <!-- The Close Button -->
    <span  title="Close">&times;</span>
    <!-- Modal Content (The Image) -->
    <img  id="img01" />
    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
</div>
<div >
  <div >
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" 
        alt="Carina Nebula" title="Click to enlarge" />
  </div>
  <div >
    <img src="https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg"
        alt="Carina Nebula two"  title="Click to enlarge" />
  </div>
</div>

CodePudding user response：

IDs must be unique, so if you want to do something to multiple elements in Javascript, you must get them with a different method. I suggest you to use getElementsByClassName.

The following example is based on your code.

var images = document.getElementsByClassName("img"); // Here we get all the elements with the class "img"
// ... //

for (const img of images) { // With this for loop we make an action with every element in the "images" variable.
    img.onclick = function() {
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
}