Side-By-Side Gifs That Expand When Clicked

Question

First off, I am new to coding. I am trying to put two gifs side by side that when clicked on expand into a pop up window and the videos are enlarged. I have succeeded in getting the images side by side. The first gif expands when clicked on and acts how I want it to. But the second gif does not. I believe it has to do with the 's both being the same, but I am not sure how to go about using a class or multiple ids to make the modal work correctly. Some help would be much appreciated! Attached is my 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"; } 

 .column { float: left; width: 50%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } /*Image Loops*/ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover { opacity: 0.7; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 1600px; height: 800px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; font-size: 20px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: white; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) { .modal-content { width: 100%; } } 

 <div class="row"> <div class="column"> <img id="myImg" src="image.gif" alt="img" text-align="center" style="width:100%"><br> </div> <div class="column"> <img id="myImg" src="image2.gif" alt="image2" text-align="center" style="width:100%"><br> </div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> 

Answer 1

I do not have the actual images, but I believe this should work.

 // Get the modal const modal = document.getElementById('myModal'); const modalImg = document.getElementById("img01"); const captionText = document.getElementById("caption"); document.addEventListener('click', (event) => { if (event.target.matches('img')) { loadModalImage(event.target); } }, false); const loadModalImage = (target) => { modal.style.display = "block"; modalImg.src = target.src; captionText.innerHTML = target.alt; } // Get the <span> element that closes the modal const span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = () => { modal.style.display = "none"; } 

 .column { float: left; width: 50%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } /*Image Loops*/ .myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } .myImg:hover { opacity: 0.7; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 1600px; height: 800px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; font-size: 20px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: white; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px) { .modal-content { width: 100%; } } 

 <div class="row"> <div class="column"> <img class="myImg" src="https://picsum.photos/100/100" alt="img" text-align="center" style="width:100%"><br> </div> <div class="column"> <img class="myImg" src="https://picsum.photos/100/100" alt="image2" text-align="center" style="width:100%"><br> </div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> 

Answer 2

First of all this part here :

var img = document.getElementById("myImg");

is getting only first element with this ID. ID should be unique.

The solution to this would be using a class instead but there's a problem with that approach. The problem is when you get elements by Classname it returns HTML collection to which you can't bind an event without looping it which would make things complicated. So the best solution to this instead of binding an event use onClick as an attribute and call a function.

Solution

 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"); function modalOpen(src,alt){ modal.style.display = "block"; modalImg.src = src; captionText.innerHTML = 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"; } 

 .column { float: left; width: 50%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } .caption{ text-align:center } /*Image Loops*/ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 1600px; height: 800px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; font-size: 20px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: white; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } 

 <div class="row"> <div class="column"> <img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/128x128" alt="img" text-align="center" style="width:100%"><p class="caption">img</p><br> </div> <div class="column"> <img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/129x129" alt="image2" text-align="center" style="width:100%"><p class="caption">image2</p><br> </div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>