Added Image Modal (#59)

Co-authored-by: miguel <[email protected]>

Author: theamanrawat

_includes/head.html

@@ -5,8 +5,11 @@
   {%- seo -%}
   <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
   <link rel="icon" type="image/png" href="{{ "/assets/favicon.png" | relative_url }}" />
+  <link rel="stylesheet" href="{{ "/assets/css/magnific-popup.css" | relative_url }}">
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
+  <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 
+  <script src="{{ "/assets/js/jquery.magnific-popup.js" | relative_url }}"></script>
 </head>

_layouts/post.html

@@ -64,4 +64,28 @@ <h3>
 
   document.getElementById('animated-post-description').style.display = 'initial';
   typeWriter();
+
+  // Image modal
+  var $imgs = [];
+  $('img').each(function(idx) {
+    var obj = {
+      src: $(this).attr('src')
+    }
+    $imgs.push(obj);
+    var elem = $(this);
+    $(this).click(function() {
+      $('.modal').magnificPopup('open', idx);
+    });
+  });
+
+  $('.modal').magnificPopup({
+    items: $imgs,
+    type: 'image',
+    closeOnContentClick: true,
+    mainClass: 'mfp-img-mobile',
+    image: {
+      verticalFit: true
+    }
+    
+  });
 </script>

_posts/2019-04-16-welcome-to-jekyll2.md

@@ -41,7 +41,7 @@ print_hi('Tom')
 
 Pictures look like this:
 
-![image](https://picsum.photos/200)
+![image](https://picsum.photos/200){: .modal}
 
 Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
 

_sass/dash/_layout.scss

@@ -369,4 +369,8 @@ ul.related-posts {
         }
         color: $color-yellow;
     }
+}
+
+.modal{
+  cursor: pointer;
 }