add slideshow functionality, adapt JS, adapt CSS

assets/scss/snap-gallery.scss

@@ -1,20 +1,36 @@
-.snap-wrapper {
+$gap: var(--gap);
-  display: flex;
+
-  flex-wrap: wrap;
+.snap-gallery-wrapper, .snap-slideshow-wrapper {
-  justify-content: space-around;
+  margin-bottom: $gap;
-  gap: 10px;
+
+  /* Create equal columns in flexbox */
+  .snap-image {
+    cursor: pointer;
+
+    /* Column amount and width are configurable by style variables */
+    width: calc(100% / var(--columns) - #{$gap});
+    min-width: var(--min-width);
+
+    img {
+      aspect-ratio: 16/10;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
 }
 
-/* Create equal columns in flexbox */
+.snap-gallery-wrapper {
-.snap-image {
+  display: flex;
-  // TODO: Make this configurable with variables
+  flex-wrap: wrap;
-  width: calc(100% / 4 - 10px);
+  justify-content: center;
-  min-width: 200px;
+  gap: $gap;
+}
 
-  img {
+.snap-slideshow-wrapper {
-    aspect-ratio: 16/10;
+
-    width: 100%;
+  // Hide all contained images except the first
-    object-fit: cover;
+  .snap-image:not(:first-child) {
+    display: none;
   }
 }
 
@@ -108,6 +124,7 @@
   height: 100%;
   text-align: center;
   top: 0;
+  cursor: pointer;
 
   .snap-lightbox-arrow {
     display: inline-block;

layouts/partials/gallery.html

@@ -0,0 +1,9 @@
+{{ $imgs := .imgs }}
+{{ $galno := .galno }}
+<div class="snap-gallery-wrapper" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};--gap:10px;">
+  {{ range $i, $img := $imgs }}
+  <div class="snap-image">
+    <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
+  </div>
+  {{ end }}
+</div>

layouts/partials/lightbox.html

@@ -0,0 +1,21 @@
+{{ $imgs := .imgs }}
+{{ $galno := .galno }}
+<div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
+  {{ range $i, $img := $imgs }}
+  <div class="snap-lightbox-inner">
+    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
+    <img src="{{ $img }}" style="width:100%">
+  </div>
+  {{ end }}
+
+  <!-- Close and Next/previous controls -->
+  <span class="snap-close" onclick="closeLightbox({{ $galno }})">&times;</span>
+
+  <a class="snap-lightbox-prev" onclick="moveLightboxItem({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a>
+  <a class="snap-lightbox-next" onclick="moveLightboxItem({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>
+
+  {{/*  <!-- Caption text -->
+  <div class="caption-container">
+    <p id="caption"></p>
+  </div>  */}}
+</div>

layouts/partials/slideshow.html

@@ -0,0 +1,12 @@
+{{ $imgs := .imgs }}
+{{ $galno := .galno }}
+<div class="snap-slideshow-wrapper" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;">
+  {{ range $i, $img := $imgs }}
+  <div class="snap-image">
+    <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
+  </div>
+  {{ end }}
+</div>
+
+<a onclick="moveSlideshowItem({{ $galno }}, -1)">prev</a>
+<a onclick="moveSlideshowItem({{ $galno }}, 1)">next</a>

layouts/shortcodes/snap-gallery.html

@@ -2,6 +2,17 @@
 {{- $.Page.Scratch.Add "gallerycount" 1 -}}
 {{ $galno := $.Page.Scratch.Get "gallerycount" }}
 
+{{/*  Load CSS/JS and make sure it is only loaded once  */}}
+{{- if eq ($.Page.Scratch.Get "gallerycount") 1 }}
+{{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
+<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
+{{- end }}
+<script src="/js/snap-gallery.js"></script>
+{{ end }}
+
+{{/*  Initialise index of this gallery  */}}
+<script>imageIndex[{{ $galno }}] = 1;</script>
+
 {{/*  Initialise variables holding image paths  */}}
 {{ $imgs := slice }}
 
@@ -19,41 +30,17 @@
   {{ end }}
 {{ end }}
 
-{{/*  Visible images  */}}
+{{/*  Visible images in separate modes  */}}
-<div class="snap-wrapper">
+{{ $mode := default "gallery" .Params.mode }}
-{{ range $i, $img := $imgs }}
+{{/*  Gallery mode  */}}
-  <div class="snap-image">
+{{ if eq $mode "gallery" }}
-    <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow">
+{{ partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno) }}
-  </div>
+{{/*  Slideshow mode  */}}
+{{ else if eq $mode "slideshow" }}
+{{ partial "slideshow" (dict "imgs" $imgs "galno" $galno) }}
+{{/*  Set autorotate timer for slideshow  */}}
+<script>setInterval(moveSlideshowItem, 5000, {{ $galno }}, 1);</script>
 {{ end }}
-</div>
 
 {{/*  The Modal/Lightbox  */}}
-<div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
+{{ partial "lightbox" (dict "galno" $galno "imgs" $imgs) }}
-  {{ range $i, $img := $imgs }}
-  <div class="snap-lightbox-inner">
-    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
-    <img src="{{ $img }}" style="width:100%">
-  </div>
-  {{ end }}
-
-  <!-- Close and Next/previous controls -->
-  <span class="snap-close" onclick="closeModal({{ $galno }})">&times;</span>
-
-  <a class="snap-lightbox-prev" onclick="plusSlides({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a>
-  <a class="snap-lightbox-next" onclick="plusSlides({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>
-
-  {{/*  <!-- Caption text -->
-  <div class="caption-container">
-    <p id="caption"></p>
-  </div>  */}}
-</div>
-
-
-{{/*  Load CSS/JS and make sure it is only loaded once  */}}
-{{- if eq ($.Page.Scratch.Get "gallerycount") 1 }}
-{{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
-<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
-{{- end }}
-<script src="/js/snap-gallery.js"></script>
-{{ end }}

static/js/snap-gallery.js

@@ -1,36 +1,57 @@
-// Open the Modal
+// Variables
-function openModal(id) {
+var lightbox_baseid = "snap-lightbox-";
-  document.getElementById(baseid + id).style.display = "block";
+var slideshow_baseid = "snap-slideshow-";
+//var imageIndex = {1: 1, 2: 1, 3: 1};
+var imageIndex  = {}
+
+// Open the Lightbox
+function openLightbox(id) {
+  document.getElementById(lightbox_baseid + id).style.display = "block";
 }
 
-// Close the Modal
+// Close the Lightbox
-function closeModal(id) {
+function closeLightbox(id) {
-  document.getElementById(baseid + id).style.display = "none";
+  document.getElementById(lightbox_baseid + id).style.display = "none";
 }
 
-var baseid = "snap-lightbox-";
+// Next/previous controls for lightbox
-var slideIndex = 1;
+function moveLightboxItem(id, n) {
-showSlides(slideIndex);
+  showLightboxItem(id, imageIndex[id] += n);
-
-
-// Next/previous controls
-function plusSlides(id, n) {
-  showSlides(id, slideIndex += n);
 }
 
-// Thumbnail image controls
+// Next/previous controls for slideshow
-function currentSlide(id, n) {
+function moveSlideshowItem(id, n) {
-  showSlides(id, slideIndex = n);
+  showSlideshowItem(id, imageIndex[id] += n);
 }
 
-function showSlides(id, n) {
+// Move lightbox to the specified item
+function openLightboxItem(id, n) {
+  showLightboxItem(id, imageIndex[id] = n);
+}
+
+// TODO: Unify these functions
+// In the lightbox, make a specific image visible, make others hidden
+function showLightboxItem(id, n) {
   var i;
-  var lightbox = document.getElementById(baseid + id);
+  var lightbox = document.getElementById(lightbox_baseid + id);
-  var slides = lightbox.querySelectorAll(".snap-lightbox-inner");
+  var images = lightbox.querySelectorAll(".snap-lightbox-inner");
-  if (n > slides.length) { slideIndex = 1 }
+  if (n > images.length) { imageIndex[id] = 1 }
-  if (n < 1) { slideIndex = slides.length }
+  if (n < 1) { imageIndex[id] = images.length }
-  for (i = 0; i < slides.length; i++) {
+  for (i = 0; i < images.length; i++) {
-    slides[i].style.display = "none";
+    images[i].style.display = "none";
   }
-  slides[slideIndex - 1].style.display = "inline-block";
+  images[imageIndex[id] - 1].style.display = "inline-block";
+}
+
+// In the slideshow, make a specific image visible, make others hidden
+function showSlideshowItem(id, n) {
+  var i;
+  var slideshow = document.getElementById(slideshow_baseid + id);
+  var images = slideshow.querySelectorAll(".snap-image");
+  if (n > images.length) { imageIndex[id] = 1 }
+  if (n < 1) { imageIndex[id] = images.length }
+  for (i = 0; i < images.length; i++) {
+    images[i].style.display = "none";
+  }
+  images[imageIndex[id] - 1].style.display = "block";
 }