add slideshow functionality, adapt JS, adapt CSS

assets/scss/snap-gallery.scss

@@ -1,15 +1,14 @@
-.snap-gallery-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
+$gap: var(--gap);
+
+.snap-gallery-wrapper, .snap-slideshow-wrapper {
+  margin-bottom: $gap;
 
   /* Create equal columns in flexbox */
   .snap-image {
     cursor: pointer;
 
     /* Column amount and width are configurable by style variables */
-    width: calc(100% / var(--columns) - 10px);
+    width: calc(100% / var(--columns) - #{$gap});
     min-width: var(--min-width);
 
     img {
@@ -20,6 +19,21 @@
   }
 }
 
+.snap-gallery-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: $gap;
+}
+
+.snap-slideshow-wrapper {
+
+  // Hide all contained images except the first
+  .snap-image:not(:first-child) {
+    display: none;
+  }
+}
+
 .snap-lightbox {
   /** Default lightbox to hidden */
   display: none;

layouts/partials/gallery.html

@@ -1,6 +1,6 @@
 {{ $imgs := .imgs }}
 {{ $galno := .galno }}
-<div class="snap-gallery-wrapper" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};">
+<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 }});">

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,16 +30,17 @@
   {{ end }}
 {{ end }}
 
-{{/*  Visible images in gallery mode  */}}
+{{/*  Visible images in separate modes  */}}
+{{ $mode := default "gallery" .Params.mode }}
+{{/*  Gallery mode  */}}
+{{ if eq $mode "gallery" }}
 {{ partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno) }}
+{{/*  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 }}
 
 {{/*  The Modal/Lightbox  */}}
 {{ partial "lightbox" (dict "galno" $galno "imgs" $imgs) }}
-
-{{/*  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 @@
 // Variables
-var baseid = "snap-lightbox-";
-var imageIndex = 1;
+var lightbox_baseid = "snap-lightbox-";
+var slideshow_baseid = "snap-slideshow-";
+//var imageIndex = {1: 1, 2: 1, 3: 1};
+var imageIndex  = {}
 
 // Open the Lightbox
 function openLightbox(id) {
-  document.getElementById(baseid + id).style.display = "block";
+  document.getElementById(lightbox_baseid + id).style.display = "block";
 }
 
 // Close the Lightbox
 function closeLightbox(id) {
-  document.getElementById(baseid + id).style.display = "none";
+  document.getElementById(lightbox_baseid + id).style.display = "none";
 }
 
-// Next/previous controls
+// Next/previous controls for lightbox
 function moveLightboxItem(id, n) {
-  showLightboxItem(id, imageIndex += n);
+  showLightboxItem(id, imageIndex[id] += n);
+}
+
+// Next/previous controls for slideshow
+function moveSlideshowItem(id, n) {
+  showSlideshowItem(id, imageIndex[id] += n);
 }
 
 // Move lightbox to the specified item
 function openLightboxItem(id, n) {
-  showLightboxItem(id, imageIndex = n);
+  showLightboxItem(id, imageIndex[id] = n);
 }
 
-// Make a specific image visible, make others hidden
+// 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 images = lightbox.querySelectorAll(".snap-lightbox-inner");
-  if (n > images.length) { imageIndex = 1 }
-  if (n < 1) { imageIndex = images.length }
+  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 - 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";
 }