diff --git a/index.html b/index.html
index 3edc80e..ed8a5f2 100644
--- a/index.html
+++ b/index.html
@@ -121,35 +121,27 @@ PHOTOLIO
+
+
![]()
+
-
-
-
-
-
-
×
-
-
-
![]()
-
-
-
-
-
+
+
@@ -180,38 +172,34 @@ PHOTOLIO
document.getElementById("mySidebar").style.display = "none";
}
-img.onclick = function(){
- 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 all elements with the "enlargeable" class
+var enlargeableImages = document.querySelectorAll('.enlargeable');
+
+// Loop through each image and attach the event handler
+enlargeableImages.forEach(function(img) {
+ img.addEventListener('click', function() {
+ enlargeImage(img);
+ });
+});
+
+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;
+
+ // Close the modal when clicking outside the image
+ modal.onclick = function() {
+ modal.style.display = "none";
}
}
-
-// Get the element that closes the modal
-var span = document.getElementsByClassName("close")[0];
-
-// When the user clicks on (x), close the modal
-span.onclick = function() {
- modal.style.display = "none";
-}
-
- 
- 
+ 
- 
- 
+