From bd4fe8de103afebbcf3dc5a7504f87e6568be3a9 Mon Sep 17 00:00:00 2001 From: Max Mehl Date: Thu, 1 Feb 2024 17:30:46 +0100 Subject: [PATCH] add slideshow functionality, adapt JS, adapt CSS --- assets/scss/snap-gallery.scss | 26 ++++++++++++---- layouts/partials/gallery.html | 2 +- layouts/partials/slideshow.html | 12 ++++++++ layouts/shortcodes/snap-gallery.html | 30 +++++++++++++------ static/js/snap-gallery.js | 45 ++++++++++++++++++++-------- 5 files changed, 87 insertions(+), 28 deletions(-) create mode 100644 layouts/partials/slideshow.html diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss index 4c49b65..240b42c 100644 --- a/assets/scss/snap-gallery.scss +++ b/assets/scss/snap-gallery.scss @@ -1,15 +1,14 @@ -.snap-gallery-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 10px; +$gap: var(--gap); + +.snap-gallery-wrapper, .snap-slideshow-wrapper { + margin-bottom: $gap; /* Create equal columns in flexbox */ .snap-image { cursor: pointer; /* Column amount and width are configurable by style variables */ - width: calc(100% / var(--columns) - 10px); + width: calc(100% / var(--columns) - #{$gap}); min-width: var(--min-width); img { @@ -20,6 +19,21 @@ } } +.snap-gallery-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: $gap; +} + +.snap-slideshow-wrapper { + + // Hide all contained images except the first + .snap-image:not(:first-child) { + display: none; + } +} + .snap-lightbox { /** Default lightbox to hidden */ display: none; diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html index dc1fb92..5535e37 100644 --- a/layouts/partials/gallery.html +++ b/layouts/partials/gallery.html @@ -1,6 +1,6 @@ {{ $imgs := .imgs }} {{ $galno := .galno }} -
+
{{ range $i, $img := $imgs }}
diff --git a/layouts/partials/slideshow.html b/layouts/partials/slideshow.html new file mode 100644 index 0000000..e18366e --- /dev/null +++ b/layouts/partials/slideshow.html @@ -0,0 +1,12 @@ +{{ $imgs := .imgs }} +{{ $galno := .galno }} +
+ {{ range $i, $img := $imgs }} +
+ +
+ {{ end }} +
+ +prev +next diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html index 90dcef0..347ca52 100644 --- a/layouts/shortcodes/snap-gallery.html +++ b/layouts/shortcodes/snap-gallery.html @@ -2,6 +2,17 @@ {{- $.Page.Scratch.Add "gallerycount" 1 -}} {{ $galno := $.Page.Scratch.Get "gallerycount" }} +{{/* Load CSS/JS and make sure it is only loaded once */}} +{{- if eq ($.Page.Scratch.Get "gallerycount") 1 }} +{{- with resources.Get "scss/snap-gallery.scss" | toCSS }} + +{{- end }} + +{{ end }} + +{{/* Initialise index of this gallery */}} + + {{/* Initialise variables holding image paths */}} {{ $imgs := slice }} @@ -19,16 +30,17 @@ {{ end }} {{ end }} -{{/* Visible images in gallery mode */}} +{{/* Visible images in separate modes */}} +{{ $mode := default "gallery" .Params.mode }} +{{/* Gallery mode */}} +{{ if eq $mode "gallery" }} {{ 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 */}} + +{{ end }} {{/* The Modal/Lightbox */}} {{ partial "lightbox" (dict "galno" $galno "imgs" $imgs) }} - -{{/* Load CSS/JS and make sure it is only loaded once */}} -{{- if eq ($.Page.Scratch.Get "gallerycount") 1 }} -{{- with resources.Get "scss/snap-gallery.scss" | toCSS }} - -{{- end }} - -{{ end }} diff --git a/static/js/snap-gallery.js b/static/js/snap-gallery.js index e41ab55..c7eeb7f 100644 --- a/static/js/snap-gallery.js +++ b/static/js/snap-gallery.js @@ -1,36 +1,57 @@ // Variables -var baseid = "snap-lightbox-"; -var imageIndex = 1; +var lightbox_baseid = "snap-lightbox-"; +var slideshow_baseid = "snap-slideshow-"; +//var imageIndex = {1: 1, 2: 1, 3: 1}; +var imageIndex = {} // Open the Lightbox function openLightbox(id) { - document.getElementById(baseid + id).style.display = "block"; + document.getElementById(lightbox_baseid + id).style.display = "block"; } // Close the Lightbox function closeLightbox(id) { - document.getElementById(baseid + id).style.display = "none"; + document.getElementById(lightbox_baseid + id).style.display = "none"; } -// Next/previous controls +// Next/previous controls for lightbox function moveLightboxItem(id, n) { - showLightboxItem(id, imageIndex += n); + showLightboxItem(id, imageIndex[id] += n); +} + +// Next/previous controls for slideshow +function moveSlideshowItem(id, n) { + showSlideshowItem(id, imageIndex[id] += n); } // Move lightbox to the specified item function openLightboxItem(id, n) { - showLightboxItem(id, imageIndex = n); + showLightboxItem(id, imageIndex[id] = n); } -// Make a specific image visible, make others hidden +// TODO: Unify these functions +// In the lightbox, make a specific image visible, make others hidden function showLightboxItem(id, n) { var i; - var lightbox = document.getElementById(baseid + id); + var lightbox = document.getElementById(lightbox_baseid + id); var images = lightbox.querySelectorAll(".snap-lightbox-inner"); - if (n > images.length) { imageIndex = 1 } - if (n < 1) { imageIndex = images.length } + if (n > images.length) { imageIndex[id] = 1 } + if (n < 1) { imageIndex[id] = images.length } for (i = 0; i < images.length; i++) { images[i].style.display = "none"; } - images[imageIndex - 1].style.display = "inline-block"; + images[imageIndex[id] - 1].style.display = "inline-block"; +} + +// In the slideshow, make a specific image visible, make others hidden +function showSlideshowItem(id, n) { + var i; + var slideshow = document.getElementById(slideshow_baseid + id); + var images = slideshow.querySelectorAll(".snap-image"); + if (n > images.length) { imageIndex[id] = 1 } + if (n < 1) { imageIndex[id] = images.length } + for (i = 0; i < images.length; i++) { + images[i].style.display = "none"; + } + images[imageIndex[id] - 1].style.display = "block"; }