finalize gallery feature
This commit is contained in:
@ -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);
|
||||
|
Reference in New Issue
Block a user