diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss index d0eae06..b2a2e3f 100644 --- a/assets/scss/snap-gallery.scss +++ b/assets/scss/snap-gallery.scss @@ -30,6 +30,9 @@ $gap: var(--gap); } .snap-slideshow { + width: var(--slideshow-width); + margin: auto; + // Hide all contained images except the first .snap-image:not(:first-child) { display: none; diff --git a/layouts/partials/slideshow.html b/layouts/partials/slideshow.html index 2b15cb9..92f67c0 100644 --- a/layouts/partials/slideshow.html +++ b/layouts/partials/slideshow.html @@ -1,6 +1,6 @@ {{ $imgs := .imgs }} {{ $galno := .galno }} -
+
{{ range $i, $img := $imgs }}
{{ add $i 1 }} / {{ len $imgs }}
diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html index c5d35b3..f8877bf 100644 --- a/layouts/shortcodes/snap-gallery.html +++ b/layouts/shortcodes/snap-gallery.html @@ -37,9 +37,11 @@ {{ 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 */}} - +{{ partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth) }} +{{/* Set autorotate timer for slideshow, if configured (default: yes) */}} +{{ if .Params.slideshowrotate }} + +{{ end }} {{ end }} {{/* The Modal/Lightbox */}} diff --git a/static/js/snap-gallery.js b/static/js/snap-gallery.js index 51e3c46..d73aa24 100644 --- a/static/js/snap-gallery.js +++ b/static/js/snap-gallery.js @@ -7,6 +7,9 @@ var imageIndex = {} // Open the Lightbox function openLightbox(id) { document.getElementById(lightbox_baseid + id).style.display = "block"; + + // Kill automatic slideshow when lightbox opened + clearInterval(autoSlideshow); } // Close the Lightbox @@ -25,11 +28,13 @@ function moveLightboxItem(id, n) { } // Next/previous controls for slideshow -function moveSlideshowItem(id, n) { +function moveSlideshowItem(id, n, mode) { showItem(slideshow_baseid, id, imageIndex[id] += n, ".snap-image"); - // Kill automatic slideshow once the slideshow has been moved - clearInterval(autoSlideshow); + // Kill automatic slideshow once the slideshow has been moved manually + if (mode !== "auto") { + clearInterval(autoSlideshow); + } } // In the slideshow or lightbox, make a specific image visible, make others hidden