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 +25 -25
3 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 10ec813ac3 - Show all commits

2
layouts/partials/gallery.html
View File

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

6
layouts/partials/lightbox.html
View File

@@ -9,10 +9,10 @@
{{ end }} {{ end }}
<!-- Close and Next/previous controls --> <!-- Close and Next/previous controls -->
<span class="snap-close" onclick="closeModal({{ $galno }})">&times;</span> <span class="snap-close" onclick="closeLightbox({{ $galno }})">&times;</span>
<a class="snap-lightbox-prev" onclick="plusSlides({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a> <a class="snap-lightbox-prev" onclick="moveLightboxItem({{ $galno }}, -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="snap-lightbox-next" onclick="moveLightboxItem({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>
{{/* <!-- Caption text --> {{/* <!-- Caption text -->
<div class="caption-container"> <div class="caption-container">

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

@@ -1,36 +1,36 @@
// Open the Modal // Variables
function openModal(id) { var baseid = "snap-lightbox-";
var imageIndex = 1;
// Open the Lightbox
function openLightbox(id) {
document.getElementById(baseid + id).style.display = "block"; document.getElementById(baseid + id).style.display = "block";
} }
// Close the Modal // Close the Lightbox
function closeModal(id) { function closeLightbox(id) {
document.getElementById(baseid + id).style.display = "none"; document.getElementById(baseid + id).style.display = "none";
} }
var baseid = "snap-lightbox-";
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls // Next/previous controls
function plusSlides(id, n) { function moveLightboxItem(id, n) {
showSlides(id, slideIndex += n); showLightboxItem(id, imageIndex += n);
} }
// Thumbnail image controls // Move lightbox to the specified item
function currentSlide(id, n) { function openLightboxItem(id, n) {
showSlides(id, slideIndex = n); showLightboxItem(id, imageIndex = n);
} }
function showSlides(id, n) { // Make a specific image visible, make others hidden
function showLightboxItem(id, n) {
var i; var i;
var lightbox = document.getElementById(baseid + id); var lightbox = document.getElementById(baseid + id);
var slides = lightbox.querySelectorAll(".snap-lightbox-inner"); var images = lightbox.querySelectorAll(".snap-lightbox-inner");
if (n > slides.length) { slideIndex = 1 } if (n > images.length) { imageIndex = 1 }
if (n < 1) { slideIndex = slides.length } if (n < 1) { imageIndex = images.length }
for (i = 0; i < slides.length; i++) { for (i = 0; i < images.length; i++) {
slides[i].style.display = "none"; images[i].style.display = "none";
} }
slides[slideIndex - 1].style.display = "inline-block"; images[imageIndex - 1].style.display = "inline-block";
} }