Update index.html

index.html

@@ -121,8 +121,10 @@ <h1><b>PHOTOLIO</b></h1>
 </header>
 </div>
 
-<div id="enlargedImg">
- <img id="displayimg" style="width:100%">
+<div id="myModal" class="modal">
+ <span class="close">&times;</span>
+ <img class="modal-content" id="enlargeimg">
+ <div id="caption"></div>
 </div>
 
 <!-- Photo Grid -->
@@ -176,27 +178,24 @@ <h1><b>PHOTOLIO</b></h1>
 var enlargeableImages = document.querySelectorAll('.enlargeable');
 
 // Loop through each image and attach the event handler
+var modal = document.getElementById("myModal");
+var modalImg = document.getElementById("enlargeimg");
+var captionText = document.getElementById("caption");
+
 enlargeableImages.forEach(function(img) {
  img.addEventListener('click', function() {
- enlargeImage(img);
+ modal.style.display = "block";
+ modalImg.src = this.src;
+ captionText.innerHTML = this.alt;
  });
 });
 
-function enlargeImage(img) {
- // Get the enlarged image container
- var modal = document.getElementById('enlargedImg');
-
- // Get the image inside the container
- var modalImg = document.getElementById("displayimg");
-
- // Display the enlarged image
- modal.style.display = "block";
- modalImg.src = img.src;
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
 
- // Close the modal when clicking outside the image
- modal.onclick = function() {
- modal.style.display = "none";
- }
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() { 
+ modal.style.display = "none";
 }
 
 </script>