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

Complete rewrite #1

Merged
mxmehl merged 27 commits from refactoring into master 2024-02-07 22:17:50 +01:00
Conversation 0 Commits 27 Files Changed 11 +51 -51
4 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8217f0a6d8 - Show all commits

8
layouts/partials/gallery.html
View File

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

8
layouts/partials/lightbox.html
View File

@@ -1,12 +1,12 @@
{{ $imgs := .imgs }} {{- $imgs := .imgs -}}
{{ $galno := .galno }} {{- $galno := .galno -}}
<div class="snap-lightbox" id="snap-lightbox-{{ $galno }}"> <div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
{{ range $i, $img := $imgs }} {{- range $i, $img := $imgs }}
<div class="snap-lightbox-inner"> <div class="snap-lightbox-inner">
<div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div> <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
<img src="{{ $img }}" style="width:100%"> <img src="{{ $img }}" style="width:100%">
</div> </div>
{{ end }} {{- end -}}
<!-- Close and Next/previous controls --> <!-- Close and Next/previous controls -->
<span class="snap-close" onclick="closeLightbox({{ $galno }})">&times;</span> <span class="snap-close" onclick="closeLightbox({{ $galno }})">&times;</span>

8
layouts/partials/slideshow.html
View File

@@ -1,12 +1,12 @@
{{ $imgs := .imgs }} {{- $imgs := .imgs -}}
{{ $galno := .galno }} {{- $galno := .galno -}}
<div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;--slideshow-width:{{ default "100%" .width }};--cursor:{{ .cursor }};"> <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 }} {{- 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>
<img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});"> <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
</div> </div>
{{ end }} {{- end -}}
<a class="snap-prev" onclick="moveSlideshowItem({{ $galno }}, -1)"><span>&#10094;</span></a> <a class="snap-prev" onclick="moveSlideshowItem({{ $galno }}, -1)"><span>&#10094;</span></a>
<a class="snap-next" onclick="moveSlideshowItem({{ $galno }}, 1)"><span>&#10095;</span></a> <a class="snap-next" onclick="moveSlideshowItem({{ $galno }}, 1)"><span>&#10095;</span></a>

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

