diff --git a/_sass/_components/lightbox.scss b/_sass/_components/lightbox.scss
new file mode 100644
index 000000000..a28059eb8
--- /dev/null
+++ b/_sass/_components/lightbox.scss
@@ -0,0 +1,73 @@
+.row > .column {
+ padding: 0 8px;
+}
+
+.row:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+/* Create four equal columns that floats next to eachother */
+.column {
+ float: left;
+ width: 25%;
+}
+
+/* The Modal (background) */
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ padding-top: 150px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: black;
+}
+
+/* Modal Content */
+.modal-content {
+ position: relative;
+ background-color: #fefefe;
+ margin: auto;
+ padding: 0;
+ width: 90%;
+ max-width: 1200px;
+}
+
+/* The Close Button */
+.close {
+ color: white;
+ position: absolute;
+ top: 100px;
+ right: 25px;
+ font-size: 35px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: #999;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+/* Caption text */
+.caption-container {
+ text-align: center;
+ background-color: black;
+ padding: 2px 16px;
+ color: white;
+}
+
+img.hover-shadow {
+ transition: 0.3s;
+ cursor: pointer;
+}
+
+.hover-shadow:hover {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 0730fa414..dee5d160d 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -64,6 +64,7 @@
@import '_components/glossary';
@import '_components/timeline';
@import '_components/image-grid';
+@import '_components/lightbox';
// SIL site templates
// ==========================
diff --git a/assets/js/lightbox.js b/assets/js/lightbox.js
new file mode 100644
index 000000000..1da300359
--- /dev/null
+++ b/assets/js/lightbox.js
@@ -0,0 +1,25 @@
+// Open the Modal
+function openModal() {
+ document.getElementById("myModal").style.display = "block";
+}
+
+// Close the Modal
+function closeModal() {
+ document.getElementById("myModal").style.display = "none";
+}
+
+var slideIndex = 1;
+showSlides(slideIndex);
+
+function showSlides(n) {
+ var i;
+ var slides = document.getElementsByClassName("mySlides");
+ var captionText = document.getElementById("caption");
+ if (n > slides.length) {slideIndex = 1}
+ if (n < 1) {slideIndex = slides.length}
+ for (i = 0; i < slides.length; i++) {
+ slides[i].style.display = "none";
+ }
+ slides[slideIndex-1].style.display = "block";
+ captionText.innerHTML = slides.alt;
+}
diff --git a/pages/lightbox.html b/pages/lightbox.html
new file mode 100644
index 000000000..7e3bcecb2
--- /dev/null
+++ b/pages/lightbox.html
@@ -0,0 +1,22 @@
+---
+title: Lighbox
+layout: default
+permalink: /lightbox/
+---
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+