From ec2115cc532916b4d42cb91ae338a84ecaa498b4 Mon Sep 17 00:00:00 2001
From: Isaac Teng <isaactengchithang@gmail.com>
Date: Sun, 7 Apr 2024 22:13:36 +0100
Subject: [PATCH] Update index.html

---
 index.html | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 01405e6..f1946cc 100644
--- a/index.html
+++ b/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];