Merge pull request layer5io#186 from iArchitSharma/img

Fullscreen support for <img> added
Raj100679 · Jan 25, 2024 · ee9965e · ee9965e
2 parents e3e69f2 + b1931cb
commit ee9965e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 16 deletions.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -16,6 +16,6 @@
       <main role="main" class="td-main">{{ block "main" . }}{{ end }}</main>
       {{ partial "footer.html" . }}
     </div>
-    {{ partialCached "scripts.html" . }} {{ partial "image-modal.html" . }}
+    {{ partialCached "scripts.html" . }} 
   </body>
 </html>
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
@@ -1,9 +1,4 @@
-<!-- Place in layouts > partials > image-modal.html -->
-<!-- Use the partial at the bottom of any page in which you want magnific pop-up images,
-  or simply place at the bottom of baseof.html -->
-<!-- Modal will open upon clicking the image. Modal will close with clicking the x or image. -->
 
-<!-- The Modal -->
 <div id="myModal" class="modal">
   <button class="modal-close" onclick="closeModal()">close</button>
   <div class="modal-cont">
@@ -13,26 +8,44 @@
 
 <script>
 // Open the Modal
-function openModal(clicked_id) {
-  var src = document.getElementById(clicked_id).src;
-  if (src.includes("#")) {
-    src = src.substring(0, src.indexOf( "#" ));
-  };
+function openModal(imageIdOrElement) {
+  var src;
+
+  if (typeof imageIdOrElement === 'string') {
+    // If it's a string (image ID), get the source using the ID
+    src = document.getElementById(imageIdOrElement).src;
+  } else if (imageIdOrElement instanceof HTMLImageElement) {
+    // If <img>, get the source directly
+    src = imageIdOrElement.src;
+  }
+
+  if (src && src.includes("#")) {
+    src = src.substring(0, src.indexOf("#"));
+  }
+
   document.getElementById("modalPic").src = src;
   document.getElementById("myModal").style.display = "block";
-  // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
-  // there is no footer. "site-footer" id can also be changed appropriately.
   document.getElementById("site-footer").style.display = "hidden";
 }
 
+
 // Close the Modal
 function closeModal() { 
-  // prevents flashing last modal image while new id is loading on open
   document.getElementById("modalPic").src = "";
   document.getElementById("myModal").style.display = "none";
-  // See note above regarding the footer 
   document.getElementById("site-footer").style.display = "block";
 }
 
+</script>
 
-</script>
+<!-- To attach onclick attribute to all <img> -->
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var imgTags = document.querySelectorAll("img");
+    imgTags.forEach(function (img) {
+      img.onclick = function () {
+        openModal(img);
+      };
+    });
+  });
+  </script>