add slideshow functionality, adapt JS, adapt CSS

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 }}