make slideshow width and autorotation configurable
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{{ $imgs := .imgs }}
|
||||
{{ $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 }}
|
||||
<div class="snap-image">
|
||||
<div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
|
||||
|
||||
@@ -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 */}}
|
||||
<script>const autoSlideshow = setInterval(moveSlideshowItem, 5000, {{ $galno }}, 1);</script>
|
||||
{{ partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth) }}
|
||||
{{/* Set autorotate timer for slideshow, if configured (default: yes) */}}
|
||||
{{ if .Params.slideshowrotate }}
|
||||
<script>const autoSlideshow = setInterval(moveSlideshowItem, {{ default 5000 .Params.slideshowrotate_timer }}, {{ $galno }}, 1, "auto");</script>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* The Modal/Lightbox */}}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user