Add full page image when a picture is clicked.

views/travel/index.css

@@ -1,5 +1,9 @@
 *{margin:0;padding:0;}
 
+body{
+    background: rgb(196, 198, 192);
+}
+
 h1{
     margin: 25px 0;
     text-align: center;
@@ -10,10 +14,34 @@ h1{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    width: 100vw;
+    width: 100%;
 }
 
-    #images > *{
+    img{
         max-height: 250px;
-        padding: 25px;
+        margin: 25px;
+        cursor: pointer;
+    }
+
+        img:hover{
+            box-shadow: 0 0 5px black;
+        }
+
+#fullPage{
+    position: fixed;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 1;
+}
+
+    #fullPage img{
+        max-height: 90%;
+        max-width: 90%;
+        cursor: default;
+        box-shadow: none;
     }

views/travel/index.html

@@ -10,7 +10,10 @@
 
         <div id="images"></div>
 
+        <div id="fullPage" style="display:none"></div>
+
         <script>
+            let fullPage = document.getElementById("fullPage");
             let path = window.location.pathname
                 .split("/")
                 .slice(2)
@@ -25,13 +28,18 @@
                         let img = document.createElement("img");
                         img.src = response[i];
                         img.alt = "A picture";
+                        img.onclick = ()=>{
+                            let newImg = img.cloneNode(true);
+                            fullPage.appendChild(newImg);
+                            fullPage.style.display = "flex";
+                            newImg.onclick = ()=>{event.stopPropagation()}
+                        };
                         container.appendChild(img);
                     }
                 })
                 .catch(err => {});
 
             let newPath = path.split("/");
-            console.log(newPath);
             let title = "";
 
             for(let i = newPath.length - 1; i >= 0; i--){
@@ -39,6 +47,11 @@
             }
 
             document.getElementById("title").innerText = title.substring(0, title.length-2);
+            
+            document.getElementById("fullPage").onclick = ()=>{
+                fullPage.removeChild(document.querySelector("#fullPage img"));
+                fullPage.style.display = "none";
+            }
         </script>
     </body>
 </html>