jekyll-theme-isabelline/assets/js/gallery.js

(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);
	}
})();