@@ -1,68 +1,68 @@
{{/* Count number of gallery on page */}} {{/* Count number of gallery on page */}}
{{- $.Page.Scratch.Add "gallerycount" 1 -}} {{- $.Page.Scratch.Add "gallerycount" 1 -}}
{{ $galno := $.Page.Scratch.Get "gallerycount" }} {{- $galno := $.Page.Scratch.Get "gallerycount" -}}
{{/* Load CSS/JS and make sure it is only loaded once */}} {{/* Load CSS/JS and make sure it is only loaded once */}}
{{- if eq ($.Page.Scratch.Get "gallerycount") 1 }} {{- if eq ($.Page.Scratch.Get "gallerycount") 1 -}}
{{- with resources.Get "scss/snap-gallery.scss" | toCSS }} {{- with resources.Get "scss/snap-gallery.scss" | toCSS -}}
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous"> <link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
{{- end }} {{- end -}}
<script src="/js/snap-gallery.js"></script> <script src="/js/snap-gallery.js"></script>
{{ end }} {{- end -}}
{{/* Initialise index of this gallery */}} {{/* Initialise index of this gallery */}}
<script>imageIndex[{{ $galno }}] = 1;</script> <script>imageIndex[{{ $galno }}] = 1;</script>
{{/* Initialise variables holding image paths and extension */}} {{/* Initialise variables holding image paths and extension */}}
{{ $imgs_collect := slice }} {{- $imgs_collect := slice -}}
{{ $imgs := slice }} {{- $imgs := slice -}}
{{ $img_exts := slice ".jpg" ".jpeg" ".png" ".gif" ".webp" ".tiff" }} {{- $img_exts := slice ".jpg" ".jpeg" ".png" ".gif" ".webp" ".tiff" -}}
{{/* Get images from src Param, separated by comma */}} {{/* Get images from src Param, separated by comma */}}
{{ range (split .Params.src ",") }} {{- range (split .Params.src ",") -}}
{{ $img := (trim . " ") }} {{- $img := (trim . " ") -}}
{{ $img_static := print "/static/" $img }} {{- $img_static := print "/static/" $img -}}
{{/* Only proceed when path exists */}} {{/* Only proceed when path exists */}}
{{ if os.FileExists $img_static }} {{- if os.FileExists $img_static -}}
{{/* If current item is a directory, range each of them, and add with full path to the slice */}} {{/* If current item is a directory, range each of them, and add with full path to the slice */}}
{{ if (os.Stat $img_static).IsDir }} {{- if (os.Stat $img_static).IsDir -}}
{{- range readDir $img_static -}} {{- range readDir $img_static -}}
{{ $imgs_collect = $imgs_collect | append (path.Join $img .Name ) }} {{- $imgs_collect = $imgs_collect | append (path.Join $img .Name ) -}}
{{ end }} {{- end -}}
{{/* If a single file, just add it to the slice */}} {{/* If a single file, just add it to the slice */}}
{{ else }} {{- else -}}
{{ $imgs_collect = $imgs_collect | append $img }} {{- $imgs_collect = $imgs_collect | append $img -}}
{{ end }} {{- end -}}
{{ end }} {{- end -}}
{{ end }} {{- end -}}
{{/* Filter collected files by whether they are an image. Throw others out */}} {{/* Filter collected files by whether they are an image. Throw others out */}}
{{ range $imgs_collect }} {{- range $imgs_collect -}}
{{ if in $img_exts (lower (path.Ext .)) }} {{- if in $img_exts (lower (path.Ext .)) -}}
{{ $imgs = $imgs | append . }} {{- $imgs = $imgs | append . -}}
{{ end }} {{- end -}}
{{ end }} {{- end -}}
{{/* Define cursor when hovering over images, depending on lightbox status */}} {{/* Define cursor when hovering over images, depending on lightbox status */}}
{{ $lightbox := (default true .Params.lightbox) }} {{- $lightbox := (default true .Params.lightbox) -}}
{{ $cursor := "auto" }} {{- $cursor := "auto" -}}
{{ if $lightbox }}{{ $cursor = "zoom-in" }}{{ end }} {{- if $lightbox }}{{ $cursor = "zoom-in" }}{{ end -}}
{{/* Visible images in separate modes */}} {{/* Visible images in separate modes */}}
{{ $mode := default "gallery" .Params.mode }} {{- $mode := default "gallery" .Params.mode -}}
{{/* Gallery mode */}} {{/* Gallery mode */}}
{{ if eq $mode "gallery" }} {{- if eq $mode "gallery" -}}
{{ partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno "cursor" $cursor) }} {{- partial "gallery" (dict "columns" .Params.columns "minwidth" .Params.minwidth "imgs" $imgs "galno" $galno "cursor" $cursor) -}}
{{/* Slideshow mode */}} {{/* Slideshow mode */}}
{{ else if eq $mode "slideshow" }} {{- else if eq $mode "slideshow" -}}
{{ partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth "cursor" $cursor) }} {{- partial "slideshow" (dict "imgs" $imgs "galno" $galno "width" .Params.slideshowwidth "cursor" $cursor) -}}
{{/* Set autorotate timer for slideshow, if configured (default: yes) */}} {{/* Set autorotate timer for slideshow, if configured (default: yes) */}}
{{ if .Params.slideshowrotate }} {{- if .Params.slideshowrotate -}}
<script>const autoSlideshow = setInterval(moveSlideshowItem, {{ default 5000 .Params.slideshowrotate_timer }}, {{ $galno }}, 1, "auto");</script> <script>const autoSlideshow = setInterval(moveSlideshowItem, {{ default 5000 .Params.slideshowrotate_timer }}, {{ $galno }}, 1, "auto");</script>
{{ end }} {{- end -}}
{{ end }} {{- end -}}
{{/* The Modal/Lightbox */}} {{/* The Modal/Lightbox */}}
{{ if $lightbox }} {{- if $lightbox -}}
{{ partial "lightbox" (dict "galno" $galno "imgs" $imgs) }} {{- partial "lightbox" (dict "galno" $galno "imgs" $imgs) -}}
{{ end }} {{- end -}}