feat: ✨ try adding lightbox to group photos

dlmbl · May 22, 2024 · 0fd81b7 · 0fd81b7
1 parent 4b7aa49
commit 0fd81b7
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,7 @@ _site/
 .sass-cache/
 .jekyll-cache/
 .jekyll-metadata
-
+node_modules/
 # for macOS (qsu1)
 .DS_Store
 .AppleDouble

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -228,6 +228,8 @@ GEM
       uri
     nokogiri (1.16.5-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.16.5-x86_64-linux)
+      racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
@@ -270,6 +272,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-23
+  x86_64-linux
 
 DEPENDENCIES
   github-pages

diff --git a/_includes/head.html b/_includes/head.html
@@ -9,7 +9,7 @@
   <meta name="description" content="{{ site.description }}">
 
   <link rel="shortcut icon" href="{{ '/assets/img/favicon.ico' | relative_url }}">
-
+  <link rel="stylesheet" href="/assets/css/lightbox.min.css">
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
 

diff --git a/_pages/previous-groups.md b/_pages/previous-groups.md
@@ -5,14 +5,17 @@ permalink: /group-photos/
 ---
 
 ## 2023
-![2023 group](/assets/img/groups/group-2023.jpeg){:width="100%"}
+[![2023 group](/assets/img/groups/group-2023.jpeg){:width="100%"}](/assets/img/groups/group-2023.jpeg){:data-lightbox="group-2023"}
 
 ## 2022
-![2022 group](/assets/img/groups/group-2022.jpeg){:width="100%"}
-![2022 augmented](/assets/img/groups/group_augmented.jpg){:width="100%"}
+[![2022 group](/assets/img/groups/group-2022.jpeg){:width="100%"}](/assets/img/groups/group-2022.jpeg){:data-lightbox="group-2022"}
+[![2022 augmented](/assets/img/groups/group_augmented.jpg){:width="100%"}](/assets/img/groups/group_augmented.jpg){:data-lightbox="group-2022"}
 
 ## 2021
-![2021 group](/assets/img/groups/group-2021.jpeg){:width="100%"}
+[![2021 group](/assets/img/groups/group-2021.jpeg){:width="100%"}](/assets/img/groups/group-2021.jpeg){:data-lightbox="group-2021"}
 
 ## 2019
-![2019 group](/assets/img/groups/group-2019.jpeg){:width="100%"}
+[![2019 group](/assets/img/groups/group-2019.jpeg){:width="100%"}](/assets/img/groups/group-2019.jpeg){:data-lightbox="group-2019"}
+
+<script src="/assets/js/lightbox-plus-jquery.min.js"></script>
+<script src="/assets/js/main.js"></script>
diff --git a/assets/css/lightbox.min.css b/assets/css/lightbox.min.css
diff --git a/assets/images/close.png b/assets/images/close.png
diff --git a/assets/images/loading.gif b/assets/images/loading.gif
diff --git a/assets/images/next.png b/assets/images/next.png
diff --git a/assets/images/prev.png b/assets/images/prev.png
diff --git a/assets/js/lightbox-plus-jquery.min.js b/assets/js/lightbox-plus-jquery.min.js
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', function () {
+    lightbox.option({
+      'resizeDuration': 200,
+      'wrapAround': true
+    });
+  });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "lightbox2": "^2.11.4"
+  }
+}