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

add number text on slideshow, refactor names

Browse Source
This commit is contained in:
Max Mehl
2024-02-01 20:50:13 +01:00
parent 7211bdb558
commit 69fe2580b0
3 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
assets/scss/snap-gallery.scss
View File

@@ -1,6 +1,7 @@
$gap: var(--gap); $gap: var(--gap);
.snap-gallery-wrapper, .snap-slideshow-wrapper { .snap-gallery,
.snap-slideshow {
margin-bottom: $gap; margin-bottom: $gap;
/* Create equal columns in flexbox */ /* Create equal columns in flexbox */
@@ -19,14 +20,14 @@ $gap: var(--gap);
} }
} }
.snap-gallery-wrapper { .snap-gallery {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: $gap; gap: $gap;
} }
.snap-slideshow-wrapper { .snap-slideshow {
// Hide all contained images except the first // Hide all contained images except the first
.snap-image:not(:first-child) { .snap-image:not(:first-child) {
@@ -85,16 +86,6 @@ $gap: var(--gap);
max-height: 80%; max-height: 80%;
height: 100%; height: 100%;
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
background-color: #000;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 10%;
}
img { img {
max-height: 100%; max-height: 100%;
} }
@@ -107,6 +98,18 @@ $gap: var(--gap);
} }
} }
/* Number text (1/3 etc) */
.snap-lightbox,
.snap-slideshow {
.numbertext {
color: #f2f2f2;
background-color: #000;
font-size: 12px;
padding: 8px 12px;
position: absolute;
}
}
// /* Caption text */ // /* Caption text */
// .caption-container { // .caption-container {
// text-align: center; // text-align: center;

2
layouts/partials/gallery.html
View File

@@ -1,6 +1,6 @@
{{ $imgs := .imgs }} {{ $imgs := .imgs }}
{{ $galno := .galno }} {{ $galno := .galno }}
<div class="snap-gallery-wrapper" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};--gap:10px;"> <div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default 200 .minwidth }};--gap:10px;">
{{ 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 }});">

3
layouts/partials/slideshow.html
View File

@@ -1,8 +1,9 @@
{{ $imgs := .imgs }} {{ $imgs := .imgs }}
{{ $galno := .galno }} {{ $galno := .galno }}
<div class="snap-slideshow-wrapper" 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;">
{{ 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>
<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 }}