finalize gallery feature

_includes/gallery.html

@@ -4,7 +4,7 @@
 
 {% assign sorted_static_files = site.static_files | map: "path" | sort %}
 
-{% assign image_extensions = "jpg,jpeg,png,gif" | split: "," %}
+{% assign valid_image_extensions = "jpg,jpeg,png,gif" | split: "," %}
 
 <div class="gallery" id="gallery-{{ gallery_name }}">
 	{% assign image_index = 0 %}
@@ -12,7 +12,7 @@
 	<div class="images">
 		{% for image_path in sorted_static_files %}
 			{% assign image_ext = image_path | split: "." | last %}
-			{% if image_extensions contains image_ext %}
+			{% if valid_image_extensions contains image_ext %}
 				{% if image_path contains gallery_prefix %}
 					{% assign image_index = image_index | plus: 1 %}
 					<img id="{{ gallery_name }}-{{ image_index }}" src="{{ site.baseurl }}{{ image_path }}" />

_sass/_isabelline.scss

@@ -235,20 +235,37 @@ main {
 			width: 100%;
 			
 			// height: 200px;
-			float: left;
+			// float: left;
 		}
 
 		div.images {
+			position: relative;
+			height: 500px;
+			overflow: hidden;
+
+			will-change: height;
+			transition: 300ms ease;
+
+			img.transition {
+				will-change: left;
+				transition: 300ms ease;
+			}
+
+			img.left   { left: -100% !important; }
+			img.right  { left:  100% !important; }
+			img.center { left:    0  !important; }
+
 			img {
 				cursor: pointer;
 				border-radius: 6px;
-				display: none;
+				
-				transition: all 300ms ease;
+				position: absolute;
-				will-change: display;
+				top: 0;
+				left: 100%;
 			}
 			
 			img:first-child {
-				display: block;
+				left: 0;
 			}
 		}
 
@@ -271,6 +288,8 @@ main {
 				}
 			}
 
+			// slightly modified version of
+			// https://css-tricks.com/making-pure-css-playpause-button/
 			.play {
 				float: left;
 

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) return;
-			if (selected_index !== index) {
+
-				images[selected_index].style.display = 'none';
+			var slide = function () {
-				navs[selected_index].classList.remove('selected');
+				images[selected_index].removeEventListener('transitionend', slide);
-				images[index].style.display = 'block';
+
+				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');