[HTML] Added modal for images

Now you can click on images to see in a modal
yuki · Jun 10, 2024 · 674811c · 674811c
1 parent 0c91a04
commit 674811c
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/example.html b/example.html
@@ -464,6 +464,21 @@ <h2 data-number="5.4"><span class="header-section-number">5.4</span> Table 4</h2
 
     </div> <!-- container -->
 
+    <!-- The Modal -->
+    <div id="imgModal" class="modal" tabindex="-1">
+      <div class="modal-dialog modal-dialog modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modalCaption"></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img class="modal-content" id="img01">
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="template/js/dark_mode.js"></script>

diff --git a/template/css/template.css b/template/css/template.css
@@ -57,6 +57,9 @@ h1, h2, h3, h4, h5, h6{
   text-align: start;
 }
 
+h5#modalCaption {
+  padding-top: 0rem;
+}
 
 /* 
  *
@@ -224,6 +227,10 @@ p:has(.part) .anchor-link {
  *
  * */
 
+img:hover {
+  cursor: zoom-in!important ;
+}
+
 .center {
     text-align: center;
 }

diff --git a/template/js/template.js b/template/js/template.js
@@ -152,5 +152,16 @@ function addAnchorLink(element,href) {
         }
     }
 
+    const modal = new bootstrap.Modal(document.getElementById('imgModal'))
+    for (const img of document.getElementsByTagName('img')) {
+        img.onclick = function(){
+            // alert(this.alt)
+            var modalImg = document.getElementById("img01");
+            var captionText = document.getElementById("modalCaption");
+            modalImg.src = this.src;
+            captionText.innerHTML = this.alt;
+            modal.show()
+        }
+    }
 
 })()
diff --git a/template/yuki.html b/template/yuki.html
@@ -214,6 +214,21 @@ <h5 class="offcanvas-title" id="bdsidebaroffcanvaslabel">índice</h5>
 
     </div> <!-- container -->
 
+    <!-- The Modal -->
+    <div id="imgModal" class="modal" tabindex="-1">
+      <div class="modal-dialog modal-dialog modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modalCaption"></h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img class="modal-content" id="img01">
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="template/js/dark_mode.js"></script>