From 256c59d90b5b5d921e41388154b5fa533027ca08 Mon Sep 17 00:00:00 2001
From: Dirk Pennings <dirkpennings@gmail.com>
Date: Wed, 22 Aug 2018 09:57:55 +0200
Subject: [PATCH 1/6] Added loop property to Gallery and Lightbox

---
 examples/src/app.js                |  2 +-
 examples/src/components/Gallery.js | 19 ++++++++++++-------
 src/Lightbox.js                    | 21 +++++++++++++++------
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/examples/src/app.js b/examples/src/app.js
index f83505fa..26d99e89 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -121,7 +121,7 @@ render(
 			caption,
 			orientation,
 			useForDemo,
-		}))} />
+		}))} loop={true} />
 
 		<h3>With Thumbnails</h3>
 		<Gallery images={THUMBNAIL_IMAGES.map(({ caption, id, orientation, useForDemo }) => ({
diff --git a/examples/src/components/Gallery.js b/examples/src/components/Gallery.js
index f826ecf8..dd9588e2 100644
--- a/examples/src/components/Gallery.js
+++ b/examples/src/components/Gallery.js
@@ -33,14 +33,18 @@ class Gallery extends Component {
 		});
 	}
 	gotoPrevious () {
-		this.setState({
-			currentImage: this.state.currentImage - 1,
-		});
+		let prevImage = this.state.currentImage - 1;
+
+		if (this.props.loop && this.state.currentImage === 0) prevImage = this.props.images.length - 1;
+
+		this.gotoImage(prevImage);
 	}
 	gotoNext () {
-		this.setState({
-			currentImage: this.state.currentImage + 1,
-		});
+		let nextImage = this.state.currentImage + 1;
+
+		if (this.props.loop && this.state.currentImage === this.props.images.length - 1) nextImage = 0;
+
+		this.gotoImage(nextImage);
 	}
 	gotoImage (index) {
 		this.setState({
@@ -48,7 +52,7 @@ class Gallery extends Component {
 		});
 	}
 	handleClickImage () {
-		if (this.state.currentImage === this.props.images.length - 1) return;
+		if (!this.props.loop && this.state.currentImage === this.props.images.length - 1) return;
 
 		this.gotoNext();
 	}
@@ -86,6 +90,7 @@ class Gallery extends Component {
 					currentImage={this.state.currentImage}
 					images={this.props.images}
 					isOpen={this.state.lightboxIsOpen}
+					loop={this.props.loop}
 					onClickImage={this.handleClickImage}
 					onClickNext={this.gotoNext}
 					onClickPrev={this.gotoPrevious}
diff --git a/src/Lightbox.js b/src/Lightbox.js
index 42601033..4aadb18f 100644
--- a/src/Lightbox.js
+++ b/src/Lightbox.js
@@ -126,29 +126,37 @@ class Lightbox extends Component {
 		return img;
 	}
 	gotoNext (event) {
-		const { currentImage, images } = this.props;
+		const { currentImage, images, loop } = this.props;
 		const { imageLoaded } = this.state;
 
-		if (!imageLoaded || currentImage === (images.length - 1)) return;
+		if (!imageLoaded || (!loop && currentImage === (images.length - 1))) return;
 
 		if (event) {
 			event.preventDefault();
 			event.stopPropagation();
 		}
 
+		if (loop && currentImage === (images.length - 1)) {
+			this.props.onClickThumbnail(0);
+		}
+
 		this.props.onClickNext();
 	}
 	gotoPrev (event) {
-		const { currentImage } = this.props;
+		const { currentImage, images, loop } = this.props;
 		const { imageLoaded } = this.state;
 
-		if (!imageLoaded || currentImage === 0) return;
+		if (!imageLoaded || (!loop && currentImage === 0)) return;
 
 		if (event) {
 			event.preventDefault();
 			event.stopPropagation();
 		}
 
+		if (loop && currentImage === 0) {
+			this.props.onClickThumbnail(images.length - 1);
+		}
+
 		this.props.onClickPrev();
 	}
 	closeBackdrop (event) {
@@ -181,7 +189,7 @@ class Lightbox extends Component {
 	// ==============================
 
 	renderArrowPrev () {
-		if (this.props.currentImage === 0) return null;
+		if (!this.props.loop && this.props.currentImage === 0) return null;
 
 		return (
 			<Arrow
@@ -194,7 +202,7 @@ class Lightbox extends Component {
 		);
 	}
 	renderArrowNext () {
-		if (this.props.currentImage === (this.props.images.length - 1)) return null;
+		if (!this.props.loop && this.props.currentImage === (this.props.images.length - 1)) return null;
 
 		return (
 			<Arrow
@@ -405,6 +413,7 @@ Lightbox.defaultProps = {
 	enableKeyboardInput: true,
 	imageCountSeparator: ' of ',
 	leftArrowTitle: 'Previous (Left arrow key)',
+	loop: false,
 	onClickShowNextImage: true,
 	preloadNextImage: true,
 	preventScroll: true,

From 2d86f36e66b4efcd1f79c84962ce4740f0c10882 Mon Sep 17 00:00:00 2001
From: Dirk Pennings <dirkpennings@gmail.com>
Date: Wed, 22 Aug 2018 10:02:01 +0200
Subject: [PATCH 2/6] Updated README with loop property

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 46f31088..8465b40e 100644
--- a/README.md
+++ b/README.md
@@ -94,6 +94,7 @@ images  | array | undefined | Required. Array of image objects See image options
 imageCountSeparator  | String  | ' of ' | Customize separator in the image count
 isOpen  | bool  | false | Whether or not the lightbox is displayed
 leftArrowTitle | string | ' Previous (Left arrow key) ' | Customize of left arrow title
+loop | bool | false | Allows looping the gallery
 onClickPrev | func | undefined | Fired on request of the previous image
 onClickNext | func | undefined | Fired on request of the next image
 onClose | func | undefined | Required. Handle closing of the lightbox

From 43993450f7159c64c83a50c05a3992cc67220daf Mon Sep 17 00:00:00 2001
From: Dirk Pennings <dirkpennings@gmail.com>
Date: Wed, 22 Aug 2018 10:07:41 +0200
Subject: [PATCH 3/6] Removed property value (following yarn lint)

---
 examples/src/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/src/app.js b/examples/src/app.js
index 26d99e89..a2f4424d 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -121,7 +121,7 @@ render(
 			caption,
 			orientation,
 			useForDemo,
-		}))} loop={true} />
+		}))} loop />
 
 		<h3>With Thumbnails</h3>
 		<Gallery images={THUMBNAIL_IMAGES.map(({ caption, id, orientation, useForDemo }) => ({

From e25f8fc606e84b2f0d2eac4badc4e5eab95ad755 Mon Sep 17 00:00:00 2001
From: Dirk Pennings <dirkpennings@gmail.com>
Date: Wed, 22 Aug 2018 10:25:51 +0200
Subject: [PATCH 4/6] Added dist files and updated version number to 0.5.20

---
 dist/react-images.es.js   | 85 ++++++++++++++++++++++-----------------
 dist/react-images.js      | 85 ++++++++++++++++++++++-----------------
 dist/react-images.min.js  |  2 +-
 examples/dist/example.css | 10 ++---
 lib/Lightbox.js           | 85 ++++++++++++++++++++++-----------------
 package.json              |  2 +-
 6 files changed, 154 insertions(+), 115 deletions(-)

diff --git a/dist/react-images.es.js b/dist/react-images.es.js
index ee38960a..44932323 100644
--- a/dist/react-images.es.js
+++ b/dist/react-images.es.js
@@ -1124,33 +1124,45 @@ var Lightbox = function (_Component) {
 		value: function gotoNext(event) {
 			var _props = this.props,
 			    currentImage = _props.currentImage,
-			    images = _props.images;
+			    images = _props.images,
+			    loop = _props.loop;
 			var imageLoaded = this.state.imageLoaded;
 
 
-			if (!imageLoaded || currentImage === images.length - 1) return;
+			if (!imageLoaded || !loop && currentImage === images.length - 1) return;
 
 			if (event) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 
+			if (loop && currentImage === images.length - 1) {
+				this.props.onClickThumbnail(0);
+			}
+
 			this.props.onClickNext();
 		}
 	}, {
 		key: 'gotoPrev',
 		value: function gotoPrev(event) {
-			var currentImage = this.props.currentImage;
+			var _props2 = this.props,
+			    currentImage = _props2.currentImage,
+			    images = _props2.images,
+			    loop = _props2.loop;
 			var imageLoaded = this.state.imageLoaded;
 
 
-			if (!imageLoaded || currentImage === 0) return;
+			if (!imageLoaded || !loop && currentImage === 0) return;
 
 			if (event) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 
+			if (loop && currentImage === 0) {
+				this.props.onClickThumbnail(images.length - 1);
+			}
+
 			this.props.onClickPrev();
 		}
 	}, {
@@ -1193,7 +1205,7 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderArrowPrev',
 		value: function renderArrowPrev() {
-			if (this.props.currentImage === 0) return null;
+			if (!this.props.loop && this.props.currentImage === 0) return null;
 
 			return React.createElement(Arrow, {
 				direction: 'left',
@@ -1206,7 +1218,7 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderArrowNext',
 		value: function renderArrowNext() {
-			if (this.props.currentImage === this.props.images.length - 1) return null;
+			if (!this.props.loop && this.props.currentImage === this.props.images.length - 1) return null;
 
 			return React.createElement(Arrow, {
 				direction: 'right',
@@ -1219,11 +1231,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderDialog',
 		value: function renderDialog() {
-			var _props2 = this.props,
-			    backdropClosesModal = _props2.backdropClosesModal,
-			    isOpen = _props2.isOpen,
-			    showThumbnails = _props2.showThumbnails,
-			    width = _props2.width;
+			var _props3 = this.props,
+			    backdropClosesModal = _props3.backdropClosesModal,
+			    isOpen = _props3.isOpen,
+			    showThumbnails = _props3.showThumbnails,
+			    width = _props3.width;
 			var imageLoaded = this.state.imageLoaded;
 
 
@@ -1262,11 +1274,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderImages',
 		value: function renderImages() {
-			var _props3 = this.props,
-			    currentImage = _props3.currentImage,
-			    images = _props3.images,
-			    onClickImage = _props3.onClickImage,
-			    showThumbnails = _props3.showThumbnails;
+			var _props4 = this.props,
+			    currentImage = _props4.currentImage,
+			    images = _props4.images,
+			    onClickImage = _props4.onClickImage,
+			    showThumbnails = _props4.showThumbnails;
 			var imageLoaded = this.state.imageLoaded;
 
 
@@ -1299,12 +1311,12 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderThumbnails',
 		value: function renderThumbnails() {
-			var _props4 = this.props,
-			    images = _props4.images,
-			    currentImage = _props4.currentImage,
-			    onClickThumbnail = _props4.onClickThumbnail,
-			    showThumbnails = _props4.showThumbnails,
-			    thumbnailOffset = _props4.thumbnailOffset;
+			var _props5 = this.props,
+			    images = _props5.images,
+			    currentImage = _props5.currentImage,
+			    onClickThumbnail = _props5.onClickThumbnail,
+			    showThumbnails = _props5.showThumbnails,
+			    thumbnailOffset = _props5.thumbnailOffset;
 
 
 			if (!showThumbnails) return;
@@ -1319,11 +1331,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderHeader',
 		value: function renderHeader() {
-			var _props5 = this.props,
-			    closeButtonTitle = _props5.closeButtonTitle,
-			    customControls = _props5.customControls,
-			    onClose = _props5.onClose,
-			    showCloseButton = _props5.showCloseButton;
+			var _props6 = this.props,
+			    closeButtonTitle = _props6.closeButtonTitle,
+			    customControls = _props6.customControls,
+			    onClose = _props6.onClose,
+			    showCloseButton = _props6.showCloseButton;
 
 
 			return React.createElement(Header, {
@@ -1336,11 +1348,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderFooter',
 		value: function renderFooter() {
-			var _props6 = this.props,
-			    currentImage = _props6.currentImage,
-			    images = _props6.images,
-			    imageCountSeparator = _props6.imageCountSeparator,
-			    showImageCount = _props6.showImageCount;
+			var _props7 = this.props,
+			    currentImage = _props7.currentImage,
+			    images = _props7.images,
+			    imageCountSeparator = _props7.imageCountSeparator,
+			    showImageCount = _props7.showImageCount;
 
 
 			if (!images || !images.length) return null;
@@ -1356,10 +1368,10 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderSpinner',
 		value: function renderSpinner() {
-			var _props7 = this.props,
-			    spinner = _props7.spinner,
-			    spinnerColor = _props7.spinnerColor,
-			    spinnerSize = _props7.spinnerSize;
+			var _props8 = this.props,
+			    spinner = _props8.spinner,
+			    spinnerColor = _props8.spinnerColor,
+			    spinnerSize = _props8.spinnerSize;
 			var imageLoaded = this.state.imageLoaded;
 
 			var Spinner$$1 = spinner;
@@ -1424,6 +1436,7 @@ Lightbox.defaultProps = {
 	enableKeyboardInput: true,
 	imageCountSeparator: ' of ',
 	leftArrowTitle: 'Previous (Left arrow key)',
+	loop: false,
 	onClickShowNextImage: true,
 	preloadNextImage: true,
 	preventScroll: true,
diff --git a/dist/react-images.js b/dist/react-images.js
index 6c169f74..eb224063 100644
--- a/dist/react-images.js
+++ b/dist/react-images.js
@@ -1126,33 +1126,45 @@ var Lightbox = function (_Component) {
 		value: function gotoNext(event) {
 			var _props = this.props,
 			    currentImage = _props.currentImage,
-			    images = _props.images;
+			    images = _props.images,
+			    loop = _props.loop;
 			var imageLoaded = this.state.imageLoaded;
 
 
-			if (!imageLoaded || currentImage === images.length - 1) return;
+			if (!imageLoaded || !loop && currentImage === images.length - 1) return;
 
 			if (event) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 
+			if (loop && currentImage === images.length - 1) {
+				this.props.onClickThumbnail(0);
+			}
+
 			this.props.onClickNext();
 		}
 	}, {
 		key: 'gotoPrev',
 		value: function gotoPrev(event) {
-			var currentImage = this.props.currentImage;
+			var _props2 = this.props,
+			    currentImage = _props2.currentImage,
+			    images = _props2.images,
+			    loop = _props2.loop;
 			var imageLoaded = this.state.imageLoaded;
 
 
-			if (!imageLoaded || currentImage === 0) return;
+			if (!imageLoaded || !loop && currentImage === 0) return;
 
 			if (event) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 
+			if (loop && currentImage === 0) {
+				this.props.onClickThumbnail(images.length - 1);
+			}
+
 			this.props.onClickPrev();
 		}
 	}, {
@@ -1195,7 +1207,7 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderArrowPrev',
 		value: function renderArrowPrev() {
-			if (this.props.currentImage === 0) return null;
+			if (!this.props.loop && this.props.currentImage === 0) return null;
 
 			return React__default.createElement(Arrow, {
 				direction: 'left',
@@ -1208,7 +1220,7 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderArrowNext',
 		value: function renderArrowNext() {
-			if (this.props.currentImage === this.props.images.length - 1) return null;
+			if (!this.props.loop && this.props.currentImage === this.props.images.length - 1) return null;
 
 			return React__default.createElement(Arrow, {
 				direction: 'right',
@@ -1221,11 +1233,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderDialog',
 		value: function renderDialog() {
-			var _props2 = this.props,
-			    backdropClosesModal = _props2.backdropClosesModal,
-			    isOpen = _props2.isOpen,
-			    showThumbnails = _props2.showThumbnails,
-			    width = _props2.width;
+			var _props3 = this.props,
+			    backdropClosesModal = _props3.backdropClosesModal,
+			    isOpen = _props3.isOpen,
+			    showThumbnails = _props3.showThumbnails,
+			    width = _props3.width;
 			var imageLoaded = this.state.imageLoaded;
 
 
@@ -1264,11 +1276,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderImages',
 		value: function renderImages() {
-			var _props3 = this.props,
-			    currentImage = _props3.currentImage,
-			    images = _props3.images,
-			    onClickImage = _props3.onClickImage,
-			    showThumbnails = _props3.showThumbnails;
+			var _props4 = this.props,
+			    currentImage = _props4.currentImage,
+			    images = _props4.images,
+			    onClickImage = _props4.onClickImage,
+			    showThumbnails = _props4.showThumbnails;
 			var imageLoaded = this.state.imageLoaded;
 
 
@@ -1301,12 +1313,12 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderThumbnails',
 		value: function renderThumbnails() {
-			var _props4 = this.props,
-			    images = _props4.images,
-			    currentImage = _props4.currentImage,
-			    onClickThumbnail = _props4.onClickThumbnail,
-			    showThumbnails = _props4.showThumbnails,
-			    thumbnailOffset = _props4.thumbnailOffset;
+			var _props5 = this.props,
+			    images = _props5.images,
+			    currentImage = _props5.currentImage,
+			    onClickThumbnail = _props5.onClickThumbnail,
+			    showThumbnails = _props5.showThumbnails,
+			    thumbnailOffset = _props5.thumbnailOffset;
 
 
 			if (!showThumbnails) return;
@@ -1321,11 +1333,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderHeader',
 		value: function renderHeader() {
-			var _props5 = this.props,
-			    closeButtonTitle = _props5.closeButtonTitle,
-			    customControls = _props5.customControls,
-			    onClose = _props5.onClose,
-			    showCloseButton = _props5.showCloseButton;
+			var _props6 = this.props,
+			    closeButtonTitle = _props6.closeButtonTitle,
+			    customControls = _props6.customControls,
+			    onClose = _props6.onClose,
+			    showCloseButton = _props6.showCloseButton;
 
 
 			return React__default.createElement(Header, {
@@ -1338,11 +1350,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderFooter',
 		value: function renderFooter() {
-			var _props6 = this.props,
-			    currentImage = _props6.currentImage,
-			    images = _props6.images,
-			    imageCountSeparator = _props6.imageCountSeparator,
-			    showImageCount = _props6.showImageCount;
+			var _props7 = this.props,
+			    currentImage = _props7.currentImage,
+			    images = _props7.images,
+			    imageCountSeparator = _props7.imageCountSeparator,
+			    showImageCount = _props7.showImageCount;
 
 
 			if (!images || !images.length) return null;
@@ -1358,10 +1370,10 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderSpinner',
 		value: function renderSpinner() {
-			var _props7 = this.props,
-			    spinner = _props7.spinner,
-			    spinnerColor = _props7.spinnerColor,
-			    spinnerSize = _props7.spinnerSize;
+			var _props8 = this.props,
+			    spinner = _props8.spinner,
+			    spinnerColor = _props8.spinnerColor,
+			    spinnerSize = _props8.spinnerSize;
 			var imageLoaded = this.state.imageLoaded;
 
 			var Spinner$$1 = spinner;
@@ -1426,6 +1438,7 @@ Lightbox.defaultProps = {
 	enableKeyboardInput: true,
 	imageCountSeparator: ' of ',
 	leftArrowTitle: 'Previous (Left arrow key)',
+	loop: false,
 	onClickShowNextImage: true,
 	preloadNextImage: true,
 	preventScroll: true,
diff --git a/dist/react-images.min.js b/dist/react-images.min.js
index 8ffe03a8..b12c5a7e 100644
--- a/dist/react-images.min.js
+++ b/dist/react-images.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","aphrodite/no-important","react-transition-group","react-dom"],t):e.Lightbox=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,n,r,o,i,a){"use strict";function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},e);return Object.keys(t).forEach(function(r){"object"===v(t[r])&&t[r]&&e[r]?n[r]=s(e[r],t[r]):n[r]=t[r]}),n}function l(e,t){var n=t.theme,r=e.direction,i=e.icon,a=e.onClick,l=e.size,c=x(e,["direction","icon","onClick","size"]),u=o.StyleSheet.create(s(S,n));return f.createElement("button",w({type:"button",className:o.css(u.arrow,u["arrow__direction__"+r],l&&u["arrow__size__"+l]),onClick:a,onTouchEnd:a},c),f.createElement(E,{fill:!!n.arrow&&n.arrow.fill||g.arrow.fill,type:i}))}function c(e,t){var n=t.theme,r=x(e,[]),i=o.StyleSheet.create(s(_,n));return f.createElement("div",w({id:"lightboxBackdrop",className:o.css(i.container)},r))}function u(e,t){var n=t.theme,r=e.caption,i=e.countCurrent,a=e.countSeparator,l=e.countTotal,c=e.showCount,u=x(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!r&&!c)return null;var h=o.StyleSheet.create(s(L,n)),p=c?f.createElement("div",{className:o.css(h.footerCount)},i,a,l):f.createElement("span",null);return f.createElement("div",w({className:o.css(h.footer)},u),r?f.createElement("figcaption",{className:o.css(h.footerCaption)},r):f.createElement("span",null),p)}function h(e,t){var n=t.theme,r=e.customControls,i=e.onClose,a=e.showCloseButton,l=e.closeButtonTitle,c=x(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),u=o.StyleSheet.create(s(T,n));return f.createElement("div",w({className:o.css(u.header)},c),r||f.createElement("span",null),!!a&&f.createElement("button",{title:l,className:o.css(u.close),onClick:i},f.createElement(E,{fill:!!n.close&&n.close.fill||g.close.fill,type:"close"})))}function p(e,t){var n=e.index,r=e.src,i=e.thumbnail,a=e.active,l=e.onClick,c=t.theme,u=i||r,h=o.StyleSheet.create(s(z,c));return f.createElement("div",{className:o.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),l(n)},style:{backgroundImage:'url("'+u+'")'}})}function d(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}function m(e){var t=e.srcSet||e.srcset;return Array.isArray(t)?t.join():t}e=e&&e.hasOwnProperty("default")?e.default:e;var f="default"in t?t.default:t;r=r&&r.hasOwnProperty("default")?r.default:r;var g={};g.container={background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},g.header={height:40},g.close={fill:"white"},g.footer={color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},g.thumbnail={activeBorderColor:"white",size:50,gutter:2},g.arrow={background:"none",fill:"white",height:120};var v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},y=(function(){function e(e){this.value=e}function t(t){function n(o,i){try{var a=t[o](i),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(a.done?"return":"normal",a.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?n(o.key,o.arg):i=null}var o,i;this._invoke=function(e,t){return new Promise(function(r,a){var s={key:e,arg:t,resolve:r,reject:a,next:null};i?i=i.next=s:(o=i=s,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),b=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),w=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},k=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},x=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},C=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},I={arrowLeft:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"/>\n\t</svg>'},arrowRight:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"/>\n\t</svg>'},close:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">\n\t\t<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>\n\t</svg>'}},E=function(e){var t=e.fill,n=e.type,r=x(e,["fill","type"]),o=I[n];return f.createElement("span",w({dangerouslySetInnerHTML:{__html:o(t)}},r))};E.defaultProps={fill:"white"},l.defaultProps={size:"medium"},l.contextTypes={theme:e.object.isRequired};var S={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:g.arrow.height,marginTop:g.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:g.thumbnail.size,marginTop:g.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:g.container.gutter.horizontal},arrow__direction__left:{left:g.container.gutter.horizontal}};c.contextTypes={theme:e.object.isRequired};var _={container:{alignItems:"center",backgroundColor:g.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:g.container.gutter.vertical,paddingLeft:g.container.gutter.horizontal,paddingRight:g.container.gutter.horizontal,paddingTop:g.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:g.container.zIndex}};u.contextTypes={theme:e.object.isRequired};var L={footer:{boxSizing:"border-box",color:g.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:g.footer.gutter.vertical,paddingLeft:g.footer.gutter.horizontal,paddingRight:g.footer.gutter.horizontal,paddingTop:g.footer.gutter.vertical},footerCount:{color:g.footer.count.color,fontSize:g.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};h.contextTypes={theme:e.object.isRequired};var T={header:{display:"flex",justifyContent:"space-between",height:g.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",zIndex:1,height:40,marginRight:-10,padding:10,width:40}};p.contextTypes={theme:e.object.isRequired};var z={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:g.thumbnail.size,margin:g.thumbnail.gutter,overflow:"hidden",width:g.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+g.thumbnail.activeBorderColor}},P=o.StyleSheet.create({paginatedThumbnails:{bottom:g.container.gutter.vertical,height:g.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),N={height:g.thumbnail.size+2*g.thumbnail.gutter,width:40},O=function(e){function t(e){y(this,t);var n=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return k(t,e),b(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,n=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-n)}},{key:"setFirst",value:function(e,t){var n=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),n!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,n=t.images,r=2*t.offset+1;return e<0?0:e+r>n.length?n.length-r:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:f.createElement(l,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:N,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,n=e.images,r=2*t+1;return this.getFirst()+r>=n.length?null:f.createElement(l,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:N,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,n=e.currentImage,r=e.onClickThumbnail,i=2*e.offset+1,a=[],s=0;return t.length<=i?a=t:(s=this.getFirst(),a=t.slice(s,s+i)),f.createElement("div",{className:o.css(P.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return f.createElement(p,w({key:s+t},e,{index:s+t,onClick:r,active:s+t===n}))}),this.renderArrowNext())}}]),t}(t.Component),j=function(e){function n(){return y(this,n),C(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return k(n,e),b(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),n}(t.Component);j.childContextTypes={theme:e.object};var R=function(e){function t(){y(this,t);var e=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return k(t,e),b(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){a.render(f.createElement(j,{context:this.context},f.createElement("div",null,f.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),f.createElement(i.TransitionGroup,this.props,f.createElement(i.CSSTransition,{timeout:{enter:200,exit:200},classNames:"fade"},this.props.children)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){a.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);R.contextTypes={theme:e.object.isRequired};var B={"0%":{top:"50%",left:"50%",width:0,height:0,opacity:1},"100%":{top:0,left:0,width:"100%",height:"100%",opacity:0}},A=function(e){var t=e.color,n=e.size;return{spinner:{display:"inline-block",position:"relative",width:n,height:n},ripple:{position:"absolute",border:"4px solid "+t,opacity:1,borderRadius:"50%",animationName:B,animationDuration:"1s",animationTimingFunction:"cubic-bezier(0, 0.2, 0.8, 1)",animationIterationCount:"infinite"}}},F=!("undefined"==typeof window||!window.document||!window.document.createElement),D=function(e){function t(e){y(this,t);var r=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.theme=s(g,e.theme),r.classes=n.StyleSheet.create(s(q,r.theme)),r.state={imageLoaded:!1},d.call(r,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded"]),r}return k(t,e),b(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&(this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),"number"==typeof this.props.currentImage&&this.preloadImage(this.props.currentImage,this.handleImageLoaded))}},{key:"componentWillReceiveProps",value:function(e){if(F){if(e.preloadNextImage){var t=this.props.currentImage,n=e.currentImage+1,r=e.currentImage-1,o=void 0;t&&e.currentImage>t?o=n:t&&e.currentImage<t&&(o=r),o?this.preloadImage(o):(this.preloadImage(r),this.preloadImage(n))}if(this.props.currentImage!==e.currentImage||!this.props.isOpen&&e.isOpen){var i=this.preloadImageData(e.images[e.currentImage],this.handleImageLoaded);i&&this.setState({imageLoaded:i.complete})}!this.props.isOpen&&e.isOpen&&e.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!e.isOpen&&e.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}}},{key:"componentWillUnmount",value:function(){this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}},{key:"preloadImage",value:function(e,t){return this.preloadImageData(this.props.images[e],t)}},{key:"preloadImageData",value:function(e,t){if(e){var n=new Image,r=m(e);return n.onerror=t,n.onload=t,n.src=e.src,r&&(n.srcset=r),n}}},{key:"gotoNext",value:function(e){var t=this.props,n=t.currentImage,r=t.images;this.state.imageLoaded&&n!==r.length-1&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickNext())}},{key:"gotoPrev",value:function(e){var t=this.props.currentImage;this.state.imageLoaded&&0!==t&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickPrev())}},{key:"closeBackdrop",value:function(e){"lightboxBackdrop"!==e.target.id&&"FIGURE"!==e.target.tagName||this.props.onClose()}},{key:"handleKeyboardInput",value:function(e){return 37===e.keyCode?(this.gotoPrev(e),!0):39===e.keyCode?(this.gotoNext(e),!0):27===e.keyCode&&(this.props.onClose(),!0)}},{key:"handleImageLoaded",value:function(){this.setState({imageLoaded:!0})}},{key:"renderArrowPrev",value:function(){return 0===this.props.currentImage?null:f.createElement(l,{direction:"left",icon:"arrowLeft",onClick:this.gotoPrev,title:this.props.leftArrowTitle,type:"button"})}},{key:"renderArrowNext",value:function(){return this.props.currentImage===this.props.images.length-1?null:f.createElement(l,{direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"})}},{key:"renderDialog",value:function(){var e=this.props,t=e.backdropClosesModal,o=e.isOpen,i=e.showThumbnails,a=e.width,s=this.state.imageLoaded;if(!o)return f.createElement("span",{key:"closed"});var l=0;return i&&(l=this.theme.thumbnail.size+this.theme.container.gutter.vertical),f.createElement(c,{key:"open",onClick:t&&this.closeBackdrop,onTouchEnd:t&&this.closeBackdrop},f.createElement("div",null,f.createElement("div",{className:n.css(this.classes.content),style:{marginBottom:l,maxWidth:a}},s&&this.renderHeader(),this.renderImages(),this.renderSpinner(),s&&this.renderFooter()),s&&this.renderThumbnails(),s&&this.renderArrowPrev(),s&&this.renderArrowNext(),this.props.preventScroll&&f.createElement(r,null)))}},{key:"renderImages",value:function(){var e=this.props,t=e.currentImage,r=e.images,o=e.onClickImage,i=e.showThumbnails,a=this.state.imageLoaded;if(!r||!r.length)return null;var s=r[t],l=m(s),c=l?"100vw":null,u=i?this.theme.thumbnail.size:0,h=this.theme.header.height+this.theme.footer.height+u+this.theme.container.gutter.vertical+"px";return f.createElement("figure",{className:n.css(this.classes.figure)},f.createElement("img",{className:n.css(this.classes.image,a&&this.classes.imageLoaded),onClick:o,sizes:c,alt:s.alt,src:s.src,srcSet:l,style:{cursor:o?"pointer":"auto",maxHeight:"calc(100vh - "+h+")"}}))}},{key:"renderThumbnails",value:function(){var e=this.props,t=e.images,n=e.currentImage,r=e.onClickThumbnail,o=e.showThumbnails,i=e.thumbnailOffset;if(o)return f.createElement(O,{currentImage:n,images:t,offset:i,onClickThumbnail:r})}},{key:"renderHeader",value:function(){var e=this.props,t=e.closeButtonTitle,n=e.customControls,r=e.onClose,o=e.showCloseButton;return f.createElement(h,{customControls:n,onClose:r,showCloseButton:o,closeButtonTitle:t})}},{key:"renderFooter",value:function(){var e=this.props,t=e.currentImage,n=e.images,r=e.imageCountSeparator,o=e.showImageCount;return n&&n.length?f.createElement(u,{caption:n[t].caption,countCurrent:t+1,countSeparator:r,countTotal:n.length,showCount:o}):null}},{key:"renderSpinner",value:function(){var e=this.props,t=e.spinner,r=e.spinnerColor,o=e.spinnerSize,i=this.state.imageLoaded,a=t;return f.createElement("div",{className:n.css(this.classes.spinner,!i&&this.classes.spinnerActive)},f.createElement(a,{color:r,size:o}))}},{key:"render",value:function(){return f.createElement(R,null,this.renderDialog())}}]),t}(t.Component);D.defaultProps={closeButtonTitle:"Close (Esc)",currentImage:0,enableKeyboardInput:!0,imageCountSeparator:" of ",leftArrowTitle:"Previous (Left arrow key)",onClickShowNextImage:!0,preloadNextImage:!0,preventScroll:!0,rightArrowTitle:"Next (Right arrow key)",showCloseButton:!0,showImageCount:!0,spinner:function(e){var t=o.StyleSheet.create(A(e));return f.createElement("div",{className:o.css(t.spinner)},f.createElement("div",{className:o.css(t.ripple)}))},spinnerColor:"white",spinnerSize:100,theme:{},thumbnailOffset:2,width:1024},D.childContextTypes={theme:e.object.isRequired};var q={content:{position:"relative"},figure:{margin:0},image:{display:"block",height:"auto",margin:"0 auto",maxWidth:"100%",WebkitTouchCallout:"none",userSelect:"none",opacity:0,transition:"opacity 0.3s"},imageLoaded:{opacity:1},spinner:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",opacity:0,transition:"opacity 0.3s",pointerEvents:"none"},spinnerActive:{opacity:1}};return D});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","aphrodite/no-important","react-transition-group","react-dom"],t):e.Lightbox=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,n,o,r,i,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var s="default"in t?t.default:t;o=o&&o.hasOwnProperty("default")?o.default:o;var l={container:{background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},header:{height:40},close:{fill:"white"},footer:{color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},thumbnail:{activeBorderColor:"white",size:50,gutter:2},arrow:{background:"none",fill:"white",height:120}},c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=(function(){function e(e){this.value=e}function t(t){var n,o;function r(n,o){try{var a=t[n](o),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){r("next",e)},function(e){r("throw",e)}):i(a.done?"return":"normal",a.value)}catch(e){i("throw",e)}}function i(e,t){switch(e){case"return":n.resolve({value:t,done:!0});break;case"throw":n.reject(t);break;default:n.resolve({value:t,done:!1})}(n=n.next)?r(n.key,n.arg):o=null}this._invoke=function(e,t){return new Promise(function(i,a){var s={key:e,arg:t,resolve:i,reject:a,next:null};o?o=o.next=s:(n=o=s,r(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),h=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},d=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},m=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},f=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};function g(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},e);return Object.keys(t).forEach(function(o){"object"===c(t[o])&&t[o]&&e[o]?n[o]=g(e[o],t[o]):n[o]=t[o]}),n}var v={arrowLeft:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"/>\n\t</svg>'},arrowRight:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"/>\n\t</svg>'},close:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">\n\t\t<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>\n\t</svg>'}},y=function(e){var t=e.fill,n=e.type,o=m(e,["fill","type"]),r=v[n];return s.createElement("span",p({dangerouslySetInnerHTML:{__html:r(t)}},o))};function b(e,t){var n=t.theme,o=e.direction,i=e.icon,a=e.onClick,c=e.size,u=m(e,["direction","icon","onClick","size"]),h=r.StyleSheet.create(g(w,n));return s.createElement("button",p({type:"button",className:r.css(h.arrow,h["arrow__direction__"+o],c&&h["arrow__size__"+c]),onClick:a,onTouchEnd:a},u),s.createElement(y,{fill:!!n.arrow&&n.arrow.fill||l.arrow.fill,type:i}))}y.defaultProps={fill:"white"},b.defaultProps={size:"medium"},b.contextTypes={theme:e.object.isRequired};var w={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:l.arrow.height,marginTop:l.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:l.thumbnail.size,marginTop:l.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:l.container.gutter.horizontal},arrow__direction__left:{left:l.container.gutter.horizontal}};function k(e,t){var n=t.theme,o=m(e,[]),i=r.StyleSheet.create(g(x,n));return s.createElement("div",p({id:"lightboxBackdrop",className:r.css(i.container)},o))}k.contextTypes={theme:e.object.isRequired};var x={container:{alignItems:"center",backgroundColor:l.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:l.container.gutter.vertical,paddingLeft:l.container.gutter.horizontal,paddingRight:l.container.gutter.horizontal,paddingTop:l.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:l.container.zIndex}};function C(e,t){var n=t.theme,o=e.caption,i=e.countCurrent,a=e.countSeparator,l=e.countTotal,c=e.showCount,u=m(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!o&&!c)return null;var h=r.StyleSheet.create(g(I,n)),d=c?s.createElement("div",{className:r.css(h.footerCount)},i,a,l):s.createElement("span",null);return s.createElement("div",p({className:r.css(h.footer)},u),o?s.createElement("figcaption",{className:r.css(h.footerCaption)},o):s.createElement("span",null),d)}C.contextTypes={theme:e.object.isRequired};var I={footer:{boxSizing:"border-box",color:l.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:l.footer.gutter.vertical,paddingLeft:l.footer.gutter.horizontal,paddingRight:l.footer.gutter.horizontal,paddingTop:l.footer.gutter.vertical},footerCount:{color:l.footer.count.color,fontSize:l.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};function E(e,t){var n=t.theme,o=e.customControls,i=e.onClose,a=e.showCloseButton,c=e.closeButtonTitle,u=m(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),h=r.StyleSheet.create(g(S,n));return s.createElement("div",p({className:r.css(h.header)},u),o||s.createElement("span",null),!!a&&s.createElement("button",{title:c,className:r.css(h.close),onClick:i},s.createElement(y,{fill:!!n.close&&n.close.fill||l.close.fill,type:"close"})))}E.contextTypes={theme:e.object.isRequired};var S={header:{display:"flex",justifyContent:"space-between",height:l.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",zIndex:1,height:40,marginRight:-10,padding:10,width:40}};function _(e,t){var n=e.index,o=e.src,i=e.thumbnail,a=e.active,l=e.onClick,c=t.theme,u=i||o,h=r.StyleSheet.create(g(T,c));return s.createElement("div",{className:r.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),l(n)},style:{backgroundImage:'url("'+u+'")'}})}_.contextTypes={theme:e.object.isRequired};var T={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:l.thumbnail.size,margin:l.thumbnail.gutter,overflow:"hidden",width:l.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+l.thumbnail.activeBorderColor}},L=r.StyleSheet.create({paginatedThumbnails:{bottom:l.container.gutter.vertical,height:l.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),z={height:l.thumbnail.size+2*l.thumbnail.gutter,width:40},P=function(e){function t(e){u(this,t);var n=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return d(t,e),h(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,n=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-n)}},{key:"setFirst",value:function(e,t){var n=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),n!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,n=t.images,o=2*t.offset+1;return e<0?0:e+o>n.length?n.length-o:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:s.createElement(b,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:z,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,n=e.images,o=2*t+1;return this.getFirst()+o>=n.length?null:s.createElement(b,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:z,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,n=e.currentImage,o=e.onClickThumbnail,i=2*e.offset+1,a=[],l=0;return t.length<=i?a=t:(l=this.getFirst(),a=t.slice(l,l+i)),s.createElement("div",{className:r.css(L.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return s.createElement(_,p({key:l+t},e,{index:l+t,onClick:o,active:l+t===n}))}),this.renderArrowNext())}}]),t}(t.Component),N=function(e){function n(){return u(this,n),f(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return d(n,e),h(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),n}(t.Component);N.childContextTypes={theme:e.object};var O=function(e){function t(){u(this,t);var e=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return d(t,e),h(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){a.render(s.createElement(N,{context:this.context},s.createElement("div",null,s.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),s.createElement(i.TransitionGroup,this.props,s.createElement(i.CSSTransition,{timeout:{enter:200,exit:200},classNames:"fade"},this.props.children)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){a.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);O.contextTypes={theme:e.object.isRequired};var j={"0%":{top:"50%",left:"50%",width:0,height:0,opacity:1},"100%":{top:0,left:0,width:"100%",height:"100%",opacity:0}},R=function(e){var t=e.color,n=e.size;return{spinner:{display:"inline-block",position:"relative",width:n,height:n},ripple:{position:"absolute",border:"4px solid "+t,opacity:1,borderRadius:"50%",animationName:j,animationDuration:"1s",animationTimingFunction:"cubic-bezier(0, 0.2, 0.8, 1)",animationIterationCount:"infinite"}}};var B=!("undefined"==typeof window||!window.document||!window.document.createElement);function A(e){var t=e.srcSet||e.srcset;return Array.isArray(t)?t.join():t}var F=function(e){function t(e){u(this,t);var o=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.theme=g(l,e.theme),o.classes=n.StyleSheet.create(g(D,o.theme)),o.state={imageLoaded:!1},function(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}.call(o,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded"]),o}return d(t,e),h(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&(this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),"number"==typeof this.props.currentImage&&this.preloadImage(this.props.currentImage,this.handleImageLoaded))}},{key:"componentWillReceiveProps",value:function(e){if(B){if(e.preloadNextImage){var t=this.props.currentImage,n=e.currentImage+1,o=e.currentImage-1,r=void 0;t&&e.currentImage>t?r=n:t&&e.currentImage<t&&(r=o),r?this.preloadImage(r):(this.preloadImage(o),this.preloadImage(n))}if(this.props.currentImage!==e.currentImage||!this.props.isOpen&&e.isOpen){var i=this.preloadImageData(e.images[e.currentImage],this.handleImageLoaded);i&&this.setState({imageLoaded:i.complete})}!this.props.isOpen&&e.isOpen&&e.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!e.isOpen&&e.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}}},{key:"componentWillUnmount",value:function(){this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}},{key:"preloadImage",value:function(e,t){return this.preloadImageData(this.props.images[e],t)}},{key:"preloadImageData",value:function(e,t){if(e){var n=new Image,o=A(e);return n.onerror=t,n.onload=t,n.src=e.src,o&&(n.srcset=o),n}}},{key:"gotoNext",value:function(e){var t=this.props,n=t.currentImage,o=t.images,r=t.loop;this.state.imageLoaded&&(r||n!==o.length-1)&&(e&&(e.preventDefault(),e.stopPropagation()),r&&n===o.length-1&&this.props.onClickThumbnail(0),this.props.onClickNext())}},{key:"gotoPrev",value:function(e){var t=this.props,n=t.currentImage,o=t.images,r=t.loop;this.state.imageLoaded&&(r||0!==n)&&(e&&(e.preventDefault(),e.stopPropagation()),r&&0===n&&this.props.onClickThumbnail(o.length-1),this.props.onClickPrev())}},{key:"closeBackdrop",value:function(e){"lightboxBackdrop"!==e.target.id&&"FIGURE"!==e.target.tagName||this.props.onClose()}},{key:"handleKeyboardInput",value:function(e){return 37===e.keyCode?(this.gotoPrev(e),!0):39===e.keyCode?(this.gotoNext(e),!0):27===e.keyCode&&(this.props.onClose(),!0)}},{key:"handleImageLoaded",value:function(){this.setState({imageLoaded:!0})}},{key:"renderArrowPrev",value:function(){return this.props.loop||0!==this.props.currentImage?s.createElement(b,{direction:"left",icon:"arrowLeft",onClick:this.gotoPrev,title:this.props.leftArrowTitle,type:"button"}):null}},{key:"renderArrowNext",value:function(){return this.props.loop||this.props.currentImage!==this.props.images.length-1?s.createElement(b,{direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"}):null}},{key:"renderDialog",value:function(){var e=this.props,t=e.backdropClosesModal,r=e.isOpen,i=e.showThumbnails,a=e.width,l=this.state.imageLoaded;if(!r)return s.createElement("span",{key:"closed"});var c=0;return i&&(c=this.theme.thumbnail.size+this.theme.container.gutter.vertical),s.createElement(k,{key:"open",onClick:t&&this.closeBackdrop,onTouchEnd:t&&this.closeBackdrop},s.createElement("div",null,s.createElement("div",{className:n.css(this.classes.content),style:{marginBottom:c,maxWidth:a}},l&&this.renderHeader(),this.renderImages(),this.renderSpinner(),l&&this.renderFooter()),l&&this.renderThumbnails(),l&&this.renderArrowPrev(),l&&this.renderArrowNext(),this.props.preventScroll&&s.createElement(o,null)))}},{key:"renderImages",value:function(){var e=this.props,t=e.currentImage,o=e.images,r=e.onClickImage,i=e.showThumbnails,a=this.state.imageLoaded;if(!o||!o.length)return null;var l=o[t],c=A(l),u=c?"100vw":null,h=i?this.theme.thumbnail.size:0,p=this.theme.header.height+this.theme.footer.height+h+this.theme.container.gutter.vertical+"px";return s.createElement("figure",{className:n.css(this.classes.figure)},s.createElement("img",{className:n.css(this.classes.image,a&&this.classes.imageLoaded),onClick:r,sizes:u,alt:l.alt,src:l.src,srcSet:c,style:{cursor:r?"pointer":"auto",maxHeight:"calc(100vh - "+p+")"}}))}},{key:"renderThumbnails",value:function(){var e=this.props,t=e.images,n=e.currentImage,o=e.onClickThumbnail,r=e.showThumbnails,i=e.thumbnailOffset;if(r)return s.createElement(P,{currentImage:n,images:t,offset:i,onClickThumbnail:o})}},{key:"renderHeader",value:function(){var e=this.props,t=e.closeButtonTitle,n=e.customControls,o=e.onClose,r=e.showCloseButton;return s.createElement(E,{customControls:n,onClose:o,showCloseButton:r,closeButtonTitle:t})}},{key:"renderFooter",value:function(){var e=this.props,t=e.currentImage,n=e.images,o=e.imageCountSeparator,r=e.showImageCount;return n&&n.length?s.createElement(C,{caption:n[t].caption,countCurrent:t+1,countSeparator:o,countTotal:n.length,showCount:r}):null}},{key:"renderSpinner",value:function(){var e=this.props,t=e.spinner,o=e.spinnerColor,r=e.spinnerSize,i=this.state.imageLoaded,a=t;return s.createElement("div",{className:n.css(this.classes.spinner,!i&&this.classes.spinnerActive)},s.createElement(a,{color:o,size:r}))}},{key:"render",value:function(){return s.createElement(O,null,this.renderDialog())}}]),t}(t.Component);F.defaultProps={closeButtonTitle:"Close (Esc)",currentImage:0,enableKeyboardInput:!0,imageCountSeparator:" of ",leftArrowTitle:"Previous (Left arrow key)",loop:!1,onClickShowNextImage:!0,preloadNextImage:!0,preventScroll:!0,rightArrowTitle:"Next (Right arrow key)",showCloseButton:!0,showImageCount:!0,spinner:function(e){var t=r.StyleSheet.create(R(e));return s.createElement("div",{className:r.css(t.spinner)},s.createElement("div",{className:r.css(t.ripple)}))},spinnerColor:"white",spinnerSize:100,theme:{},thumbnailOffset:2,width:1024},F.childContextTypes={theme:e.object.isRequired};var D={content:{position:"relative"},figure:{margin:0},image:{display:"block",height:"auto",margin:"0 auto",maxWidth:"100%",WebkitTouchCallout:"none",userSelect:"none",opacity:0,transition:"opacity 0.3s"},imageLoaded:{opacity:1},spinner:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",opacity:0,transition:"opacity 0.3s",pointerEvents:"none"},spinnerActive:{opacity:1}};return F});
diff --git a/examples/dist/example.css b/examples/dist/example.css
index f7504bb8..7853b305 100644
--- a/examples/dist/example.css
+++ b/examples/dist/example.css
@@ -58,7 +58,7 @@ h6,
   color: black;
   font-weight: 500;
   line-height: 1;
-  margin-bottom: .66em;
+  margin-bottom: 0.66em;
   margin-top: 0;
 }
 h1,
@@ -85,11 +85,11 @@ h4,
 }
 h5,
 .h5 {
-  font-size: .85em;
+  font-size: 0.85em;
 }
 h6,
 .h6 {
-  font-size: .75em;
+  font-size: 0.75em;
 }
 .page-header {
   padding: 20px 0;
@@ -167,7 +167,7 @@ h6,
   margin-bottom: 40px;
 }
 .hint {
-  font-size: .85em;
+  font-size: 0.85em;
   margin: 15px 0;
   color: #666;
 }
@@ -181,7 +181,7 @@ kbd {
   color: #666;
   display: inline-block;
   font-family: Consolas, "Liberation Mono", Courier, monospace;
-  font-size: .85em;
+  font-size: 0.85em;
   font-weight: 500;
   line-height: inherit;
   padding: 1px 4px;
diff --git a/lib/Lightbox.js b/lib/Lightbox.js
index 84ef8469..f9e04c29 100644
--- a/lib/Lightbox.js
+++ b/lib/Lightbox.js
@@ -198,33 +198,45 @@ var Lightbox = function (_Component) {
 		value: function gotoNext(event) {
 			var _props = this.props,
 			    currentImage = _props.currentImage,
-			    images = _props.images;
+			    images = _props.images,
+			    loop = _props.loop;
 			var imageLoaded = this.state.imageLoaded;
 
 
-			if (!imageLoaded || currentImage === images.length - 1) return;
+			if (!imageLoaded || !loop && currentImage === images.length - 1) return;
 
 			if (event) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 
+			if (loop && currentImage === images.length - 1) {
+				this.props.onClickThumbnail(0);
+			}
+
 			this.props.onClickNext();
 		}
 	}, {
 		key: 'gotoPrev',
 		value: function gotoPrev(event) {
-			var currentImage = this.props.currentImage;
+			var _props2 = this.props,
+			    currentImage = _props2.currentImage,
+			    images = _props2.images,
+			    loop = _props2.loop;
 			var imageLoaded = this.state.imageLoaded;
 
 
-			if (!imageLoaded || currentImage === 0) return;
+			if (!imageLoaded || !loop && currentImage === 0) return;
 
 			if (event) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 
+			if (loop && currentImage === 0) {
+				this.props.onClickThumbnail(images.length - 1);
+			}
+
 			this.props.onClickPrev();
 		}
 	}, {
@@ -267,7 +279,7 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderArrowPrev',
 		value: function renderArrowPrev() {
-			if (this.props.currentImage === 0) return null;
+			if (!this.props.loop && this.props.currentImage === 0) return null;
 
 			return _react2.default.createElement(_Arrow2.default, {
 				direction: 'left',
@@ -280,7 +292,7 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderArrowNext',
 		value: function renderArrowNext() {
-			if (this.props.currentImage === this.props.images.length - 1) return null;
+			if (!this.props.loop && this.props.currentImage === this.props.images.length - 1) return null;
 
 			return _react2.default.createElement(_Arrow2.default, {
 				direction: 'right',
@@ -293,11 +305,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderDialog',
 		value: function renderDialog() {
-			var _props2 = this.props,
-			    backdropClosesModal = _props2.backdropClosesModal,
-			    isOpen = _props2.isOpen,
-			    showThumbnails = _props2.showThumbnails,
-			    width = _props2.width;
+			var _props3 = this.props,
+			    backdropClosesModal = _props3.backdropClosesModal,
+			    isOpen = _props3.isOpen,
+			    showThumbnails = _props3.showThumbnails,
+			    width = _props3.width;
 			var imageLoaded = this.state.imageLoaded;
 
 
@@ -336,11 +348,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderImages',
 		value: function renderImages() {
-			var _props3 = this.props,
-			    currentImage = _props3.currentImage,
-			    images = _props3.images,
-			    onClickImage = _props3.onClickImage,
-			    showThumbnails = _props3.showThumbnails;
+			var _props4 = this.props,
+			    currentImage = _props4.currentImage,
+			    images = _props4.images,
+			    onClickImage = _props4.onClickImage,
+			    showThumbnails = _props4.showThumbnails;
 			var imageLoaded = this.state.imageLoaded;
 
 
@@ -373,12 +385,12 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderThumbnails',
 		value: function renderThumbnails() {
-			var _props4 = this.props,
-			    images = _props4.images,
-			    currentImage = _props4.currentImage,
-			    onClickThumbnail = _props4.onClickThumbnail,
-			    showThumbnails = _props4.showThumbnails,
-			    thumbnailOffset = _props4.thumbnailOffset;
+			var _props5 = this.props,
+			    images = _props5.images,
+			    currentImage = _props5.currentImage,
+			    onClickThumbnail = _props5.onClickThumbnail,
+			    showThumbnails = _props5.showThumbnails,
+			    thumbnailOffset = _props5.thumbnailOffset;
 
 
 			if (!showThumbnails) return;
@@ -393,11 +405,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderHeader',
 		value: function renderHeader() {
-			var _props5 = this.props,
-			    closeButtonTitle = _props5.closeButtonTitle,
-			    customControls = _props5.customControls,
-			    onClose = _props5.onClose,
-			    showCloseButton = _props5.showCloseButton;
+			var _props6 = this.props,
+			    closeButtonTitle = _props6.closeButtonTitle,
+			    customControls = _props6.customControls,
+			    onClose = _props6.onClose,
+			    showCloseButton = _props6.showCloseButton;
 
 
 			return _react2.default.createElement(_Header2.default, {
@@ -410,11 +422,11 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderFooter',
 		value: function renderFooter() {
-			var _props6 = this.props,
-			    currentImage = _props6.currentImage,
-			    images = _props6.images,
-			    imageCountSeparator = _props6.imageCountSeparator,
-			    showImageCount = _props6.showImageCount;
+			var _props7 = this.props,
+			    currentImage = _props7.currentImage,
+			    images = _props7.images,
+			    imageCountSeparator = _props7.imageCountSeparator,
+			    showImageCount = _props7.showImageCount;
 
 
 			if (!images || !images.length) return null;
@@ -430,10 +442,10 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'renderSpinner',
 		value: function renderSpinner() {
-			var _props7 = this.props,
-			    spinner = _props7.spinner,
-			    spinnerColor = _props7.spinnerColor,
-			    spinnerSize = _props7.spinnerSize;
+			var _props8 = this.props,
+			    spinner = _props8.spinner,
+			    spinnerColor = _props8.spinnerColor,
+			    spinnerSize = _props8.spinnerSize;
 			var imageLoaded = this.state.imageLoaded;
 
 			var Spinner = spinner;
@@ -499,6 +511,7 @@ Lightbox.defaultProps = {
 	enableKeyboardInput: true,
 	imageCountSeparator: ' of ',
 	leftArrowTitle: 'Previous (Left arrow key)',
+	loop: false,
 	onClickShowNextImage: true,
 	preloadNextImage: true,
 	preventScroll: true,
diff --git a/package.json b/package.json
index 222ee3a3..f150a028 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-images",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "description": "A simple, responsive lightbox component for displaying an array of images with React.js",
   "main": "lib/Lightbox.js",
   "jsnext:main": "dist/react-images.es.js",

From 1732f071c8f8425b7feb005b681959513823c062 Mon Sep 17 00:00:00 2001
From: Dirk Pennings <dirkpennings@gmail.com>
Date: Fri, 24 Aug 2018 15:32:58 +0200
Subject: [PATCH 5/6] Removed duplicate code (caused keyboard bug)

---
 src/Lightbox.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/Lightbox.js b/src/Lightbox.js
index 4aadb18f..8072a51d 100644
--- a/src/Lightbox.js
+++ b/src/Lightbox.js
@@ -136,14 +136,10 @@ class Lightbox extends Component {
 			event.stopPropagation();
 		}
 
-		if (loop && currentImage === (images.length - 1)) {
-			this.props.onClickThumbnail(0);
-		}
-
 		this.props.onClickNext();
 	}
 	gotoPrev (event) {
-		const { currentImage, images, loop } = this.props;
+		const { currentImage, loop } = this.props;
 		const { imageLoaded } = this.state;
 
 		if (!imageLoaded || (!loop && currentImage === 0)) return;
@@ -153,10 +149,6 @@ class Lightbox extends Component {
 			event.stopPropagation();
 		}
 
-		if (loop && currentImage === 0) {
-			this.props.onClickThumbnail(images.length - 1);
-		}
-
 		this.props.onClickPrev();
 	}
 	closeBackdrop (event) {

From f5f600b1a43674ec49aab96cc4e0c94d9e1b67b8 Mon Sep 17 00:00:00 2001
From: Dirk Pennings <dirkpennings@gmail.com>
Date: Fri, 24 Aug 2018 15:35:02 +0200
Subject: [PATCH 6/6] Version bump to 0.5.21 and updated dist files

---
 dist/react-images.es.js  | 9 ---------
 dist/react-images.js     | 9 ---------
 dist/react-images.min.js | 2 +-
 lib/Lightbox.js          | 9 ---------
 package.json             | 2 +-
 5 files changed, 2 insertions(+), 29 deletions(-)

diff --git a/dist/react-images.es.js b/dist/react-images.es.js
index 44932323..c7d5e132 100644
--- a/dist/react-images.es.js
+++ b/dist/react-images.es.js
@@ -1136,10 +1136,6 @@ var Lightbox = function (_Component) {
 				event.stopPropagation();
 			}
 
-			if (loop && currentImage === images.length - 1) {
-				this.props.onClickThumbnail(0);
-			}
-
 			this.props.onClickNext();
 		}
 	}, {
@@ -1147,7 +1143,6 @@ var Lightbox = function (_Component) {
 		value: function gotoPrev(event) {
 			var _props2 = this.props,
 			    currentImage = _props2.currentImage,
-			    images = _props2.images,
 			    loop = _props2.loop;
 			var imageLoaded = this.state.imageLoaded;
 
@@ -1159,10 +1154,6 @@ var Lightbox = function (_Component) {
 				event.stopPropagation();
 			}
 
-			if (loop && currentImage === 0) {
-				this.props.onClickThumbnail(images.length - 1);
-			}
-
 			this.props.onClickPrev();
 		}
 	}, {
diff --git a/dist/react-images.js b/dist/react-images.js
index eb224063..c4de9169 100644
--- a/dist/react-images.js
+++ b/dist/react-images.js
@@ -1138,10 +1138,6 @@ var Lightbox = function (_Component) {
 				event.stopPropagation();
 			}
 
-			if (loop && currentImage === images.length - 1) {
-				this.props.onClickThumbnail(0);
-			}
-
 			this.props.onClickNext();
 		}
 	}, {
@@ -1149,7 +1145,6 @@ var Lightbox = function (_Component) {
 		value: function gotoPrev(event) {
 			var _props2 = this.props,
 			    currentImage = _props2.currentImage,
-			    images = _props2.images,
 			    loop = _props2.loop;
 			var imageLoaded = this.state.imageLoaded;
 
@@ -1161,10 +1156,6 @@ var Lightbox = function (_Component) {
 				event.stopPropagation();
 			}
 
-			if (loop && currentImage === 0) {
-				this.props.onClickThumbnail(images.length - 1);
-			}
-
 			this.props.onClickPrev();
 		}
 	}, {
diff --git a/dist/react-images.min.js b/dist/react-images.min.js
index b12c5a7e..cad60303 100644
--- a/dist/react-images.min.js
+++ b/dist/react-images.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","aphrodite/no-important","react-transition-group","react-dom"],t):e.Lightbox=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,n,o,r,i,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var s="default"in t?t.default:t;o=o&&o.hasOwnProperty("default")?o.default:o;var l={container:{background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},header:{height:40},close:{fill:"white"},footer:{color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},thumbnail:{activeBorderColor:"white",size:50,gutter:2},arrow:{background:"none",fill:"white",height:120}},c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=(function(){function e(e){this.value=e}function t(t){var n,o;function r(n,o){try{var a=t[n](o),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){r("next",e)},function(e){r("throw",e)}):i(a.done?"return":"normal",a.value)}catch(e){i("throw",e)}}function i(e,t){switch(e){case"return":n.resolve({value:t,done:!0});break;case"throw":n.reject(t);break;default:n.resolve({value:t,done:!1})}(n=n.next)?r(n.key,n.arg):o=null}this._invoke=function(e,t){return new Promise(function(i,a){var s={key:e,arg:t,resolve:i,reject:a,next:null};o?o=o.next=s:(n=o=s,r(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),h=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},d=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},m=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},f=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};function g(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},e);return Object.keys(t).forEach(function(o){"object"===c(t[o])&&t[o]&&e[o]?n[o]=g(e[o],t[o]):n[o]=t[o]}),n}var v={arrowLeft:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"/>\n\t</svg>'},arrowRight:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"/>\n\t</svg>'},close:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">\n\t\t<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>\n\t</svg>'}},y=function(e){var t=e.fill,n=e.type,o=m(e,["fill","type"]),r=v[n];return s.createElement("span",p({dangerouslySetInnerHTML:{__html:r(t)}},o))};function b(e,t){var n=t.theme,o=e.direction,i=e.icon,a=e.onClick,c=e.size,u=m(e,["direction","icon","onClick","size"]),h=r.StyleSheet.create(g(w,n));return s.createElement("button",p({type:"button",className:r.css(h.arrow,h["arrow__direction__"+o],c&&h["arrow__size__"+c]),onClick:a,onTouchEnd:a},u),s.createElement(y,{fill:!!n.arrow&&n.arrow.fill||l.arrow.fill,type:i}))}y.defaultProps={fill:"white"},b.defaultProps={size:"medium"},b.contextTypes={theme:e.object.isRequired};var w={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:l.arrow.height,marginTop:l.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:l.thumbnail.size,marginTop:l.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:l.container.gutter.horizontal},arrow__direction__left:{left:l.container.gutter.horizontal}};function k(e,t){var n=t.theme,o=m(e,[]),i=r.StyleSheet.create(g(x,n));return s.createElement("div",p({id:"lightboxBackdrop",className:r.css(i.container)},o))}k.contextTypes={theme:e.object.isRequired};var x={container:{alignItems:"center",backgroundColor:l.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:l.container.gutter.vertical,paddingLeft:l.container.gutter.horizontal,paddingRight:l.container.gutter.horizontal,paddingTop:l.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:l.container.zIndex}};function C(e,t){var n=t.theme,o=e.caption,i=e.countCurrent,a=e.countSeparator,l=e.countTotal,c=e.showCount,u=m(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!o&&!c)return null;var h=r.StyleSheet.create(g(I,n)),d=c?s.createElement("div",{className:r.css(h.footerCount)},i,a,l):s.createElement("span",null);return s.createElement("div",p({className:r.css(h.footer)},u),o?s.createElement("figcaption",{className:r.css(h.footerCaption)},o):s.createElement("span",null),d)}C.contextTypes={theme:e.object.isRequired};var I={footer:{boxSizing:"border-box",color:l.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:l.footer.gutter.vertical,paddingLeft:l.footer.gutter.horizontal,paddingRight:l.footer.gutter.horizontal,paddingTop:l.footer.gutter.vertical},footerCount:{color:l.footer.count.color,fontSize:l.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};function E(e,t){var n=t.theme,o=e.customControls,i=e.onClose,a=e.showCloseButton,c=e.closeButtonTitle,u=m(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),h=r.StyleSheet.create(g(S,n));return s.createElement("div",p({className:r.css(h.header)},u),o||s.createElement("span",null),!!a&&s.createElement("button",{title:c,className:r.css(h.close),onClick:i},s.createElement(y,{fill:!!n.close&&n.close.fill||l.close.fill,type:"close"})))}E.contextTypes={theme:e.object.isRequired};var S={header:{display:"flex",justifyContent:"space-between",height:l.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",zIndex:1,height:40,marginRight:-10,padding:10,width:40}};function _(e,t){var n=e.index,o=e.src,i=e.thumbnail,a=e.active,l=e.onClick,c=t.theme,u=i||o,h=r.StyleSheet.create(g(T,c));return s.createElement("div",{className:r.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),l(n)},style:{backgroundImage:'url("'+u+'")'}})}_.contextTypes={theme:e.object.isRequired};var T={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:l.thumbnail.size,margin:l.thumbnail.gutter,overflow:"hidden",width:l.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+l.thumbnail.activeBorderColor}},L=r.StyleSheet.create({paginatedThumbnails:{bottom:l.container.gutter.vertical,height:l.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),z={height:l.thumbnail.size+2*l.thumbnail.gutter,width:40},P=function(e){function t(e){u(this,t);var n=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return d(t,e),h(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,n=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-n)}},{key:"setFirst",value:function(e,t){var n=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),n!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,n=t.images,o=2*t.offset+1;return e<0?0:e+o>n.length?n.length-o:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:s.createElement(b,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:z,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,n=e.images,o=2*t+1;return this.getFirst()+o>=n.length?null:s.createElement(b,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:z,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,n=e.currentImage,o=e.onClickThumbnail,i=2*e.offset+1,a=[],l=0;return t.length<=i?a=t:(l=this.getFirst(),a=t.slice(l,l+i)),s.createElement("div",{className:r.css(L.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return s.createElement(_,p({key:l+t},e,{index:l+t,onClick:o,active:l+t===n}))}),this.renderArrowNext())}}]),t}(t.Component),N=function(e){function n(){return u(this,n),f(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return d(n,e),h(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),n}(t.Component);N.childContextTypes={theme:e.object};var O=function(e){function t(){u(this,t);var e=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return d(t,e),h(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){a.render(s.createElement(N,{context:this.context},s.createElement("div",null,s.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),s.createElement(i.TransitionGroup,this.props,s.createElement(i.CSSTransition,{timeout:{enter:200,exit:200},classNames:"fade"},this.props.children)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){a.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);O.contextTypes={theme:e.object.isRequired};var j={"0%":{top:"50%",left:"50%",width:0,height:0,opacity:1},"100%":{top:0,left:0,width:"100%",height:"100%",opacity:0}},R=function(e){var t=e.color,n=e.size;return{spinner:{display:"inline-block",position:"relative",width:n,height:n},ripple:{position:"absolute",border:"4px solid "+t,opacity:1,borderRadius:"50%",animationName:j,animationDuration:"1s",animationTimingFunction:"cubic-bezier(0, 0.2, 0.8, 1)",animationIterationCount:"infinite"}}};var B=!("undefined"==typeof window||!window.document||!window.document.createElement);function A(e){var t=e.srcSet||e.srcset;return Array.isArray(t)?t.join():t}var F=function(e){function t(e){u(this,t);var o=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.theme=g(l,e.theme),o.classes=n.StyleSheet.create(g(D,o.theme)),o.state={imageLoaded:!1},function(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}.call(o,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded"]),o}return d(t,e),h(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&(this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),"number"==typeof this.props.currentImage&&this.preloadImage(this.props.currentImage,this.handleImageLoaded))}},{key:"componentWillReceiveProps",value:function(e){if(B){if(e.preloadNextImage){var t=this.props.currentImage,n=e.currentImage+1,o=e.currentImage-1,r=void 0;t&&e.currentImage>t?r=n:t&&e.currentImage<t&&(r=o),r?this.preloadImage(r):(this.preloadImage(o),this.preloadImage(n))}if(this.props.currentImage!==e.currentImage||!this.props.isOpen&&e.isOpen){var i=this.preloadImageData(e.images[e.currentImage],this.handleImageLoaded);i&&this.setState({imageLoaded:i.complete})}!this.props.isOpen&&e.isOpen&&e.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!e.isOpen&&e.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}}},{key:"componentWillUnmount",value:function(){this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}},{key:"preloadImage",value:function(e,t){return this.preloadImageData(this.props.images[e],t)}},{key:"preloadImageData",value:function(e,t){if(e){var n=new Image,o=A(e);return n.onerror=t,n.onload=t,n.src=e.src,o&&(n.srcset=o),n}}},{key:"gotoNext",value:function(e){var t=this.props,n=t.currentImage,o=t.images,r=t.loop;this.state.imageLoaded&&(r||n!==o.length-1)&&(e&&(e.preventDefault(),e.stopPropagation()),r&&n===o.length-1&&this.props.onClickThumbnail(0),this.props.onClickNext())}},{key:"gotoPrev",value:function(e){var t=this.props,n=t.currentImage,o=t.images,r=t.loop;this.state.imageLoaded&&(r||0!==n)&&(e&&(e.preventDefault(),e.stopPropagation()),r&&0===n&&this.props.onClickThumbnail(o.length-1),this.props.onClickPrev())}},{key:"closeBackdrop",value:function(e){"lightboxBackdrop"!==e.target.id&&"FIGURE"!==e.target.tagName||this.props.onClose()}},{key:"handleKeyboardInput",value:function(e){return 37===e.keyCode?(this.gotoPrev(e),!0):39===e.keyCode?(this.gotoNext(e),!0):27===e.keyCode&&(this.props.onClose(),!0)}},{key:"handleImageLoaded",value:function(){this.setState({imageLoaded:!0})}},{key:"renderArrowPrev",value:function(){return this.props.loop||0!==this.props.currentImage?s.createElement(b,{direction:"left",icon:"arrowLeft",onClick:this.gotoPrev,title:this.props.leftArrowTitle,type:"button"}):null}},{key:"renderArrowNext",value:function(){return this.props.loop||this.props.currentImage!==this.props.images.length-1?s.createElement(b,{direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"}):null}},{key:"renderDialog",value:function(){var e=this.props,t=e.backdropClosesModal,r=e.isOpen,i=e.showThumbnails,a=e.width,l=this.state.imageLoaded;if(!r)return s.createElement("span",{key:"closed"});var c=0;return i&&(c=this.theme.thumbnail.size+this.theme.container.gutter.vertical),s.createElement(k,{key:"open",onClick:t&&this.closeBackdrop,onTouchEnd:t&&this.closeBackdrop},s.createElement("div",null,s.createElement("div",{className:n.css(this.classes.content),style:{marginBottom:c,maxWidth:a}},l&&this.renderHeader(),this.renderImages(),this.renderSpinner(),l&&this.renderFooter()),l&&this.renderThumbnails(),l&&this.renderArrowPrev(),l&&this.renderArrowNext(),this.props.preventScroll&&s.createElement(o,null)))}},{key:"renderImages",value:function(){var e=this.props,t=e.currentImage,o=e.images,r=e.onClickImage,i=e.showThumbnails,a=this.state.imageLoaded;if(!o||!o.length)return null;var l=o[t],c=A(l),u=c?"100vw":null,h=i?this.theme.thumbnail.size:0,p=this.theme.header.height+this.theme.footer.height+h+this.theme.container.gutter.vertical+"px";return s.createElement("figure",{className:n.css(this.classes.figure)},s.createElement("img",{className:n.css(this.classes.image,a&&this.classes.imageLoaded),onClick:r,sizes:u,alt:l.alt,src:l.src,srcSet:c,style:{cursor:r?"pointer":"auto",maxHeight:"calc(100vh - "+p+")"}}))}},{key:"renderThumbnails",value:function(){var e=this.props,t=e.images,n=e.currentImage,o=e.onClickThumbnail,r=e.showThumbnails,i=e.thumbnailOffset;if(r)return s.createElement(P,{currentImage:n,images:t,offset:i,onClickThumbnail:o})}},{key:"renderHeader",value:function(){var e=this.props,t=e.closeButtonTitle,n=e.customControls,o=e.onClose,r=e.showCloseButton;return s.createElement(E,{customControls:n,onClose:o,showCloseButton:r,closeButtonTitle:t})}},{key:"renderFooter",value:function(){var e=this.props,t=e.currentImage,n=e.images,o=e.imageCountSeparator,r=e.showImageCount;return n&&n.length?s.createElement(C,{caption:n[t].caption,countCurrent:t+1,countSeparator:o,countTotal:n.length,showCount:r}):null}},{key:"renderSpinner",value:function(){var e=this.props,t=e.spinner,o=e.spinnerColor,r=e.spinnerSize,i=this.state.imageLoaded,a=t;return s.createElement("div",{className:n.css(this.classes.spinner,!i&&this.classes.spinnerActive)},s.createElement(a,{color:o,size:r}))}},{key:"render",value:function(){return s.createElement(O,null,this.renderDialog())}}]),t}(t.Component);F.defaultProps={closeButtonTitle:"Close (Esc)",currentImage:0,enableKeyboardInput:!0,imageCountSeparator:" of ",leftArrowTitle:"Previous (Left arrow key)",loop:!1,onClickShowNextImage:!0,preloadNextImage:!0,preventScroll:!0,rightArrowTitle:"Next (Right arrow key)",showCloseButton:!0,showImageCount:!0,spinner:function(e){var t=r.StyleSheet.create(R(e));return s.createElement("div",{className:r.css(t.spinner)},s.createElement("div",{className:r.css(t.ripple)}))},spinnerColor:"white",spinnerSize:100,theme:{},thumbnailOffset:2,width:1024},F.childContextTypes={theme:e.object.isRequired};var D={content:{position:"relative"},figure:{margin:0},image:{display:"block",height:"auto",margin:"0 auto",maxWidth:"100%",WebkitTouchCallout:"none",userSelect:"none",opacity:0,transition:"opacity 0.3s"},imageLoaded:{opacity:1},spinner:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",opacity:0,transition:"opacity 0.3s",pointerEvents:"none"},spinnerActive:{opacity:1}};return F});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","aphrodite/no-important","react-transition-group","react-dom"],t):e.Lightbox=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,n,o,r,i,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var s="default"in t?t.default:t;o=o&&o.hasOwnProperty("default")?o.default:o;var l={container:{background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},header:{height:40},close:{fill:"white"},footer:{color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},thumbnail:{activeBorderColor:"white",size:50,gutter:2},arrow:{background:"none",fill:"white",height:120}},c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=(function(){function e(e){this.value=e}function t(t){var n,o;function r(n,o){try{var a=t[n](o),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){r("next",e)},function(e){r("throw",e)}):i(a.done?"return":"normal",a.value)}catch(e){i("throw",e)}}function i(e,t){switch(e){case"return":n.resolve({value:t,done:!0});break;case"throw":n.reject(t);break;default:n.resolve({value:t,done:!1})}(n=n.next)?r(n.key,n.arg):o=null}this._invoke=function(e,t){return new Promise(function(i,a){var s={key:e,arg:t,resolve:i,reject:a,next:null};o?o=o.next=s:(n=o=s,r(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),h=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},d=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},m=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},f=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};function g(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},e);return Object.keys(t).forEach(function(o){"object"===c(t[o])&&t[o]&&e[o]?n[o]=g(e[o],t[o]):n[o]=t[o]}),n}var v={arrowLeft:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"/>\n\t</svg>'},arrowRight:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"/>\n\t</svg>'},close:function(e){return'<svg fill="'+e+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">\n\t\t<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>\n\t</svg>'}},y=function(e){var t=e.fill,n=e.type,o=m(e,["fill","type"]),r=v[n];return s.createElement("span",p({dangerouslySetInnerHTML:{__html:r(t)}},o))};function b(e,t){var n=t.theme,o=e.direction,i=e.icon,a=e.onClick,c=e.size,u=m(e,["direction","icon","onClick","size"]),h=r.StyleSheet.create(g(w,n));return s.createElement("button",p({type:"button",className:r.css(h.arrow,h["arrow__direction__"+o],c&&h["arrow__size__"+c]),onClick:a,onTouchEnd:a},u),s.createElement(y,{fill:!!n.arrow&&n.arrow.fill||l.arrow.fill,type:i}))}y.defaultProps={fill:"white"},b.defaultProps={size:"medium"},b.contextTypes={theme:e.object.isRequired};var w={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:l.arrow.height,marginTop:l.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:l.thumbnail.size,marginTop:l.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:l.container.gutter.horizontal},arrow__direction__left:{left:l.container.gutter.horizontal}};function k(e,t){var n=t.theme,o=m(e,[]),i=r.StyleSheet.create(g(x,n));return s.createElement("div",p({id:"lightboxBackdrop",className:r.css(i.container)},o))}k.contextTypes={theme:e.object.isRequired};var x={container:{alignItems:"center",backgroundColor:l.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:l.container.gutter.vertical,paddingLeft:l.container.gutter.horizontal,paddingRight:l.container.gutter.horizontal,paddingTop:l.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:l.container.zIndex}};function C(e,t){var n=t.theme,o=e.caption,i=e.countCurrent,a=e.countSeparator,l=e.countTotal,c=e.showCount,u=m(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!o&&!c)return null;var h=r.StyleSheet.create(g(I,n)),d=c?s.createElement("div",{className:r.css(h.footerCount)},i,a,l):s.createElement("span",null);return s.createElement("div",p({className:r.css(h.footer)},u),o?s.createElement("figcaption",{className:r.css(h.footerCaption)},o):s.createElement("span",null),d)}C.contextTypes={theme:e.object.isRequired};var I={footer:{boxSizing:"border-box",color:l.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:l.footer.gutter.vertical,paddingLeft:l.footer.gutter.horizontal,paddingRight:l.footer.gutter.horizontal,paddingTop:l.footer.gutter.vertical},footerCount:{color:l.footer.count.color,fontSize:l.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};function E(e,t){var n=t.theme,o=e.customControls,i=e.onClose,a=e.showCloseButton,c=e.closeButtonTitle,u=m(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),h=r.StyleSheet.create(g(S,n));return s.createElement("div",p({className:r.css(h.header)},u),o||s.createElement("span",null),!!a&&s.createElement("button",{title:c,className:r.css(h.close),onClick:i},s.createElement(y,{fill:!!n.close&&n.close.fill||l.close.fill,type:"close"})))}E.contextTypes={theme:e.object.isRequired};var S={header:{display:"flex",justifyContent:"space-between",height:l.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",zIndex:1,height:40,marginRight:-10,padding:10,width:40}};function _(e,t){var n=e.index,o=e.src,i=e.thumbnail,a=e.active,l=e.onClick,c=t.theme,u=i||o,h=r.StyleSheet.create(g(L,c));return s.createElement("div",{className:r.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),l(n)},style:{backgroundImage:'url("'+u+'")'}})}_.contextTypes={theme:e.object.isRequired};var L={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:l.thumbnail.size,margin:l.thumbnail.gutter,overflow:"hidden",width:l.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+l.thumbnail.activeBorderColor}},T=r.StyleSheet.create({paginatedThumbnails:{bottom:l.container.gutter.vertical,height:l.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),z={height:l.thumbnail.size+2*l.thumbnail.gutter,width:40},P=function(e){function t(e){u(this,t);var n=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return d(t,e),h(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,n=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-n)}},{key:"setFirst",value:function(e,t){var n=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),n!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,n=t.images,o=2*t.offset+1;return e<0?0:e+o>n.length?n.length-o:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:s.createElement(b,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:z,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,n=e.images,o=2*t+1;return this.getFirst()+o>=n.length?null:s.createElement(b,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:z,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,n=e.currentImage,o=e.onClickThumbnail,i=2*e.offset+1,a=[],l=0;return t.length<=i?a=t:(l=this.getFirst(),a=t.slice(l,l+i)),s.createElement("div",{className:r.css(T.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return s.createElement(_,p({key:l+t},e,{index:l+t,onClick:o,active:l+t===n}))}),this.renderArrowNext())}}]),t}(t.Component),N=function(e){function n(){return u(this,n),f(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return d(n,e),h(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),n}(t.Component);N.childContextTypes={theme:e.object};var O=function(e){function t(){u(this,t);var e=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return d(t,e),h(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){a.render(s.createElement(N,{context:this.context},s.createElement("div",null,s.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),s.createElement(i.TransitionGroup,this.props,s.createElement(i.CSSTransition,{timeout:{enter:200,exit:200},classNames:"fade"},this.props.children)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){a.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);O.contextTypes={theme:e.object.isRequired};var j={"0%":{top:"50%",left:"50%",width:0,height:0,opacity:1},"100%":{top:0,left:0,width:"100%",height:"100%",opacity:0}},R=function(e){var t=e.color,n=e.size;return{spinner:{display:"inline-block",position:"relative",width:n,height:n},ripple:{position:"absolute",border:"4px solid "+t,opacity:1,borderRadius:"50%",animationName:j,animationDuration:"1s",animationTimingFunction:"cubic-bezier(0, 0.2, 0.8, 1)",animationIterationCount:"infinite"}}};var B=!("undefined"==typeof window||!window.document||!window.document.createElement);function A(e){var t=e.srcSet||e.srcset;return Array.isArray(t)?t.join():t}var F=function(e){function t(e){u(this,t);var o=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.theme=g(l,e.theme),o.classes=n.StyleSheet.create(g(D,o.theme)),o.state={imageLoaded:!1},function(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}.call(o,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded"]),o}return d(t,e),h(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&(this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),"number"==typeof this.props.currentImage&&this.preloadImage(this.props.currentImage,this.handleImageLoaded))}},{key:"componentWillReceiveProps",value:function(e){if(B){if(e.preloadNextImage){var t=this.props.currentImage,n=e.currentImage+1,o=e.currentImage-1,r=void 0;t&&e.currentImage>t?r=n:t&&e.currentImage<t&&(r=o),r?this.preloadImage(r):(this.preloadImage(o),this.preloadImage(n))}if(this.props.currentImage!==e.currentImage||!this.props.isOpen&&e.isOpen){var i=this.preloadImageData(e.images[e.currentImage],this.handleImageLoaded);i&&this.setState({imageLoaded:i.complete})}!this.props.isOpen&&e.isOpen&&e.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!e.isOpen&&e.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}}},{key:"componentWillUnmount",value:function(){this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}},{key:"preloadImage",value:function(e,t){return this.preloadImageData(this.props.images[e],t)}},{key:"preloadImageData",value:function(e,t){if(e){var n=new Image,o=A(e);return n.onerror=t,n.onload=t,n.src=e.src,o&&(n.srcset=o),n}}},{key:"gotoNext",value:function(e){var t=this.props,n=t.currentImage,o=t.images,r=t.loop;this.state.imageLoaded&&(r||n!==o.length-1)&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickNext())}},{key:"gotoPrev",value:function(e){var t=this.props,n=t.currentImage,o=t.loop;this.state.imageLoaded&&(o||0!==n)&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickPrev())}},{key:"closeBackdrop",value:function(e){"lightboxBackdrop"!==e.target.id&&"FIGURE"!==e.target.tagName||this.props.onClose()}},{key:"handleKeyboardInput",value:function(e){return 37===e.keyCode?(this.gotoPrev(e),!0):39===e.keyCode?(this.gotoNext(e),!0):27===e.keyCode&&(this.props.onClose(),!0)}},{key:"handleImageLoaded",value:function(){this.setState({imageLoaded:!0})}},{key:"renderArrowPrev",value:function(){return this.props.loop||0!==this.props.currentImage?s.createElement(b,{direction:"left",icon:"arrowLeft",onClick:this.gotoPrev,title:this.props.leftArrowTitle,type:"button"}):null}},{key:"renderArrowNext",value:function(){return this.props.loop||this.props.currentImage!==this.props.images.length-1?s.createElement(b,{direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"}):null}},{key:"renderDialog",value:function(){var e=this.props,t=e.backdropClosesModal,r=e.isOpen,i=e.showThumbnails,a=e.width,l=this.state.imageLoaded;if(!r)return s.createElement("span",{key:"closed"});var c=0;return i&&(c=this.theme.thumbnail.size+this.theme.container.gutter.vertical),s.createElement(k,{key:"open",onClick:t&&this.closeBackdrop,onTouchEnd:t&&this.closeBackdrop},s.createElement("div",null,s.createElement("div",{className:n.css(this.classes.content),style:{marginBottom:c,maxWidth:a}},l&&this.renderHeader(),this.renderImages(),this.renderSpinner(),l&&this.renderFooter()),l&&this.renderThumbnails(),l&&this.renderArrowPrev(),l&&this.renderArrowNext(),this.props.preventScroll&&s.createElement(o,null)))}},{key:"renderImages",value:function(){var e=this.props,t=e.currentImage,o=e.images,r=e.onClickImage,i=e.showThumbnails,a=this.state.imageLoaded;if(!o||!o.length)return null;var l=o[t],c=A(l),u=c?"100vw":null,h=i?this.theme.thumbnail.size:0,p=this.theme.header.height+this.theme.footer.height+h+this.theme.container.gutter.vertical+"px";return s.createElement("figure",{className:n.css(this.classes.figure)},s.createElement("img",{className:n.css(this.classes.image,a&&this.classes.imageLoaded),onClick:r,sizes:u,alt:l.alt,src:l.src,srcSet:c,style:{cursor:r?"pointer":"auto",maxHeight:"calc(100vh - "+p+")"}}))}},{key:"renderThumbnails",value:function(){var e=this.props,t=e.images,n=e.currentImage,o=e.onClickThumbnail,r=e.showThumbnails,i=e.thumbnailOffset;if(r)return s.createElement(P,{currentImage:n,images:t,offset:i,onClickThumbnail:o})}},{key:"renderHeader",value:function(){var e=this.props,t=e.closeButtonTitle,n=e.customControls,o=e.onClose,r=e.showCloseButton;return s.createElement(E,{customControls:n,onClose:o,showCloseButton:r,closeButtonTitle:t})}},{key:"renderFooter",value:function(){var e=this.props,t=e.currentImage,n=e.images,o=e.imageCountSeparator,r=e.showImageCount;return n&&n.length?s.createElement(C,{caption:n[t].caption,countCurrent:t+1,countSeparator:o,countTotal:n.length,showCount:r}):null}},{key:"renderSpinner",value:function(){var e=this.props,t=e.spinner,o=e.spinnerColor,r=e.spinnerSize,i=this.state.imageLoaded,a=t;return s.createElement("div",{className:n.css(this.classes.spinner,!i&&this.classes.spinnerActive)},s.createElement(a,{color:o,size:r}))}},{key:"render",value:function(){return s.createElement(O,null,this.renderDialog())}}]),t}(t.Component);F.defaultProps={closeButtonTitle:"Close (Esc)",currentImage:0,enableKeyboardInput:!0,imageCountSeparator:" of ",leftArrowTitle:"Previous (Left arrow key)",loop:!1,onClickShowNextImage:!0,preloadNextImage:!0,preventScroll:!0,rightArrowTitle:"Next (Right arrow key)",showCloseButton:!0,showImageCount:!0,spinner:function(e){var t=r.StyleSheet.create(R(e));return s.createElement("div",{className:r.css(t.spinner)},s.createElement("div",{className:r.css(t.ripple)}))},spinnerColor:"white",spinnerSize:100,theme:{},thumbnailOffset:2,width:1024},F.childContextTypes={theme:e.object.isRequired};var D={content:{position:"relative"},figure:{margin:0},image:{display:"block",height:"auto",margin:"0 auto",maxWidth:"100%",WebkitTouchCallout:"none",userSelect:"none",opacity:0,transition:"opacity 0.3s"},imageLoaded:{opacity:1},spinner:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",opacity:0,transition:"opacity 0.3s",pointerEvents:"none"},spinnerActive:{opacity:1}};return F});
diff --git a/lib/Lightbox.js b/lib/Lightbox.js
index f9e04c29..31a233cd 100644
--- a/lib/Lightbox.js
+++ b/lib/Lightbox.js
@@ -210,10 +210,6 @@ var Lightbox = function (_Component) {
 				event.stopPropagation();
 			}
 
-			if (loop && currentImage === images.length - 1) {
-				this.props.onClickThumbnail(0);
-			}
-
 			this.props.onClickNext();
 		}
 	}, {
@@ -221,7 +217,6 @@ var Lightbox = function (_Component) {
 		value: function gotoPrev(event) {
 			var _props2 = this.props,
 			    currentImage = _props2.currentImage,
-			    images = _props2.images,
 			    loop = _props2.loop;
 			var imageLoaded = this.state.imageLoaded;
 
@@ -233,10 +228,6 @@ var Lightbox = function (_Component) {
 				event.stopPropagation();
 			}
 
-			if (loop && currentImage === 0) {
-				this.props.onClickThumbnail(images.length - 1);
-			}
-
 			this.props.onClickPrev();
 		}
 	}, {
diff --git a/package.json b/package.json
index f150a028..1dbef3f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-images",
-  "version": "0.5.20",
+  "version": "0.5.21",
   "description": "A simple, responsive lightbox component for displaying an array of images with React.js",
   "main": "lib/Lightbox.js",
   "jsnext:main": "dist/react-images.es.js",