1 files changed, 8 insertions, 5 deletions
diff --git a/public/js/slideshow.js b/public/js/slideshow.js
index b8e2a11..d1a0a95 100644
--- a/public/js/slideshow.js
+++ b/public/js/slideshow.js
@@ -27,7 +27,7 @@ function ssInterval() {
   return (parseFloat(document.getElementById('ss-interval').value) || 4) * 1000;
 }
 
-function ssShow(i, instant) {
+function ssShow(i, instant, onShown) {
   const e = ssQueue[i];
   if (!e) return;
   ssIdx = i;
@@ -36,16 +36,18 @@ function ssShow(i, instant) {
   cap.textContent   = e.caption || '';
   ctr.textContent   = `${i + 1} / ${ssQueue.length}`;
 
+  const done = () => { applyEntry(e); onShown?.(); };
+
   if (instant) {
     applyEntry(e);
     return;
   }
 
   if (e.type === 'video') {
-    crossFade(() => applyEntry(e));
+    crossFade(done);
   } else {
     const preload = new Image();
-    preload.onload = preload.onerror = () => crossFade(() => applyEntry(e));
+    preload.onload = preload.onerror = () => crossFade(done);
     preload.src = e.src;
   }
 }
@@ -78,9 +80,10 @@ function crossFade(cb) {
 function ssSchedule() {
   clearTimeout(ssTimer);
   if (ssPlaying && ssQueue.length > 1) {
+    // Start the next timer only after the photo is actually visible (post-preload
+    // + post-crossfade), so each photo gets a full interval on screen.
     ssTimer = setTimeout(() => {
-      ssShow((ssIdx + 1) % ssQueue.length);
-      ssSchedule();
+      ssShow((ssIdx + 1) % ssQueue.length, false, ssSchedule);
     }, ssInterval());
   }
 }