From 8c1546ef7f32f475f0520c2272e28f6d5854f494 Mon Sep 17 00:00:00 2001
From: Max Mehl <mail@mehl.mx>
Date: Thu, 1 Feb 2024 23:52:53 +0100
Subject: [PATCH] add animation, stop automatic slideshow when interacted with

---
 assets/scss/snap-gallery.scss        | 19 ++++++++++++++++++-
 layouts/shortcodes/snap-gallery.html |  2 +-
 static/js/snap-gallery.js            |  3 +++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss
index 8a83bfe..d6380ba 100644
--- a/assets/scss/snap-gallery.scss
+++ b/assets/scss/snap-gallery.scss
@@ -30,13 +30,28 @@ $gap: var(--gap);
 }
 
 .snap-slideshow {
-
   // Hide all contained images except the first
   .snap-image:not(:first-child) {
     display: none;
   }
 }
 
+// Animation
+.snap-slideshow .snap-image,
+.snap-lightbox .snap-lightbox-inner {
+  animation: 1s fade;
+
+  @keyframes fade {
+    from {
+      opacity: .4
+    }
+
+    to {
+      opacity: 1
+    }
+  }
+}
+
 .snap-lightbox {
   /** Default lightbox to hidden */
   display: none;
@@ -180,6 +195,7 @@ $gap: var(--gap);
 // Position arrows for left/right
 .snap-prev {
   left: 0;
+
   .snap-lightbox & span {
     left: 0.5%;
   }
@@ -187,6 +203,7 @@ $gap: var(--gap);
 
 .snap-next {
   right: 0;
+
   .snap-lightbox & span {
     right: 0.5%;
   }
diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html
index 347ca52..c5d35b3 100644
--- a/layouts/shortcodes/snap-gallery.html
+++ b/layouts/shortcodes/snap-gallery.html
@@ -39,7 +39,7 @@
 {{ else if eq $mode "slideshow" }}
 {{ partial "slideshow" (dict "imgs" $imgs "galno" $galno) }}
 {{/*  Set autorotate timer for slideshow  */}}
-<script>setInterval(moveSlideshowItem, 5000, {{ $galno }}, 1);</script>
+<script>const autoSlideshow = setInterval(moveSlideshowItem, 5000, {{ $galno }}, 1);</script>
 {{ end }}
 
 {{/*  The Modal/Lightbox  */}}
diff --git a/static/js/snap-gallery.js b/static/js/snap-gallery.js
index 3a3d156..51e3c46 100644
--- a/static/js/snap-gallery.js
+++ b/static/js/snap-gallery.js
@@ -27,6 +27,9 @@ function moveLightboxItem(id, n) {
 // Next/previous controls for slideshow
 function moveSlideshowItem(id, n) {
   showItem(slideshow_baseid, id, imageIndex[id] += n, ".snap-image");
+
+  // Kill automatic slideshow once the slideshow has been moved
+  clearInterval(autoSlideshow);
 }
 
 // In the slideshow or lightbox, make a specific image visible, make others hidden