I'm trying to open a modal when I click a picture on a masonry.
I've put all together some code pieces and I reached this result but the problem is that the modal works only if I put an id on one image at the time. If I put the same id on another image, the modal doesn't work.
I need to have the modal working on all images, and not just on one. any advice?
// 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";
}<!-- masonry html -->
<div class="P-portfolio-masonry-cont cont-1400 m-a mb-125">
<div class="P-portfolio-m-c-foto">
<img id="myImg" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="A windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
</div>
</div>
<!-- modal html -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>You need to add the onClick to all elements (images) - ids are supposed to be unique within a DOM but you can use classes instead.
// this returns a collection of elements (
var imgArray = document.getElementsByClassName("thumb");
// iterate thru the collection and add event listener
for (let img of imgArray) {
img.onclick = function() {
console.log(this.alt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
};
// 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 imgArray = document.getElementsByClassName("thumb");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (let img of imgArray) {
img.onclick = function() {
console.log(this.alt);
modal.style.display = "block";
modalImg.src = this.src;
modalImg.title = this.title;
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";
}.thumb {
width: 200px;
height: 300px;
display: inline-block;
}<!-- masonry html -->
<div class="P-portfolio-masonry-cont cont-1400 m-a mb-125">
<div class="P-portfolio-m-c-foto">
<img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="A windmill" alt="A windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="B windmill" alt="b windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="C windmill" alt="c windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img class="thumb" src="https://assets.codepen.io/12005/suspension-bridge.jpg" title="D windmill" alt="d windmill" />
</div>
<div class="P-portfolio-m-c-foto">
<img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="F windmill" alt="f windmill" />
</div>
</div>
<!-- modal html -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>Updated to add title to images (to display while on hover) - per comments