From cb2ffd927c5aa074d47acb67a98441c20305749d Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 23 May 2017 17:10:24 -0400
Subject: [PATCH] fluidbox images

---
 _layouts/default.html | 16 ++++++++++++++++
 _plugins/image.rb     |  4 ++--
 _sass/_help.scss      |  5 +++++
 gulpfile.js           |  4 ++++
 package.json          |  3 ++-
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index b6c784a6..77cd32a3 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -15,6 +15,9 @@
     <link href="/css/styles.css?v={{'now' | date: "%s"}}"
           rel="stylesheet" type="text/css">
 
+    <link href="/lib/fluidbox/css/fluidbox.min.css?v={{'now' | date: "%s"}}"
+          rel="stylesheet" type="text/css">
+
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
         <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
@@ -140,6 +143,9 @@
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script>((window.jQuery && window.jQuery.fn && window.jQuery.fn.modal) || document.write('<script src="lib\/bootstrap\/js\/bootstrap.min.js?v={{"now" | date: "%s"}}"><\/script>'));</script>
 
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
+    <script src="/lib/fluidbox/js/jquery.fluidbox.min.js"></script>
+
     <script>
         (function (i, s, o, g, r, a, m) {
             i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
@@ -158,6 +164,16 @@
                 eventAction: action
             });
         }
+
+        $(function () {
+            $('a[rel="lightbox"]').fluidbox();
+
+            $(document).keydown(function (e) {
+                if (e.keyCode === 27) {
+                    $('a[rel="lightbox"]').trigger('close.fluidbox');
+                }
+            });
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/_plugins/image.rb b/_plugins/image.rb
index be949e9a..ec3935e0 100644
--- a/_plugins/image.rb
+++ b/_plugins/image.rb
@@ -3,8 +3,8 @@
     class ImageTag < Liquid::Tag
       def render(context)
         src = @markup.strip
-        "<a href=\"/images/#{src}\" target=\"_blank\">
-            <img class=\"img-responsive img-thumbnail\" src=\"/images/#{src}\" />
+        "<a href=\"/images/#{src}\" target=\"_blank\" rel=\"lightbox\">
+            <img class=\"img-responsive img-thumbnail img-tag\" src=\"/images/#{src}\" />
         </a>"
       end
     end
diff --git a/_sass/_help.scss b/_sass/_help.scss
index f70189b6..f9506e74 100644
--- a/_sass/_help.scss
+++ b/_sass/_help.scss
@@ -273,6 +273,11 @@ footer {
     h5 {
         font-size: 16px;
     }
+
+    .img-tag {
+        max-width: 600px;
+        max-height: 600px;
+    }
 }
 
 .alert {
diff --git a/gulpfile.js b/gulpfile.js
index e982662f..dd66939d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -55,6 +55,10 @@ gulp.task('lib', ['clean:lib'], function () {
         {
             src: paths.npmDir + 'lunr/lunr.js',
             dest: paths.libDir + 'lunr'
+        },
+        {
+            src: paths.npmDir + 'fluidbox/dist/**/*',
+            dest: paths.libDir + 'fluidbox'
         }
     ];
 
diff --git a/package.json b/package.json
index 7e4eb383..efa5b8d7 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "bootstrap-sass": "3.3.7",
     "font-awesome": "4.7.0",
     "jquery": "2.1.4",
-    "lunr": "0.7.1"
+    "lunr": "0.7.1",
+    "fluidbox": "2.0.0"
   }
 }