add galleries

assets/js/gallery.js

@@ -0,0 +1,54 @@
+(function () {
+	var galleries = document.getElementsByClassName('gallery');
+
+	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 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;
+			}
+		}
+
+		var next_image = function () {
+			if (selected_index >= images.length-1) {
+				select_image(0);
+			} else {
+				select_image(selected_index+1);
+			}
+		}
+
+		var nav_to_image = function () {
+			select_image(Array.from(navs).indexOf(this));
+		}
+
+		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)
+		}
+	}
+
+	for (var i=0; i<galleries.length; ++i) {
+		var g = galleries[i];
+		process_gallery(g);
+	}
+})();