add slideshow functionality, adapt JS, adapt CSS

assets/scss/snap-gallery.scss

@@ -0,0 +1,204 @@
+$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) - #{$gap});
+    min-width: var(--min-width);
+
+    img {
+      aspect-ratio: 16/10;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+.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;
+
+  /** Position and style */
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.8);
+
+  /* keep lightbox in middle. TODO: hacky, and not realibly in middle */
+  &:before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    /* adjust for white space between pseudo element and next sibling */
+    margin-right: -.25em;
+    /* stretch line height */
+    height: 100%;
+  }
+
+}
+
+// /* Click on the complete background closes the lightbox */
+// /* Exception: arrow in gallery, they have higher z-index */
+// a.snap-lightbox-close {
+//   position: fixed;
+//   z-index: 800;
+//   width: 100%;
+//   height: 100%;
+//   text-align: center;
+//   white-space: nowrap;
+//   top: 0;
+//   left: 0;
+// }
+
+/* Container for image */
+.snap-lightbox-inner {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;
+  max-width: 90%;
+  max-height: 80%;
+  height: 100%;
+
+  /* Number text (1/3 etc) */
+  .numbertext {
+    color: #f2f2f2;
+    background-color: #000;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 10%;
+  }
+
+  img {
+    max-height: 100%;
+  }
+
+  // TODO: Untested
+  p {
+    color: #fff;
+    z-index: 810;
+    position: relative;
+  }
+}
+
+// /* Caption text */
+// .caption-container {
+//   text-align: center;
+//   background-color: black;
+//   padding: 2px 16px;
+//   color: white;
+// }
+
+/* prev/next arrows & close button */
+.snap-lightbox-prev,
+.snap-lightbox-next {
+  position: fixed;
+  z-index: 800;
+  width: 5%;
+  height: 100%;
+  text-align: center;
+  top: 0;
+  cursor: pointer;
+
+  .snap-lightbox-arrow {
+    display: inline-block;
+    position: fixed;
+    top: 50%;
+    z-index: 900;
+    border: solid #fff;
+    border-width: 0 7px 7px 0;
+    display: inline-block;
+    padding: 1%;
+  }
+
+  &:hover>.snap-lightbox-arrow {
+    border-color: #999;
+    transition: all 0.25s ease;
+  }
+}
+
+.snap-lightbox-prev {
+  left: 0;
+
+  .snap-lightbox-arrow {
+    left: 2%;
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+  }
+}
+
+.snap-lightbox-next {
+  right: 0;
+
+  .snap-lightbox-arrow {
+    right: 2%;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
+}
+
+/* The Close Button */
+.snap-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  height: 50px;
+  width: 50px;
+  color: white;
+  font-size: 50px;
+  font-weight: bold;
+  z-index: 900;
+
+  &:hover,
+  &:focus {
+    color: #999;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .snap-lightbox-inner {
+    max-width: 80%;
+  }
+
+  .snap-lightbox-prev,
+  .snap-lightbox-next {
+    width: 10%;
+  }
+
+  .snap-lightbox-close-button {
+    width: 10%;
+    height: calc(10vw);
+    /* ~10% width */
+  }
+}

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/figure.bak.html

