make appearance of lightbox configurable

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!

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) {

layouts/partials/gallery.html

@@ -1,6 +1,6 @@
 {{ $imgs := .imgs }}
 {{ $galno := .galno }}
-<div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default "200px" .minwidth }};--gap:10px;">
+<div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default "200px" .minwidth }};--gap:10px;--cursor:{{ .cursor }};">
   {{ range $i, $img := $imgs }}
   <div class="snap-image">
     <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">

layouts/partials/slideshow.html

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

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 }}
 <script>const autoSlideshow = setInterval(moveSlideshowItem, {{ default 5000 .Params.slideshowrotate_timer }}, {{ $galno }}, 1, "auto");</script>
@@ -45,4 +50,6 @@
 {{ end }}
 
 {{/*  The Modal/Lightbox  */}}
+{{ if $lightbox }}
 {{ partial "lightbox" (dict "galno" $galno "imgs" $imgs) }}
+{{ end }}

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