Media zoom

html/main.js

@@ -10,6 +10,12 @@ const toggleView = () => {
   }
 }
 
+const toggleMedia = e => {
+  const img = e.target;
+  const preview = img.parentNode;
+  preview.classList.toggle("full");
+}
+
 window.addEventListener("load", function() {
 const postsSection = document.querySelector(".posts-section");
 const commentsSection = document.querySelector(".comments-section");
@@ -20,4 +26,11 @@ if (commentsSection) {
   toggleButton.addEventListener("click", toggleView);
   document.body.insertBefore(toggleButton, postsSection);
 }
+
+for (let preview of document.querySelectorAll(".preview")) {
+    const media = preview.querySelector("img") || preview.querySelector("video");
+    if (media) {
+      media.addEventListener("click", toggleMedia);
+    }
+}
 })

html/style.css

@@ -19,7 +19,8 @@ body {
 
 img, video {
     max-width: 200px;
-    max-height: 300px;
+    max-height: 200px;
+    cursor: pointer;
 }
 
 a {
@@ -140,3 +141,24 @@ button {
 button:hover {
     background-color: #1abc9c40;
 }
+
+.preview.full {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: #00000080;
+    display: flex;
+    justify-content: center;
+    z-index: 100;
+    align-items: center;
+}
+
+.preview.full img, .preview.full video {
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}

utilities.py

@@ -175,6 +175,8 @@ def create_post_page_html(post, post_html):
     html = html.replace("<!--title-->", post.title)
     html = html.replace("<!--post-->", post_html.replace("h2>", "h1>").replace(
         '<img src="media/', '<img src="../media/'
+    ).replace(
+        '<source src="media/', '<source src="../media/'
     ))
     with open(os.path.join("html", "style.css")) as f:
         html = html.replace("<style></style>", f"<style>\n{f.read()}\n</style>")