new: Add article image preview function

templates/default/assets/css/post.css

@@ -140,3 +140,21 @@ tr, th, td {
     font-size: 11px;
     padding-left: 50px;
 }
+
+.image-preview-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    background: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.image-preview-img {
+    max-width: 90%;
+    max-height: 90%;
+}

templates/default/assets/js/post.js

@@ -53,3 +53,23 @@ function backToTop() {
         behavior: 'smooth'
     })
 }
+
+// image preview
+const contentImages = document.querySelectorAll("#post-content img");
+contentImages.forEach((img) => {
+    img.style.cursor = "pointer";
+    img.addEventListener("click", () => {
+        openPreview(img);
+    })
+});
+
+function openPreview(img) {
+    const src = img.getAttribute("src");
+
+    document.getElementById("image-preview-img").setAttribute("src", src);
+    document.getElementById("image-preview-wrap").style.display = "flex";
+}
+
+function closePreview() {
+    document.getElementById("image-preview-wrap").style.display = "none";
+}

templates/default/html/post.html

@@ -100,6 +100,11 @@
                 {{ .post.content }}
             </div>
         </div>
+
+        <!-- image preview -->
+        <div class="image-preview-wrap" id="image-preview-wrap" onclick="closePreview()">
+            <img class="image-preview-img" id="image-preview-img" src="">
+        </div>
     </div>
     {{ end }}