94 lines
2.3 KiB
JavaScript
94 lines
2.3 KiB
JavaScript
(function () {
|
|
// "hydrate" div.gallery with play/pause and nav behaviors
|
|
var process_gallery = function (g) {
|
|
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) {
|
|
images[selected_index].style.display = 'none';
|
|
navs[selected_index].classList.remove('selected');
|
|
images[index].style.display = 'block';
|
|
navs[index].classList.add('selected');
|
|
selected_index = index;
|
|
}
|
|
}
|
|
|
|
// show next image
|
|
var next_image = function () {
|
|
if (selected_index >= images.length-1) {
|
|
select_image(0);
|
|
} else {
|
|
select_image(selected_index+1);
|
|
}
|
|
}
|
|
|
|
// 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) {
|
|
var image = images[i]
|
|
image.addEventListener('click', next_image)
|
|
navHtml += '<i class="' + (i===0? 'selected' : '') + '" data-target="' + image.id + '"></i>'
|
|
}
|
|
|
|
gallery_nav.innerHTML += navHtml;
|
|
|
|
navs = gallery_nav.querySelectorAll('i');
|
|
|
|
for (var i=0; i<navs.length; ++i) {
|
|
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);
|
|
}
|
|
})(); |