@@ -0,0 +1,87 @@
+<!--
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
+  SPDX-License-Identifier: MIT
+-->
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
+{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
+{{- $.Page.Scratch.Add "figurecount" 1 -}}
+<!-- use src image -->
+{{- $thumb := .Get "src" -}}
+
+<!-- set unique ID depending on whether part of gallery or alone -->
+{{- $figid := "" -}}
+{{- $galid := "" -}}
+{{- $id := "" -}}
+{{- $previd := "" -}}
+{{- $nextid := "" -}}
+{{- if .Parent -}} <!-- gallery -->
+  {{- $galid = .Page.Scratch.Get "gallery" -}}
+  {{- if not $galid }}{{ $galid = 0 }}{{ end -}}
+  {{- $galid = add $galid 1 -}}
+  {{- $.Page.Scratch.Add "thisgalfig" 1 -}}
+  {{- $figid = .Page.Scratch.Get "thisgalfig" -}}
+{{- else -}} <!-- standalone figure -->
+  {{- $.Page.Scratch.Add "nogalfig" 1 -}}
+  {{- $figid = .Page.Scratch.Get "nogalfig" -}}
+{{- end -}}
+{{- if $galid -}} <!-- gallery -->
+  {{- $id = print "gal" $galid "-" "fig" $figid -}}
+  {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
+  {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
+{{- else -}} <!-- standalone figure -->
+  {{- $id = print "fig" $figid -}}
+{{- end -}}
+
+<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+  <div class="snap-wrapper">
+    {{ if (.Get "link") -}}
+      <a href="{{ .Get "link" }}"
+         {{- with .Get "target" }} target="{{ . }}"{{ end -}}
+         {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
+         >
+    {{ else -}}
+      {{ if not (eq (.Get "lightbox") "none") }}<a href="#{{ $id }}">{{ end }}
+    {{- end -}}
+    <!-- THUMBNAIL -->
+      <img src="{{ $thumb | relURL }}" class="snap-thumb"
+      {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
+      {{- with .Get "title" }} title="{{ . }}"{{ end -}}
+      {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+      {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+       />
+      {{- if or (.Get "caption") (.Get "attr")}}
+        <figcaption>
+          {{- .Get "caption" | markdownify -}}
+          {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
+        </figcaption>
+      {{- end }}
+    </a>
+    <!-- FULL IMAGE; HIDDEN -->
+    {{- if not (eq (.Get "lightbox") "none") -}}
+      <div class="snap-lightbox" id="{{ $id }}">
+        <a href="#_" class="snap-lightbox-close"></a>
+        <div class="snap-lightbox-inner">
+          <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
+          <p>
+          {{- if or (.Get "caption") (.Get "attr") -}}
+            {{- .Get "caption" | markdownify -}}
+            {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
+            {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
+            {{- with .Get "attrlink" }}</a>{{- end -}}
+          {{- end }}
+          </p>
+        </div>
+        <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
+        {{- if .Parent -}}
+          {{- if not (eq $figid 1) -}}
+            <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
+          {{- else -}}
+            <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
+          {{- end -}}
+          <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
+          <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
+        {{- end }}
+      </div>
+    {{- end -}}
+  </div>
+</figure>

layouts/shortcodes/figure.html

@@ -1,87 +1,68 @@
-<!--
-  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
-  SPDX-License-Identifier: MIT
--->
-<!-- count how many times we've called this shortcode; load the css if it's the first time -->
-{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
-{{- $.Page.Scratch.Add "figurecount" 1 -}}
-<!-- use src image -->
-{{- $thumb := .Get "src" -}}
-
-<!-- set unique ID depending on whether part of gallery or alone -->
-{{- $figid := "" -}}
-{{- $galid := "" -}}
-{{- $id := "" -}}
-{{- $previd := "" -}}
-{{- $nextid := "" -}}
-{{- if .Parent -}} <!-- gallery -->
-  {{- $galid = .Page.Scratch.Get "gallery" -}}
-  {{- if not $galid }}{{ $galid = 0 }}{{ end -}}
-  {{- $galid = add $galid 1 -}}
-  {{- $.Page.Scratch.Add "thisgalfig" 1 -}}
-  {{- $figid = .Page.Scratch.Get "thisgalfig" -}}
-{{- else -}} <!-- standalone figure -->
-  {{- $.Page.Scratch.Add "nogalfig" 1 -}}
-  {{- $figid = .Page.Scratch.Get "nogalfig" -}}
-{{- end -}}
-{{- if $galid -}} <!-- gallery -->
-  {{- $id = print "gal" $galid "-" "fig" $figid -}}
-  {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
-  {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
-{{- else -}} <!-- standalone figure -->
-  {{- $id = print "fig" $figid -}}
-{{- end -}}
-
-<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
-  <div class="snap-wrapper">
-    {{ if (.Get "link") -}}
-      <a href="{{ .Get "link" }}"
-         {{- with .Get "target" }} target="{{ . }}"{{ end -}}
-         {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
-         >
-    {{ else -}}
-      {{ if not (eq (.Get "lightbox") "none") }}<a href="#{{ $id }}">{{ end }}
-    {{- end -}}
-    <!-- THUMBNAIL -->
-      <img src="{{ $thumb | relURL }}" class="snap-thumb"
-      {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
-      {{- with .Get "title" }} title="{{ . }}"{{ end -}}
-      {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-      {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-       />
-      {{- if or (.Get "caption") (.Get "attr")}}
-        <figcaption>
-          {{- .Get "caption" | markdownify -}}
-          {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
-        </figcaption>
-      {{- end }}
-    </a>
-    <!-- FULL IMAGE; HIDDEN -->
-    {{- if not (eq (.Get "lightbox") "none") -}}
-      <div class="snap-lightbox" id="{{ $id }}">
-        <a href="#_" class="snap-lightbox-close"></a>
-        <div class="snap-lightbox-inner">
-          <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
-          <p>
-          {{- if or (.Get "caption") (.Get "attr") -}}
-            {{- .Get "caption" | markdownify -}}
-            {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
-            {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
-            {{- with .Get "attrlink" }}</a>{{- end -}}
-          {{- end }}
-          </p>
-        </div>
-        <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
-        {{- if .Parent -}}
-          {{- if not (eq $figid 1) -}}
-            <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
-          {{- else -}}
-            <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
-          {{- end -}}
-          <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
-          <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
-        {{- end }}
-      </div>
-    {{- end -}}
+<!-- Images used to open the lightbox -->
+<div class="row">
+  <div class="column">
+    <img src="img1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
   </div>
-</figure>
+  <div class="column">
+    <img src="img2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
+  </div>
+</div>
+
+<!-- The Modal/Lightbox -->
+<div id="myModal" class="modal">
+  <span class="close cursor" onclick="closeModal()">&times;</span>
+  <div class="modal-content">
+
+    <div class="mySlides">
+      <div class="numbertext">1 / 4</div>
+      <img src="img1.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">2 / 4</div>
+      <img src="img2.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">3 / 4</div>
+      <img src="img3.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">4 / 4</div>
+      <img src="img4.jpg" style="width:100%">
+    </div>
+
+    <!-- Next/previous controls -->
+    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+    <a class="next" onclick="plusSlides(1)">&#10095;</a>
+
+    <!-- Caption text -->
+    <div class="caption-container">
+      <p id="caption"></p>
+    </div>
+
+    <!-- Thumbnail image controls -->
+    <div class="column">
+      <img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Nature">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">
+    </div>
+  </div>
+</div>

layouts/shortcodes/snap-gallery.html

@@ -0,0 +1,46 @@
+{{/*  Count number of gallery on page  */}}
+{{- $.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 }}
+
+{{/*  Get/sanitise image paths  */}}
+{{ if .Params.isdir }}
+  {{/*  Get images from folder, put into map  */}}
+  {{ $imgdir := print "/static/" .Params.src }}
+  {{- range readDir $imgdir -}}
+  {{ $imgs = $imgs | append (print $.Params.src "/" .Name ) }}
+  {{ end }}
+{{ else }}
+  {{/*  Get images from src Param, separated by comma  */}}
+  {{ range (split .Params.src ",") }}
+    {{ $imgs = $imgs | append (trim . " ") }}
+  {{ end }}
+{{ end }}
+
+{{/*  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) }}

static/js/snap-gallery.js

@@ -0,0 +1,57 @@
+// Variables
+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(lightbox_baseid + id).style.display = "block";
+}
+
+// Close the Lightbox
+function closeLightbox(id) {
+  document.getElementById(lightbox_baseid + id).style.display = "none";
+}
+
+// Next/previous controls for lightbox
+function moveLightboxItem(id, 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[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(lightbox_baseid + id);
+  var images = lightbox.querySelectorAll(".snap-lightbox-inner");
+  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 = "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";
+}