rzen/jekyll-theme-isabelline
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

finalize gallery feature

Browse Source
This commit is contained in:
rzen
2020-09-07 12:49:16 -04:00
parent cf551e1b7a
commit bd61c6726b
3 changed files with 56 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
assets/js/gallery.js
View File

@ -1,12 +1,33 @@
(function () {
var galleries = document.getElementsByClassName('gallery');
// "hydrate" div.gallery with play/pause and nav behaviors
var process_gallery = function (g) {
var images = g.querySelectorAll('.images img');
var navs = []; // computed below
var gallery_nav = g.querySelector('nav');
var selected_index = 0;
var
// milliseconds to wait before switch to next slide
NEXT_SLIDE_TIMEOUT = 5000;
var
// images in this gallery
images = g.querySelectorAll('.images img'),
// container for nav buttons
gallery_nav = g.querySelector('nav'),
// clickable buttons, one per image
// computed below
navs = [],
// index of the currently selected image
selected_index = 0,
// play control consists of a label and a checkbox
// defer computing because nav innerHTML gets clobbered
play_checkbox,
// handle to setInterval
play_interval;
// show image at index
// update nav controls accordingly
var select_image = function (index) {
// var image = images[index];
if (selected_index !== index) {
@ -18,6 +39,7 @@
}
}
// show next image
var next_image = function () {
if (selected_index >= images.length-1) {
select_image(0);
@ -26,10 +48,21 @@
}
}
// handler for nav buttons
// selects an image corresponding to the clicked nav button
var nav_to_image = function () {
select_image(Array.from(navs).indexOf(this));
}
// play/pause slideshow
var toggle_play = function () {
if (play_checkbox.checked===true) {
clearInterval(play_interval);
} else {
play_interval = setInterval(next_image, NEXT_SLIDE_TIMEOUT);
}
}
var navHtml = '';
for (var i=0; i<images.length; ++i) {
@ -46,8 +79,14 @@
var nav = navs[i];
nav.addEventListener('click', nav_to_image)
}
play_checkbox = g.querySelector('.play input[type=checkbox]');
play_checkbox.addEventListener('change', toggle_play);
}
var galleries = document.getElementsByClassName('gallery');
for (var i=0; i<galleries.length; ++i) {
var g = galleries[i];
process_gallery(g);