CODEWITHSUNDEEP
javascripthtml
Dominik Śliwiński
Dominik Śliwiński

Reputation: 48

Modal images have troubles with classes

I got this modal script to display bigger images on my site. It worked well, but only with 1 image. When i tried to add more images - script didn't worked, and nothing was happening. Can someone tell me what am I doing wrong?
Here's some code: 

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

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName("zdjecie");
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";
}
<img class="zdjecie" style="max-height: 16rem;max-width: 16rem;" src="example.jpg">

When I was using ID's instead of classes it worked well - but i couldn't add more images - that's why i need to use classes. Someone has any ideas? I'd be greatful

Upvotes: 0

Views: 46

Answers (1)

AppleJam
AppleJam

Reputation: 1039

The document.getElementsByClassName returns an array, which contains all the dom has the zdjecie class.

So you have to loop through this array to add the event, or put these images inside a container and use event-delegation, which is a more efficient way. Because it just bind event once. More about event-delegation: https://javascript.info/event-delegation`

Here is the code using event-delegation.

var handleImageClick =  function(evt){
  if(evt.target.className.indexOf('zdjecie') === -1) return;
  modal.style.display = "block";
  modalImg.src = evt.target.src;
  captionText.innerHTML = evt.target.alt;
 
}
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modal = document.getElementById("myModal");
var imageContainer = document.getElementById("imageContainer");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
imageContainer.addEventListener('click', handleImageClick)

// 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";
}
.zdjecie{
  background-color: yellow;
  width: 100px;
  height: 100px;
  display: inline-block;
}
<div id="imageContainer">
    <img class="zdjecie" alt="1"  style="max-height: 16rem;max-width: 16rem;" src="example1.jpg" />
    <img class="zdjecie" alt="2"  style="max-height: 16rem;max-width: 16rem;" src="example2.jpg" />
    <img class="zdjecie" alt="3" style="max-height: 16rem;max-width: 16rem;" src="example3.jpg" />
    <img class="zdjecie"  alt="4" style="max-height: 16rem;max-width: 16rem;" src="example4.jpg" />
</div>
<div id="myModal">
  <span class="close">x</span>
  <img id="img01" style="max-height: 16rem;max-width: 16rem;" />
  <p id="caption"></p>
</div>

Upvotes: 2

Related Questions