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

cleanly handle multiple galleries on one page

Browse Source
This commit is contained in:
Max Mehl
2024-01-30 23:21:17 +01:00
parent 4b5fe07ece
commit 768d77aa8c
2 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,8 @@
{{/* TODO: Ensure CSS/JS is only loaded once */}} {{/* Count number of gallery on page */}}
{{- with resources.Get "scss/snap-gallery.scss" | toCSS }} {{- $.Page.Scratch.Add "gallerycount" 1 -}}
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous"> {{ $galno := $.Page.Scratch.Get "gallerycount" }}
{{- end }}
{{/* Initialise variables */}} {{/* Initialise variables holding image paths */}}
{{ $imgs := slice }} {{ $imgs := slice }}
{{/* Get/sanitise image paths */}} {{/* Get/sanitise image paths */}}
@@ -24,13 +23,13 @@
<div class="snap-wrapper"> <div class="snap-wrapper">
{{ range $i, $img := $imgs }} {{ range $i, $img := $imgs }}
<div class="snap-image"> <div class="snap-image">
<img src="{{ $img }}" onclick="openModal();currentSlide({{ add $i 1 }});" class="hover-shadow"> <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow">
</div> </div>
{{ end }} {{ end }}
</div> </div>
{{/* The Modal/Lightbox */}} {{/* The Modal/Lightbox */}}
<div class="snap-lightbox"> <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>
@@ -39,12 +38,10 @@
{{ end }} {{ end }}
<!-- Close and Next/previous controls --> <!-- Close and Next/previous controls -->
<span class="snap-close" onclick="closeModal()">&times;</span> <span class="snap-close" onclick="closeModal({{ $galno }})">&times;</span>
<a class="snap-lightbox-prev" onclick="plusSlides(-1)"><i class="snap-lightbox-arrow"></i></a> <a class="snap-lightbox-prev" onclick="plusSlides({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a>
<a class="snap-lightbox-next" onclick="plusSlides(1)"><i class="snap-lightbox-arrow"></i></a> <a class="snap-lightbox-next" onclick="plusSlides({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>
{{/* <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a> */}}
{{/* <!-- Caption text --> {{/* <!-- Caption text -->
<div class="caption-container"> <div class="caption-container">
@@ -52,4 +49,11 @@
</div> */}} </div> */}}
</div> </div>
{{/* 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 }}
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
{{- end }}
<script src="/js/snap-gallery.js"></script> <script src="/js/snap-gallery.js"></script>
{{ end }}

23
static/js/snap-gallery.js
View File

@@ -1,29 +1,32 @@
// Open the Modal // Open the Modal
function openModal() { function openModal(id) {
document.getElementsByClassName("snap-lightbox")[0].style.display = "block"; document.getElementById(baseid + id).style.display = "block";
} }
// Close the Modal // Close the Modal
function closeModal() { function closeModal(id) {
document.getElementsByClassName("snap-lightbox")[0].style.display = "none"; document.getElementById(baseid + id).style.display = "none";
} }
var baseid = "snap-lightbox-";
var slideIndex = 1; var slideIndex = 1;
showSlides(slideIndex); showSlides(slideIndex);
// Next/previous controls // Next/previous controls
function plusSlides(n) { function plusSlides(id, n) {
showSlides(slideIndex += n); showSlides(id, slideIndex += n);
} }
// Thumbnail image controls // Thumbnail image controls
function currentSlide(n) { function currentSlide(id, n) {
showSlides(slideIndex = n); showSlides(id, slideIndex = n);
} }
function showSlides(n) { function showSlides(id, n) {
var i; var i;
var slides = document.getElementsByClassName("snap-lightbox-inner"); var lightbox = document.getElementById(baseid + id);
var slides = lightbox.querySelectorAll(".snap-lightbox-inner");
if (n > slides.length) { slideIndex = 1 } if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length } if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) { for (i = 0; i < slides.length; i++) {