Update index.html

index.html

@@ -180,18 +180,32 @@ <h1><b>PHOTOLIO</b></h1>
  document.getElementById("mySidebar").style.display = "none";
 }
 
-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;
+ var modal = document.getElementById("myModal");
+
+ // Get the image and insert it inside the modal - use its "alt" text as a caption
+ var images = document.getElementsByClassName("myImg");
+
+ // Loop through each image and attach a click event listener
+ for (var i = 0; i < images.length; i++) {
+ images[i].addEventListener("click", function() {
+ var modal = document.getElementById("myModal");
+ var modalImg = document.getElementById("img01");
+ var captionText = document.getElementById("caption");
+
+ // Display the modal
+ modal.style.display = "block";
+
+ // Set the source and caption of the clicked image
+ modalImg.src = this.src;
+ captionText.innerHTML = this.alt;
+ });
+ }
 }
 
+
 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];