diff --git a/_blog/example.md b/_blog/example.md
index da7819b..2672bd1 100644
--- a/_blog/example.md
+++ b/_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.
 
diff --git a/_includes/footer.html b/_includes/footer.html
index aee692b..923304c 100644
--- a/_includes/footer.html
+++ b/_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>
\ No newline at end of file
+<script src='{{ "/assets/js/clipboard.js" | relative_url }}'></script>
+<script src='{{ "/assets/js/gallery.js" | relative_url }}'></script>
\ No newline at end of file
diff --git a/_includes/gallery.html b/_includes/gallery.html
index ccbb67c..ce41c6d 100644
--- a/_includes/gallery.html
+++ b/_includes/gallery.html
@@ -1,8 +1,24 @@
-{% assign images = (include.images | split: "|") %}
-{% assign thumbnails = (include.thumbnails | split: "|") %}
+{% assign gallery_name = include.name | default: "gallery" %}
 
-<div class="gallery">
-	{% for image in images %}
-		<a href="{{ include.dir }}/{{ image }}"><img src="{{ include.dir }}/{{ image }}" /></a>
-	{% endfor %}
+{% assign gallery_prefix = page.id | prepend: "/assets" | append: "/" | append: gallery_name %}
+
+{% assign sorted_static_files = site.static_files | map: "path" | sort %}
+
+{% 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>
\ No newline at end of file
diff --git a/_sass/_isabelline.scss b/_sass/_isabelline.scss
index 663133b..6b24afc 100644
--- a/_sass/_isabelline.scss
+++ b/_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 {
diff --git a/assets/.DS_Store b/assets/.DS_Store
index 60d4e96..e3e14f0 100644
Binary files a/assets/.DS_Store and b/assets/.DS_Store differ
diff --git a/assets/blog/example/gallery/1/lanius_isabellinus1.jpg b/assets/blog/example/gallery/1/lanius_isabellinus1.jpg
new file mode 100644
index 0000000..48a9bde
Binary files /dev/null and b/assets/blog/example/gallery/1/lanius_isabellinus1.jpg differ
diff --git a/assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg b/assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg
new file mode 100644
index 0000000..102c4ef
Binary files /dev/null and b/assets/blog/example/gallery2/Quarter_Horse_Buckskin.jpg differ
diff --git a/assets/blog/example/gallery2/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg b/assets/blog/example/gallery2/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg
new file mode 100644
index 0000000..88e8fc6
Binary files /dev/null and b/assets/blog/example/gallery2/dusan-smetana-ah7KHxYg6Ow-unsplash.jpg differ
diff --git a/assets/blog/example/gallery2/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg b/assets/blog/example/gallery2/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg
new file mode 100644
index 0000000..452a285
Binary files /dev/null and b/assets/blog/example/gallery2/jay-ruzesky-h13Y8vyIXNU-unsplash.jpg differ
diff --git a/assets/js/gallery.js b/assets/js/gallery.js
new file mode 100644
index 0000000..6131d77
--- /dev/null
+++ b/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);
+	}
+})();
\ No newline at end of file