From 0a778ee8e938770af74bf48a3299572a052650b4 Mon Sep 17 00:00:00 2001 From: Max Mehl Date: Mon, 5 Feb 2024 14:04:31 +0100 Subject: [PATCH] make appearance of lightbox configurable --- README.md | 6 ++++-- assets/scss/snap-gallery.scss | 5 +++-- layouts/partials/gallery.html | 2 +- layouts/partials/slideshow.html | 2 +- layouts/shortcodes/snap-gallery.html | 11 +++++++++-- static/js/snap-gallery.js | 6 +++++- 6 files changed, 23 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index f6186ba..1039d78 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,6 @@ Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes. Li - Captions / title - Alternative text -- Disable lightbox - Automatically detect whether source is an image or directory - Support a micture of dirs and single images @@ -44,12 +43,13 @@ Quickstart: - `{{< snap-gallery src="image1.jpg, image2.png" >}}`: Display these two images in **gallery** mode - `{{< snap-gallery src="image1.jpg image2.png" mode="slideshow" >}}`: Display these two images in **slideshow** mode -- `{{< snap-gallery src="img/page1" >}}`: Display all images in the folder `img/page1` in **gallery** mode +- `{{< snap-gallery src="img/page1" isdir=true >}}`: Display all images in the folder `img/page1` in **gallery** mode All parameters: - `src`: Must contain either a comma-separated list of paths to images, or a directory path containing images. - `isdir`: Whether `src` contains one or multiple individual images, ow a whole directory. Default: `false`. +- `lightbox`: Whether a click on an image shall open a lightbox modal. Default: `true`. - `mode`: Can be either `gallery` or `slideshow`. Default: `gallery`. - For gallery mode: - `columns`: Amount of columns the images are displayed in. Default: `4`. @@ -59,6 +59,8 @@ All parameters: - `slideshowrotate`: Whether the slideshow shall automatically rotate through the images. Default: `true`. - `slideshowrotate_timer`: Interval of automatic slideshow rotation (if enabled), in milliseconds. Default: `5000` (5 seconds). +**Note: Boolean values (`true`/`false`) must be provided without surrounding `"` characters!** `lightbox=false` disables the lightbox, while `lightbox="false"` does not. + ## Credits The original inspiration for this shortcode came from [Li-Wen Yip's easy-gallery](https://github.com/liwenyip/hugo-easy-gallery). The first major version of this was already a 90% rewrite, and the current one has even less to do with it. However, the rewrite took some inspirations from [W3Schools](https://www.w3schools.com/howto/howto_js_lightbox.asp), thanks! diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss index b2a2e3f..53e0d39 100644 --- a/assets/scss/snap-gallery.scss +++ b/assets/scss/snap-gallery.scss @@ -10,7 +10,7 @@ $gap: var(--gap); /* Create equal columns in flexbox */ .snap-image { - cursor: zoom-in; + cursor: var(--cursor); /* Column amount and width are configurable by style variables */ width: calc(100% / var(--columns) - #{$gap}); @@ -31,7 +31,8 @@ $gap: var(--gap); .snap-slideshow { width: var(--slideshow-width); - margin: auto; + margin-left: auto; + margin-right: auto; // Hide all contained images except the first .snap-image:not(:first-child) { diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html index 78ca654..d4e8fb6 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 index 92f67c0..e9c9791 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 f8877bf..1c98466 100644 --- a/layouts/shortcodes/snap-gallery.html +++ b/layouts/shortcodes/snap-gallery.html @@ -30,14 +30,19 @@ {{ end }} {{ end }} +{{/* Define cursor when hovering over images, depending on lightbox status */}} +{{ $lightbox := (default true .Params.lightbox) }} +{{ $cursor := "auto" }} +{{ if $lightbox }}{{ $cursor = "zoom-in" }}{{ end }} + {{/* 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) }} +{{ partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno "cursor" $cursor) }} {{/* Slideshow mode */}} {{ else if eq $mode "slideshow" }} -{{ partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth) }} +{{ partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth "cursor" $cursor) }} {{/* Set autorotate timer for slideshow, if configured (default: yes) */}} {{ if .Params.slideshowrotate }} @@ -45,4 +50,6 @@ {{ end }} {{/* The Modal/Lightbox */}} +{{ if $lightbox }} {{ partial "lightbox" (dict "galno" $galno "imgs" $imgs) }} +{{ end }} diff --git a/static/js/snap-gallery.js b/static/js/snap-gallery.js index d73aa24..3df694b 100644 --- a/static/js/snap-gallery.js +++ b/static/js/snap-gallery.js @@ -9,7 +9,11 @@ function openLightbox(id) { document.getElementById(lightbox_baseid + id).style.display = "block"; // Kill automatic slideshow when lightbox opened - clearInterval(autoSlideshow); + try { + clearInterval(autoSlideshow); + } catch (e) { + console.log("Lightbox error: " + e) + } } // Close the Lightbox