diff --git a/index.html b/index.html
index ed8a5f2..ef4bf12 100644
--- a/index.html
+++ b/index.html
@@ -121,8 +121,10 @@
PHOTOLIO
-
-
+
+
×
+
+
@@ -176,27 +178,24 @@
PHOTOLIO
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
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 (x), close the modal
+span.onclick = function() {
+ modal.style.display = "none";
}