From 4330c224578f72a4d98b93e6e2215b6d7197849f Mon Sep 17 00:00:00 2001 From: Isaac Teng Date: Sat, 13 Apr 2024 11:34:41 +0100 Subject: [PATCH] Update index.html --- index.html | 86 +++++++++++++++++++++++------------------------------- 1 file changed, 37 insertions(+), 49 deletions(-) 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"; -} - + \ No newline at end of file