add lightbox to gallery

esl · Jun 28, 2024 · 9d5a2bf · 9d5a2bf
1 parent 3db237f
commit 9d5a2bf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 37 deletions.
diff --git a/_includes/gallery-grid.html b/_includes/gallery-grid.html
@@ -1,13 +1,13 @@
 <div class="gallery-wrapper section">
   {% if page.gallery.title %}
   <h3 class="title">{{ page.gallery.title }}</h3>
-  <hr/>
+  <hr />
   {% endif %}
   <div class="gallery-grid my-3">
     {% for image in page.gallery.images %}
-    <div class="gallery-item">
+    <a data-fslightbox="gallery" class="gallery-item" href="{{ image.src }}">
       <img src="{{ image.src }}" alt="{{ image.alt }}">
-    </div>
+    </a>
     {% endfor %}
   </div>
 </div>
diff --git a/_includes/imports/js.html b/_includes/imports/js.html
@@ -1,16 +1,16 @@
 <!-- jQuery Version 1.11.0 -->
-<script src="{{ "/assets/js/jquery-1.11.0.js" | prepend: site.baseurl }}"></script>
+<script src="{{ " /assets/js/jquery-1.11.0.js" | prepend: site.baseurl }}"></script>
 
 <!-- Bootstrap Core JavaScript -->
-<script src="{{ "/assets/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
+<script src="{{ " /assets/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
 
 <!-- Plugin JavaScript -->
-<script src="{{ "/assets/js/jquery.easing.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/assets/js/classie.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/assets/js/cbpAnimatedHeader.js" | prepend: site.baseurl }}"></script>
+<script src="{{ " /assets/js/jquery.easing.min.js" | prepend: site.baseurl }}"></script>
+<script src="{{ " /assets/js/classie.js" | prepend: site.baseurl }}"></script>
+<script src="{{ " /assets/js/cbpAnimatedHeader.js" | prepend: site.baseurl }}"></script>
 
 <!-- Custom Theme JavaScript -->
-<script src="{{ "/assets/js/agency.js" | prepend: site.baseurl }}"></script>
+<script src="{{ " /assets/js/agency.js" | prepend: site.baseurl }}"></script>
 
 <!-- Owl Carousel -->
 <script src="{{ site.baseurl }}/assets/js/carousel.min.js" charset="utf-8"></script>
@@ -19,23 +19,26 @@
 <script src="{{ site.baseurl }}/assets/js/scrollax.min.js" charset="utf-8"></script>
 
 {% if site.smooth-scroll %}
-    <script src="{{ site.baseurl }}/assets/js/smoothscroll.js" charset="utf-8"></script>
+<script src="{{ site.baseurl }}/assets/js/smoothscroll.js" charset="utf-8"></script>
 {% endif %}
+{% if page.gallery %}
+<script src="{{ site.baseurl }}/assets/js/fslightbox.js" charset="utf-8"></script>
 
+{% endif %}
 <!-- Main JS -->
 <script src="{{ site.baseurl }}/assets/js/main.js" charset="utf-8"></script>
 <script type="text/javascript">
-piAId = '24452';
-piCId = '63005';
-piHostname = 'pi.pardot.com';
-
-(function() {
-function async_load(){
-var s = document.createElement('script'); s.type = 'text/javascript';
-s.src = ('https:' == document.location.protocol ? 'https://pi' : 'http://cdn') + '.pardot.com/pd.js';
-var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c);
-}
-if(window.attachEvent) { window.attachEvent('onload', async_load); }
-else { window.addEventListener('load', async_load, false); }
-})();
-</script>
+  piAId = '24452';
+  piCId = '63005';
+  piHostname = 'pi.pardot.com';
+
+  (function () {
+    function async_load() {
+      var s = document.createElement('script'); s.type = 'text/javascript';
+      s.src = ('https:' == document.location.protocol ? 'https://pi' : 'http://cdn') + '.pardot.com/pd.js';
+      var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c);
+    }
+    if (window.attachEvent) { window.attachEvent('onload', async_load); }
+    else { window.addEventListener('load', async_load, false); }
+  })();
+</script>
diff --git a/assets/js/fslightbox.js b/assets/js/fslightbox.js
diff --git a/index.html b/index.html
@@ -6,19 +6,19 @@
 timezone: Europe/Berlin
 deadline: 2024-10-14 12:00
 modal: false
-gallery:
-# title: 'Code BEAM Europe 2023'
-# images:
-# - src: 'https://placehold.co/600x400'
-# alt: 'Alt text for image 1'
-# - src: 'https://placehold.co/600x400'
-# alt: 'Alt text for image 2'
-# - src: 'https://placehold.co/600x400'
-# alt: 'Alt text for image 3'
-# - src: 'https://placehold.co/600x400'
-# alt: 'Alt text for image 4'
-# - src: 'https://placehold.co/600x400'
-# alt: 'Alt text for image 5'
+# gallery:
+ # title: 'Code BEAM Europe 2023'
+ # images:
+ # - src: 'https://placehold.co/600x400'
+ #  alt: 'Alt text for image 1'
+ # - src: 'https://placehold.co/600x400'
+ #   alt: 'Alt text for image 2'
+ # - src: 'https://placehold.co/600x400'
+ #   alt: 'Alt text for image 3'
+ # - src: 'https://placehold.co/600x400'
+ #   alt: 'Alt text for image 4'
+ # - src: 'https://placehold.co/1600x400'
+ #   alt: 'Alt text for image 5'
 ---