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

add slideshow functionality, adapt JS, adapt CSS

Browse Source
This commit is contained in:
Max Mehl
2024-02-01 17:30:46 +01:00
parent 10ec813ac3
commit bd4fe8de10
5 changed files with 87 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,36 +1,57 @@
// Variables
var baseid = "snap-lightbox-";
var imageIndex = 1;
var lightbox_baseid = "snap-lightbox-";
var slideshow_baseid = "snap-slideshow-";
//var imageIndex = {1: 1, 2: 1, 3: 1};
var imageIndex = {}
// Open the Lightbox
function openLightbox(id) {
document.getElementById(baseid + id).style.display = "block";
document.getElementById(lightbox_baseid + id).style.display = "block";
}
// Close the Lightbox
function closeLightbox(id) {
document.getElementById(baseid + id).style.display = "none";
document.getElementById(lightbox_baseid + id).style.display = "none";
}
// Next/previous controls
// Next/previous controls for lightbox
function moveLightboxItem(id, n) {
showLightboxItem(id, imageIndex += n);
showLightboxItem(id, imageIndex[id] += n);
}
// Next/previous controls for slideshow
function moveSlideshowItem(id, n) {
showSlideshowItem(id, imageIndex[id] += n);
}
// Move lightbox to the specified item
function openLightboxItem(id, n) {
showLightboxItem(id, imageIndex = n);
showLightboxItem(id, imageIndex[id] = n);
}
// Make a specific image visible, make others hidden
// TODO: Unify these functions
// In the lightbox, make a specific image visible, make others hidden
function showLightboxItem(id, n) {
var i;
var lightbox = document.getElementById(baseid + id);
var lightbox = document.getElementById(lightbox_baseid + id);
var images = lightbox.querySelectorAll(".snap-lightbox-inner");
if (n > images.length) { imageIndex = 1 }
if (n < 1) { imageIndex = images.length }
if (n > images.length) { imageIndex[id] = 1 }
if (n < 1) { imageIndex[id] = images.length }
for (i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[imageIndex - 1].style.display = "inline-block";
images[imageIndex[id] - 1].style.display = "inline-block";
}
// In the slideshow, make a specific image visible, make others hidden
function showSlideshowItem(id, n) {
var i;
var slideshow = document.getElementById(slideshow_baseid + id);
var images = slideshow.querySelectorAll(".snap-image");
if (n > images.length) { imageIndex[id] = 1 }
if (n < 1) { imageIndex[id] = images.length }
for (i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[imageIndex[id] - 1].style.display = "block";
}