mxmehl/hugo-snap-gallery
1
0
Fork 0
Code Issues 2 Pull Requests Releases 2 Wiki Activity

make slideshow width and autorotation configurable

Browse Source
This commit is contained in:
Max Mehl
2024-02-05 11:49:59 +01:00
parent a761e382d5
commit f8e99cdbda
4 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/scss/snap-gallery.scss
View File

@@ -30,6 +30,9 @@ $gap: var(--gap);
} }
.snap-slideshow { .snap-slideshow {
width: var(--slideshow-width);
margin: auto;
// Hide all contained images except the first // Hide all contained images except the first
.snap-image:not(:first-child) { .snap-image:not(:first-child) {
display: none; display: none;

2
layouts/partials/slideshow.html
View File

@@ -1,6 +1,6 @@
{{ $imgs := .imgs }} {{ $imgs := .imgs }}
{{ $galno := .galno }} {{ $galno := .galno }}
<div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;"> <div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;--slideshow-width:{{ default "100%" .width }}">
{{ range $i, $img := $imgs }} {{ range $i, $img := $imgs }}
<div class="snap-image"> <div class="snap-image">
<div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div> <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>

8
layouts/shortcodes/snap-gallery.html
View File

@@ -37,9 +37,11 @@
{{ partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno) }} {{ partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno) }}
{{/* Slideshow mode */}} {{/* Slideshow mode */}}
{{ else if eq $mode "slideshow" }} {{ else if eq $mode "slideshow" }}
{{ partial "slideshow" (dict "imgs" $imgs "galno" $galno) }} {{ partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth) }}
{{/* Set autorotate timer for slideshow */}} {{/* Set autorotate timer for slideshow, if configured (default: yes) */}}
<script>const autoSlideshow = setInterval(moveSlideshowItem, 5000, {{ $galno }}, 1);</script> {{ if .Params.slideshowrotate }}
<script>const autoSlideshow = setInterval(moveSlideshowItem, {{ default 5000 .Params.slideshowrotate_timer }}, {{ $galno }}, 1, "auto");</script>
{{ end }}
{{ end }} {{ end }}
{{/* The Modal/Lightbox */}} {{/* The Modal/Lightbox */}}

11
static/js/snap-gallery.js
View File

@@ -7,6 +7,9 @@ var imageIndex = {}
// Open the Lightbox // Open the Lightbox
function openLightbox(id) { function openLightbox(id) {
document.getElementById(lightbox_baseid + id).style.display = "block"; document.getElementById(lightbox_baseid + id).style.display = "block";
// Kill automatic slideshow when lightbox opened
clearInterval(autoSlideshow);
} }
// Close the Lightbox // Close the Lightbox
@@ -25,11 +28,13 @@ function moveLightboxItem(id, n) {
} }
// Next/previous controls for slideshow // Next/previous controls for slideshow
function moveSlideshowItem(id, n) { function moveSlideshowItem(id, n, mode) {
showItem(slideshow_baseid, id, imageIndex[id] += n, ".snap-image"); showItem(slideshow_baseid, id, imageIndex[id] += n, ".snap-image");
// Kill automatic slideshow once the slideshow has been moved // Kill automatic slideshow once the slideshow has been moved manually
clearInterval(autoSlideshow); if (mode !== "auto") {
clearInterval(autoSlideshow);
}
} }
// In the slideshow or lightbox, make a specific image visible, make others hidden // In the slideshow or lightbox, make a specific image visible, make others hidden