Add image zoom JS

layouts/_default/single.html

@@ -34,4 +34,21 @@
     {{ end }}
 </article>
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script type="text/javascript">
+$(function() {
+    $(document).on('click', 'article img', function() {
+        $(this).toggleClass('zoomed');
+    });
+
+    $(document).keyup(function(e) {
+        if (e.keyCode == 27) {
+            $('img.zoomed').each(function(idx) {
+                $(this).toggleClass('zoomed');
+            });
+        }
+    });
+});
+</script>
+
 {{ partial "footer.html" . }}

static/css/outerspace.css

@@ -193,6 +193,20 @@ article img {
     max-width: 100%;
 }
 
+article img.zoomed {
+    position: fixed;
+
+    top: 5vh;
+    bottom: 5vh;
+    left: 5vw;
+    right: 5vw;
+
+    max-width: 90vw;
+    max-height: 90vh;
+
+    margin: auto;
+}
+
 img.img-right {
     margin: 0 2em;
     width: 33%;