add galleries

_blog/example.md

@@ -28,9 +28,13 @@ Morbi orci diam, semper et mauris quis, maximus luctus mi. Morbi vel eros dolor.
 
 <aside>An aside can be used to provide additional information or a casual explanation in service of main contents in an unobtrusive way.</aside>
 
-Morbi orci diam, semper et mauris quis, maximus luctus mi. Morbi vel eros dolor. Suspendisse vitae dapibus leo, eget imperdiet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vitae dictum massa. Nulla facilisi. Sed aliquet, orci a dignissim lobortis, libero justo elementum mi, id tincidunt justo orci elementum ligula. Pellentesque viverra quam nec diam faucibus sodales. In massa erat, sagittis a eros quis, aliquet volutpat ex. Morbi semper dictum turpis, in ornare metus consequat ac. Praesent vehicula risus id mi sollicitudin rutrum et nec dui.
+Morbi orci diam, semper et mauris quis, maximus luctus mi. Morbi vel eros dolor. Suspendisse vitae dapibus leo, eget imperdiet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
-{% include gallery.html dir="/isabelline/assets/blog/example/gallery" images="Lanius_isabellinus1.jpg|dusan-smetana-ah7KHxYg6Ow-unsplash.jpg|jay-ruzesky-h13Y8vyIXNU-unsplash.jpg|maurits-bausenhart-OkYjLpB2gzA-unsplash.jpg|sneaky-elbow-h00rqvO5A-M-unsplash.jpg" thumbnails="Lanius_isabellinus1.jpg|dusan-smetana-ah7KHxYg6Ow-unsplash.jpg|jay-ruzesky-h13Y8vyIXNU-unsplash.jpg|maurits-bausenhart-OkYjLpB2gzA-unsplash.jpg|sneaky-elbow-h00rqvO5A-M-unsplash.jpg" %}
+{% include gallery.html name="gallery2" %}
+
+Sed vitae dictum massa. Nulla facilisi. Sed aliquet, orci a dignissim lobortis, libero justo elementum mi, id tincidunt justo orci elementum ligula. Pellentesque viverra quam nec diam faucibus sodales. In massa erat, sagittis a eros quis, aliquet volutpat ex. Morbi semper dictum turpis, in ornare metus consequat ac. Praesent vehicula risus id mi sollicitudin rutrum et nec dui.
+
+{% include gallery.html name="gallery" %}
 
 Morbi orci diam, semper et mauris quis, maximus luctus mi. Morbi vel eros dolor. Suspendisse vitae dapibus leo, eget imperdiet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vitae dictum massa. Nulla facilisi. Sed aliquet, orci a dignissim lobortis, libero justo elementum mi, id tincidunt justo orci elementum ligula. Pellentesque viverra quam nec diam faucibus sodales. In massa erat, sagittis a eros quis, aliquet volutpat ex. Morbi semper dictum turpis, in ornare metus consequat ac. Praesent vehicula risus id mi sollicitudin rutrum et nec dui.
 

_includes/footer.html

@@ -28,4 +28,5 @@
 
 <div id="snackbar">Loading...</div>
 <!-- <script src='/assets/js/slides.js'></script> -->
-<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/gallery.js" | relative_url }}'></script>

_includes/gallery.html

@@ -1,8 +1,24 @@
-{% assign images = (include.images | split: "|") %}
+{% assign gallery_name = include.name | default: "gallery" %}
-{% assign thumbnails = (include.thumbnails | split: "|") %}
 
-<div class="gallery">
+{% assign gallery_prefix = page.id | prepend: "/assets" | append: "/" | append: gallery_name %}
-	{% for image in images %}
+
-		<a href="{{ include.dir }}/{{ image }}"><img src="{{ include.dir }}/{{ image }}" /></a>
+{% assign sorted_static_files = site.static_files | map: "path" | sort %}
-	{% endfor %}
+
+{% assign image_extensions = "jpg,jpeg,png,gif" | split: "," %}
+
+<div class="gallery" id="gallery-{{ gallery_name }}">
+	{% assign image_index = 0 %}
+	{% assign gallery_nav = "" %}
+	<div class="images">
+		{% for image_path in sorted_static_files %}
+			{% assign image_ext = image_path | split: "." | last %}
+			{% if 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 }}" />
+				{% endif %}
+			{% endif %}
+		{% endfor %}
+	</div>
+	<nav></nav>
 </div>

_sass/_isabelline.scss

@@ -204,13 +204,13 @@ main {
 		}
 
 		img {
-			border-radius: 4px;
+			border-radius: 6px;
 			// width: 100%;
 		}
 	}
 
 	p img {
-		border-radius: 4px;
+		border-radius: 6px;
 		width: 100%;
 	}
 
@@ -241,11 +241,43 @@ main {
 		margin-bottom: 1em;
 		
 		img {
-			// width: 45%;
+			width: 100%;
 			
-			height: 200px;
+			// height: 200px;
 			float: left;
 		}
+
+		div.images {
+			img {
+				cursor: pointer;
+				border-radius: 6px;
+				display: none;
+				transition: all .3s ease;
+			}
+			
+			img:first-child {
+				display: block;
+			}
+		}
+
+
+		nav {
+			width: 100%;
+			text-align: center;
+			i {
+				cursor: pointer;
+				margin: .5rem;
+				display: inline-block;
+				width: 1rem;
+				height: 1rem;
+				border-radius: .5rem;
+				transition: all .3s ease;
+				background-color: hsl($hue,10,80);
+				&.selected {
+					background-color: hsl($hue,50,40);
+				}
+			}
+		}
 	}
 
 	div.gallery + p {

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