finalize gallery feature

assets/js/gallery.js

@@ -3,9 +3,11 @@
 	var process_gallery = function (g) {
 		var
 			// milliseconds to wait before switch to next slide
-			NEXT_SLIDE_TIMEOUT = 5000;
+			NEXT_SLIDE_TIMEOUT = 3000;
 
 		var 
+			images_container = g.querySelector('.images'),
+
 			// images in this gallery
 			images = g.querySelectorAll('.images img'),
 
@@ -26,17 +28,71 @@
 			// handle to setInterval
 			play_interval;
 
+/*
+ +--------+--------+--------+
+ | image1 | image2 | image3 |
+ |        |selected|        |
+ +--------+--------+--------+
+ */
+
+ 		var adjust_height = function (index) {
+ 			images_container.style.height = images[index].offsetHeight + 'px';
+ 		}
+
 		// 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';
+			if (selected_index === index) return;
+
+			var slide = function () {
+				images[selected_index].removeEventListener('transitionend', slide);
+
+				images[selected_index].classList.remove('transition');
+				images[index].classList.remove('transition');
+
 				navs[index].classList.add('selected');
+				navs[selected_index].classList.remove('selected');
+				
 				selected_index = index;
 			}
+
+			images[selected_index].addEventListener('transitionend', slide);
+
+			if (index < selected_index) {
+				setTimeout(function () {
+					images[index].classList.remove('right');
+					images[index].classList.add('left');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('left');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('right');
+						images[selected_index].classList.remove('center');
+					},1)
+				},1)
+
+			} else {
+				setTimeout(function () {
+					images[index].classList.remove('left');
+					images[index].classList.add('right');
+
+					adjust_height(index);
+
+					setTimeout(function () {
+						images[index].classList.add('transition');
+						images[selected_index].classList.add('transition');
+						images[index].classList.remove('right');
+						images[index].classList.add('center');
+						images[selected_index].classList.add('left');
+						images[selected_index].classList.remove('center');
+					},1);
+				},1);
+
+			}
 		}
 
 		// show next image
@@ -63,26 +119,37 @@
 			}
 		}
 
+		// build nav bullets
 		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;
 
+		// attach nav bullet listeners
 		navs = gallery_nav.querySelectorAll('i');
-
 		for (var i=0; i<navs.length; ++i) {
 			var nav = navs[i];
 			nav.addEventListener('click', nav_to_image)
 		}
 
+		// play button
 		play_checkbox = g.querySelector('.play input[type=checkbox]');
-
 		play_checkbox.addEventListener('change', toggle_play);
+
+		// resize image container when initial image loads
+		if (images[selected_index].complete) {
+			adjust_height(selected_index);
+		} else {
+			images[selected_index].addEventListener('load', function () {
+				adjust_height(selected_index);
+			});
+			images[selected_index].addEventListener('error', function() {
+				console.warn('error loading image', arguments, images[selected_index].src, images[selected_index])
+			});
+		}
 	}
 
 	var galleries = document.getElementsByClassName('gallery');