write some docs and fixup demo

7 files changed, 1614 insertions, 81 deletions

diff --git a/demo/LightBox.ActivityIndicator.js b/demo/LightBox.ActivityIndicator.js
new file mode 100644
index 0000000..479372e
--- /dev/null
+++ b/demo/LightBox.ActivityIndicator.js
@@ -0,0 +1,106 @@
+var LightBox = LightBox || {}; LightBox["ActivityIndicator"] =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	/**
+	 *
+	 * @author Victor Häggqvist
+	 * @since 2016-01-14
+	 */
+
+	var ActivityIndicator = function () {
+	    function ActivityIndicator() {
+	        _classCallCheck(this, ActivityIndicator);
+
+	        this.element = document.createElement('div');
+	        this.element.id = 'imagelightbox-loading';
+	        this.element.appendChild(document.createElement('div'));
+	    }
+
+	    /**
+	     *
+	     * @param {LightBox} lightbox
+	     */
+
+	    _createClass(ActivityIndicator, [{
+	        key: 'register',
+	        value: function register(lightbox) {
+	            lightbox.addOnLoadStartListener(this.activityIndicatorOn.bind(this));
+	            lightbox.addOnLoadEndListener(this.activityIndicatorOff.bind(this));
+	            lightbox.addOnEndListener(this.activityIndicatorOff.bind(this));
+	        }
+	    }, {
+	        key: 'activityIndicatorOn',
+	        value: function activityIndicatorOn() {
+	            document.body.appendChild(this.element);
+	        }
+	    }, {
+	        key: 'activityIndicatorOff',
+	        value: function activityIndicatorOff() {
+	            try {
+	                document.body.removeChild(this.element);
+	            } catch (e) {}
+	        }
+	    }]);
+
+	    return ActivityIndicator;
+	}();
+
+	exports.default = ActivityIndicator;
+	module.exports = exports['default'];
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/demo/LightBox.Captions.js b/demo/LightBox.Captions.js
new file mode 100644
index 0000000..8207f97
--- /dev/null
+++ b/demo/LightBox.Captions.js
@@ -0,0 +1,108 @@
+var LightBox = LightBox || {}; LightBox["Captions"] =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	/**
+	 * @author Victor Häggqvist
+	 * @since 2016-01-16
+	 */
+
+	var Captions = function () {
+	    function Captions() {
+	        _classCallCheck(this, Captions);
+
+	        this.element = document.createElement('div');
+	        this.element.id = 'imagelightbox-caption';
+	    }
+
+	    _createClass(Captions, [{
+	        key: 'register',
+	        value: function register(lightbox) {
+	            this.lightbox = lightbox;
+	            lightbox.addOnLoadStartListener(this.hideCaption.bind(this));
+	            lightbox.addOnLoadEndListener(this.showCaption.bind(this));
+	            lightbox.addOnEndListener(this.hideCaption.bind(this));
+	        }
+	    }, {
+	        key: 'showCaption',
+	        value: function showCaption() {
+	            var img = this.lightbox.target.querySelector('img');
+
+	            if (img === null) return;
+
+	            var caption = img.getAttribute('alt');
+	            if (caption !== null && caption.length > 0) {
+	                this.element.innerHTML = img.alt;
+	                document.body.appendChild(this.element);
+	            }
+	        }
+	    }, {
+	        key: 'hideCaption',
+	        value: function hideCaption() {
+	            try {
+	                document.body.removeChild(this.element);
+	            } catch (e) {}
+	        }
+	    }]);
+
+	    return Captions;
+	}();
+
+	exports.default = Captions;
+	module.exports = exports['default'];
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/demo/LightBox.CloseButton.js b/demo/LightBox.CloseButton.js
new file mode 100644
index 0000000..287ad0e
--- /dev/null
+++ b/demo/LightBox.CloseButton.js
@@ -0,0 +1,113 @@
+var LightBox = LightBox || {}; LightBox["CloseButton"] =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	/**
+	 * @author Victor Häggqvist
+	 * @since 2016-01-14
+	 */
+
+	var CloseButton = function () {
+	    function CloseButton() {
+	        var closeOnDocumentClick = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
+
+	        _classCallCheck(this, CloseButton);
+
+	        this.closeOnDocumentClick = closeOnDocumentClick;
+	        this.element = document.createElement('a');
+	        this.element.id = 'imagelightbox-close';
+	        this.element.innerHTML = 'Close';
+	    }
+
+	    _createClass(CloseButton, [{
+	        key: 'register',
+	        value: function register(lightbox) {
+	            this.lightbox = lightbox;
+	            lightbox.addOnStartListener(this.showButton.bind(this));
+	            lightbox.addOnEndListener(this.hideButton.bind(this));
+	        }
+	    }, {
+	        key: 'showButton',
+	        value: function showButton() {
+	            var _this = this;
+
+	            this.lightbox.options.quitOnDocClick = this.closeOnDocumentClick;
+	            ['click', 'touchend'].forEach(function (name) {
+	                _this.element.addEventListener(name, _this.exitLightbox.bind(_this));
+	            });
+
+	            document.body.appendChild(this.element);
+	        }
+	    }, {
+	        key: 'hideButton',
+	        value: function hideButton() {
+	            document.body.removeChild(this.element);
+	        }
+	    }, {
+	        key: 'exitLightbox',
+	        value: function exitLightbox() {
+	            this.lightbox.quitLightbox();
+	        }
+	    }]);
+
+	    return CloseButton;
+	}();
+
+	exports.default = CloseButton;
+	module.exports = exports['default'];
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/demo/LightBox.Core.js b/demo/LightBox.Core.js
new file mode 100644
index 0000000..e5b8e25
--- /dev/null
+++ b/demo/LightBox.Core.js
@@ -0,0 +1,857 @@
+var LightBox = LightBox || {}; LightBox["Core"] =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /**
+	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * @author Victor Häggqvist
+	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * @since 2016-01-12
+	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      */
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	var _CSSUtil = __webpack_require__(1);
+
+	var _LightDirection = __webpack_require__(2);
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var log = __webpack_require__(3);
+
+	log.setDefaultLevel(log.levels.DEBUG);
+
+	var LightBox = function () {
+	    function LightBox(targetSelector) {
+	        var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+	        _classCallCheck(this, LightBox);
+
+	        log.info('LightBox');
+	        this.targets = document.querySelectorAll(targetSelector);
+	        log.debug(this.targets);
+
+	        log.debug('HAS_TOUCH ' + LightBox.HAS_TOUCH);
+	        var defaultOptions = {
+	            allowedTypes: 'png|jpg|jpeg|gif',
+	            restrictTypes: false,
+	            selectorId: 'imagelightbox',
+	            animationSpeed: 350,
+	            preloadNext: true,
+	            enableKeyboard: true,
+	            quitOnEnd: false,
+	            quitOnImgClick: false,
+	            quitOnDocClick: true,
+	            requestFullscreenOnMobile: true
+	        };
+
+	        this.options = Object.assign(options, defaultOptions);
+	        log.info(this.options);
+
+	        this.target = null;
+	        this.image = null;
+	        this.imageWidth = 0;
+	        this.imageHeight = 0;
+	        this.swipeDiff = 0;
+	        this.inProgress = false;
+
+	        this.swipeStart = 0;
+	        this.swipeEnd = 0;
+
+	        this.onStartListeners = [];
+	        this.onEndListeners = [];
+	        this.onLoadStartListeners = [];
+	        this.onLoadEndListeners = [];
+
+	        this.bindEvents();
+	    }
+
+	    _createClass(LightBox, [{
+	        key: 'bindEvents',
+	        value: function bindEvents() {
+	            var _this = this;
+
+	            Array.prototype.forEach.call(this.targets, function (ele) {
+	                ele.addEventListener('click', _this.onImageClick.bind(_this));
+	            });
+	            window.addEventListener('resize', this.windowResizeListener.bind(this));
+
+	            if (this.options.quitOnDocClick) {
+	                document.body.addEventListener(LightBox.HAS_TOUCH ? 'touchend' : 'click', this.documentClick.bind(this));
+	            }
+
+	            if (this.options.enableKeyboard) {
+	                document.body.addEventListener('keyup', this.handleKeyboard.bind(this));
+	            }
+	        }
+	    }, {
+	        key: 'handleKeyboard',
+	        value: function handleKeyboard(e) {
+	            if (this.image === null) return true;
+
+	            e.preventDefault();
+
+	            if (e.keyCode === 27) this.quitLightbox();
+
+	            if (e.keyCode === 37 || e.keyCode === 39) {
+	                var gotoIndex = Array.prototype.indexOf.call(this.targets, this.target) - (e.keyCode === 37 ? 1 : -1);
+
+	                if (gotoIndex > this.targets.length - 1) {
+	                    this.target = this.targets[0];
+	                } else if (gotoIndex < 0) {
+	                    this.target = this.targets[this.targets.length - 1];
+	                } else {
+	                    this.target = this.targets[gotoIndex];
+	                }
+
+	                this.loadImage();
+	            }
+	        }
+	    }, {
+	        key: 'documentClick',
+	        value: function documentClick() {
+	            log.debug('document click');
+
+	            if (this.image !== null && this.target.href === this.image.src) {
+	                log.info('quitting');
+	                if (this.options.quitOnDocClick) this.quitLightbox();
+	            }
+	        }
+	    }, {
+	        key: 'quitLightbox',
+	        value: function quitLightbox() {
+	            var _this2 = this;
+
+	            log.debug('quitLightbox');
+	            if (this.image === null) return false;
+
+	            _CSSUtil.CSSUtil.setTransitionProperty(this.image, 'opacity ' + this.options.animationSpeed / 1000 + 's linear');
+	            setTimeout(function () {
+	                // without timeout it's to fast to make it fade and just jumps to 1 instant
+	                _this2.image.style.opacity = 0;
+	            }, 5);
+
+	            setTimeout(function () {
+	                _this2.removeImage();
+	                _this2.inProgress = false;
+
+	                _this2.onEndListeners.forEach(function (l) {
+	                    return l();
+	                });
+	            }, this.options.animationSpeed);
+	        }
+	    }, {
+	        key: 'onImageClick',
+	        value: function onImageClick(event) {
+	            log.debug(event);
+	            var element = event.srcElement.parentElement;
+	            if (!this.isTargetValid(element)) return true;
+
+	            event.preventDefault();
+
+	            //if (LightBox.HAS_TOUCH) {
+	            //    log.debug('requesting fullscreen');
+	            //    document.body.webkitRequestFullscreen()
+	            //}
+
+	            if (this.inProgress) return;
+
+	            this.inProgress = false;
+
+	            this.onStartListeners.forEach(function (l) {
+	                return l();
+	            });
+
+	            this.target = element;
+
+	            this.loadImage();
+	        }
+	    }, {
+	        key: 'isTargetValid',
+	        value: function isTargetValid(element) {
+	            if (this.options.restrictTypes === false) return true;
+
+	            var validTypes = new RegExp("(\.(" + this.options.allowedTypes + ")$)");
+
+	            return element.tagName.toLowerCase() === 'a' && validTypes.test(element.href);
+	        }
+	    }, {
+	        key: 'loadImage',
+	        value: function loadImage() {
+	            var _this3 = this;
+
+	            var direction = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
+
+	            log.info('loadImage');
+	            if (this.inProgress) return false;
+	            log.debug('not progress');
+
+	            if (this.image !== null) {
+	                log.debug('has current image');
+	                if (direction !== false && (this.targets.length < 2 || this.options.quitOnEnd === true && (direction === _LightDirection.LightDirection.RIGHT && Array.prototype.indexOf(this.targets, this.target) === 0 || direction === _LightDirection.LightDirection.LEFT && Array.prototype.indexOf(this.targets, this.target) === targets.length - 1))) {
+	                    this.quitLightbox();
+	                    return false;
+	                }
+
+	                log.debug('unload');
+	                _CSSUtil.CSSUtil.setTransitionProperty(this.image, 'opacity ' + this.options.animationSpeed / 1000 + 's linear');
+
+	                var transitionArgs = '0px';
+	                if (direction !== false) {
+	                    transitionArgs = 100 * direction - this.swipeDiff + 'px';
+	                }
+
+	                this.image.style.transform = 'translateX(' + transitionArgs + ')';
+
+	                setTimeout(function () {
+	                    // without timeout it's to fast to make it fade and just jumps to 1 instant
+	                    _this3.image.style.opacity = 0;
+	                }, 5);
+
+	                setTimeout(function () {
+	                    log.debug('remove from dom');
+	                    _this3.removeImage();
+	                }, this.options.animationSpeed);
+
+	                this.swipeDiff = 0;
+	            }
+
+	            this.inProgress = true;
+	            this.onLoadStartListeners.forEach(function (l) {
+	                return l();
+	            });
+
+	            setTimeout(function () {
+	                log.debug('loadImage in');
+	                var image = new Image();
+	                _this3.image = image;
+	                image.onload = function () {
+	                    image.id = _this3.options.selectorId;
+	                    log.debug('img loaded');
+	                    document.body.appendChild(image);
+	                    _this3.setImage();
+
+	                    image.style.opacity = 0;
+
+	                    var interpretedSpeed = _this3.options.animationSpeed / 1000;
+	                    log.debug(interpretedSpeed);
+	                    _CSSUtil.CSSUtil.setTransitionProperty(image, 'opacity ' + interpretedSpeed + 's ease');
+	                    image.style.transform = 'translateX(0px)';
+
+	                    setTimeout(function () {
+	                        // without timeout it's to fast to make it fade and just jumps to 1 instant
+	                        image.style.opacity = 1;
+	                    }, 10);
+
+	                    setTimeout(function () {
+	                        _this3.inProgress = false;
+	                        _this3.onLoadEndListeners.forEach(function (l) {
+	                            return l();
+	                        });
+	                    }, _this3.options.animationSpeed);
+
+	                    if (_this3.options.preloadNext) {
+	                        var index = Array.prototype.indexOf.call(_this3.targets, _this3.target);
+	                        var next = _this3.targets[index + 1];
+
+	                        if (next !== null && next !== undefined) {
+	                            log.debug('preloading next');
+	                            var nextImg = new Image();
+	                            nextImg.src = next.href;
+	                        } else {
+	                            log.debug('no preloading');
+	                        }
+	                    }
+	                };
+	                image.src = _this3.target.href;
+
+	                _this3.swipeStart = 0;
+	                _this3.swipeEnd = 0;
+	                //this.imagePosLeft = 0;
+
+	                if (LightBox.HAS_POINTERS) {
+	                    image.addEventListener('pointerup', _this3.imageClickEvent.bind(_this3));
+	                    image.addEventListener('MSPointerUp', _this3.imageClickEvent.bind(_this3));
+	                } else {
+	                    image.addEventListener('click', _this3.imageClickEvent.bind(_this3));
+	                }
+
+	                ['touchstart', 'pointerdown', 'MSPointerDown'].forEach(function (name) {
+	                    image.addEventListener(name, _this3.imageTouchStart.bind(_this3));
+	                });
+
+	                ['touchmove', 'pointermove', 'MSPointerMove'].forEach(function (name) {
+	                    image.addEventListener(name, _this3.imageTouchMove.bind(_this3));
+	                });
+
+	                ['touchend', 'touchcancel', 'pointerup', 'MSPointerUp'].forEach(function (name) {
+	                    image.addEventListener(name, _this3.imageTouchEnd.bind(_this3));
+	                });
+	            }, this.options.animationSpeed + 100);
+	        }
+	    }, {
+	        key: 'removeImage',
+	        value: function removeImage() {
+	            var image = document.querySelector('#' + this.options.selectorId);
+	            document.body.removeChild(image);
+	            this.image = null;
+	        }
+	    }, {
+	        key: 'imageClickEvent',
+	        value: function imageClickEvent(e) {
+	            e.preventDefault();
+	            log.debug('click');
+
+	            if (this.options.quitOnImgClick) {
+	                this.quitLightbox();
+	                return false;
+	            }
+
+	            if (this.wasTouched(e)) return true;
+
+	            var posX = e.pageX - e.target.offsetLeft;
+	            log.debug(posX);
+
+	            var gotoIndex = Array.prototype.indexOf.call(this.targets, this.target) - (this.imageWidth / 2 > posX ? 1 : -1);
+
+	            if (gotoIndex > this.targets.length - 1) {
+	                this.target = this.targets[0];
+	            } else if (gotoIndex < 0) {
+	                this.target = this.targets[this.targets.length - 1];
+	            } else {
+	                this.target = this.targets[gotoIndex];
+	            }
+
+	            this.loadImage();
+	        }
+	    }, {
+	        key: 'imageTouchStart',
+	        value: function imageTouchStart(e) {
+	            if (!this.wasTouched(e) || this.options.quitOnImgClick) return true;
+
+	            this.swipeStart = e.pageX || e.touches[0].pageX;
+	        }
+	    }, {
+	        key: 'imageTouchMove',
+	        value: function imageTouchMove(e) {
+	            if (!this.wasTouched(e) || this.options.quitOnImgClick) return true;
+
+	            e.preventDefault();
+	            this.swipeEnd = e.pageX || e.touches[0].pageX;
+	            this.swipeDiff = this.swipeStart - this.swipeEnd;
+
+	            this.image.style.transform = 'translateX(' + -this.swipeDiff + 'px)';
+	            //CSSUtil.setTransitionProperty(this.image, 'transform 0s linear');
+	        }
+	    }, {
+	        key: 'imageTouchEnd',
+	        value: function imageTouchEnd(e) {
+	            if (!this.wasTouched(e) || this.options.quitOnImgClick) return true;
+
+	            log.debug(this.swipeDiff);
+	            if (Math.abs(this.swipeDiff) > 50) {
+	                var gotoIndex = Array.prototype.indexOf.call(this.targets, this.target) - (this.swipeDiff < 0 ? 1 : -1);
+
+	                if (gotoIndex > this.targets.length - 1) {
+	                    this.target = this.targets[0];
+	                } else if (gotoIndex < 0) {
+	                    this.target = this.targets[this.targets.length - 1];
+	                } else {
+	                    this.target = this.targets[gotoIndex];
+	                }
+
+	                var direction = this.swipeDiff > 0 ? _LightDirection.LightDirection.RIGHT : _LightDirection.LightDirection.LEFT;
+	                this.loadImage(direction);
+	            } else {
+	                this.image.style.transform = 'translateX(0px)';
+	                //CSSUtil.setTransitionProperty(this.image, 'transform '+ options.animationSpeed / 1000 +'s linear');
+	            }
+	        }
+	    }, {
+	        key: 'setImage',
+	        value: function setImage() {
+	            var _this4 = this;
+
+	            if (!this.image) return false;
+
+	            var screenWidth = window.innerWidth * 0.8;
+	            var screenHeight = window.innerHeight * 0.9;
+
+	            var tmpImage = new Image();
+	            tmpImage.src = this.image.src;
+	            tmpImage.onload = function () {
+	                _this4.imageWidth = tmpImage.width;
+	                _this4.imageHeight = tmpImage.height;
+
+	                if (_this4.imageWidth > screenWidth || _this4.imageHeight > screenHeight) {
+	                    var ratio = _this4.imageWidth / _this4.imageHeight > screenWidth / screenHeight ? _this4.imageWidth / screenWidth : _this4.imageHeight / screenHeight;
+	                    _this4.imageWidth /= ratio;
+	                    _this4.imageHeight /= ratio;
+	                }
+
+	                _this4.image.style.width = _this4.imageWidth + 'px';
+	                _this4.image.style.height = _this4.imageHeight + 'px';
+	                _this4.image.style.top = (window.innerHeight - _this4.imageHeight) / 2 + 'px';
+	                _this4.image.style.left = (window.innerWidth - _this4.imageWidth) / 2 + 'px';
+	            };
+	        }
+	    }, {
+	        key: 'wasTouched',
+	        value: function wasTouched(event) {
+	            if (LightBox.HAS_TOUCH) return true;
+
+	            if (!LightBox.HAS_POINTERS || typeof event === 'undefined' || typeof event.pointerType === 'undefined') return false;
+
+	            if (typeof event.MSPOINTER_TYPE_MOUSE !== 'undefined') {
+	                if (event.MSPOINTER_TYPE_MOUSE !== event.pointerType) return true;
+	            } else {
+	                if (event.pointerType !== 'mouse') return true;
+	            }
+
+	            return false;
+	        }
+	    }, {
+	        key: 'switchToIndex',
+	        value: function switchToIndex(index) {
+	            if (index >= 0 && index < this.targets.length) {
+	                this.target = this.targets[index];
+	                this.loadImage();
+	            }
+	        }
+	    }, {
+	        key: 'windowResizeListener',
+	        value: function windowResizeListener() {
+	            log.debug('resized');
+	            this.setImage();
+	        }
+	    }, {
+	        key: 'addOnStartListener',
+	        value: function addOnStartListener(listener) {
+	            this.onStartListeners.push(listener);
+	        }
+	    }, {
+	        key: 'addOnEndListener',
+	        value: function addOnEndListener(listener) {
+	            this.onEndListeners.push(listener);
+	        }
+	    }, {
+	        key: 'addOnLoadStartListener',
+	        value: function addOnLoadStartListener(listener) {
+	            this.onLoadStartListeners.push(listener);
+	        }
+	    }, {
+	        key: 'addOnLoadEndListener',
+	        value: function addOnLoadEndListener(listener) {
+	            this.onLoadEndListeners.push(listener);
+	        }
+	    }, {
+	        key: 'registerPlugin',
+	        value: function registerPlugin(plugin) {
+	            plugin.register(this);
+	        }
+	    }]);
+
+	    return LightBox;
+	}();
+
+	exports.default = LightBox;
+
+	LightBox.HAS_TOUCH = 'ontouchstart' in window;
+	LightBox.HAS_POINTERS = window.navigator.pointerEnabled || window.navigator.msPointerEnabled;
+	module.exports = exports['default'];
+
+/***/ },
+/* 1 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	/**
+	 * Created by Victor Häggqvist on 1/12/16.
+	 */
+
+	var CSSUtil = exports.CSSUtil = function () {
+	    function CSSUtil() {
+	        _classCallCheck(this, CSSUtil);
+	    }
+
+	    _createClass(CSSUtil, null, [{
+	        key: 'setTransitionProperty',
+
+	        /**
+	         * transion need to be set on property
+	         *
+	         * using key-value dont work
+	         *
+	         * @param ele DOMElement
+	         * @param value
+	         */
+	        value: function setTransitionProperty(ele, value) {
+	            var style = ele.style;
+	            if (style.transition === '') {
+	                style.transition = value;
+	                return;
+	            }
+	            if (style.WebkitTransition === '') {
+	                style.WebkitTransition = value;
+	                return;
+	            }
+	            if (style.MozTransition === '') {
+	                style.MozTransition = value;
+	                return;
+	            }
+	            if (style.OTransition === '') {
+	                style.OTransition = value;
+	            }
+	        }
+	    }, {
+	        key: 'cssTransitionSupport',
+	        value: function cssTransitionSupport() {
+	            var d = document.body || document.documentElement,
+	                s = d.style;
+	            if (s.WebkitTransition === '') return '-webkit-';
+	            if (s.MozTransition === '') return '-moz-';
+	            if (s.OTransition === '') return '-o-';
+	            if (s.transition === '') return '';
+	            return false;
+	        }
+	    }, {
+	        key: 'cssTransitionTranslateX',
+	        value: function cssTransitionTranslateX(element, positionX, speed) {
+	            var prefix = CSSUtil.cssTransitionSupport();
+	            element.style[prefix + 'transform'] = 'translateX(' + positionX + ')';
+	            element.style[prefix + 'transition'] = prefix + 'transform ' + speed + 's linear';
+	        }
+	    }]);
+
+	    return CSSUtil;
+	}();
+
+	CSSUtil.isCssTransitionSupport = CSSUtil.cssTransitionSupport() !== false;
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	/**
+	 * Created by Victor Häggqvist on 1/14/16.
+	 */
+
+	var LightDirection = exports.LightDirection = function LightDirection() {
+	  _classCallCheck(this, LightDirection);
+	};
+
+	LightDirection.LEFT = 1;
+	LightDirection.RIGHT = -1;
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(module) {'use strict';
+
+	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
+	/*
+	* loglevel - https://github.com/pimterry/loglevel
+	*
+	* Copyright (c) 2013 Tim Perry
+	* Licensed under the MIT license.
+	*/
+	(function (root, definition) {
+	    "use strict";
+
+	    if (( false ? 'undefined' : _typeof(module)) === 'object' && module.exports && "function" === 'function') {
+	        module.exports = definition();
+	    } else if ("function" === 'function' && _typeof(__webpack_require__(5)) === 'object') {
+	        !(__WEBPACK_AMD_DEFINE_FACTORY__ = (definition), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+	    } else {
+	        root.log = definition();
+	    }
+	})(undefined, function () {
+	    "use strict";
+
+	    var noop = function noop() {};
+	    var undefinedType = "undefined";
+
+	    function realMethod(methodName) {
+	        if ((typeof console === 'undefined' ? 'undefined' : _typeof(console)) === undefinedType) {
+	            return false; // We can't build a real method without a console to log to
+	        } else if (console[methodName] !== undefined) {
+	                return bindMethod(console, methodName);
+	            } else if (console.log !== undefined) {
+	                return bindMethod(console, 'log');
+	            } else {
+	                return noop;
+	            }
+	    }
+
+	    function bindMethod(obj, methodName) {
+	        var method = obj[methodName];
+	        if (typeof method.bind === 'function') {
+	            return method.bind(obj);
+	        } else {
+	            try {
+	                return Function.prototype.bind.call(method, obj);
+	            } catch (e) {
+	                // Missing bind shim or IE8 + Modernizr, fallback to wrapping
+	                return function () {
+	                    return Function.prototype.apply.apply(method, [obj, arguments]);
+	                };
+	            }
+	        }
+	    }
+
+	    // these private functions always need `this` to be set properly
+
+	    function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {
+	        return function () {
+	            if ((typeof console === 'undefined' ? 'undefined' : _typeof(console)) !== undefinedType) {
+	                replaceLoggingMethods.call(this, level, loggerName);
+	                this[methodName].apply(this, arguments);
+	            }
+	        };
+	    }
+
+	    function replaceLoggingMethods(level, loggerName) {
+	        /*jshint validthis:true */
+	        for (var i = 0; i < logMethods.length; i++) {
+	            var methodName = logMethods[i];
+	            this[methodName] = i < level ? noop : this.methodFactory(methodName, level, loggerName);
+	        }
+	    }
+
+	    function defaultMethodFactory(methodName, level, loggerName) {
+	        /*jshint validthis:true */
+	        return realMethod(methodName) || enableLoggingWhenConsoleArrives.apply(this, arguments);
+	    }
+
+	    var logMethods = ["trace", "debug", "info", "warn", "error"];
+
+	    function Logger(name, defaultLevel, factory) {
+	        var self = this;
+	        var currentLevel;
+	        var storageKey = "loglevel";
+	        if (name) {
+	            storageKey += ":" + name;
+	        }
+
+	        function persistLevelIfPossible(levelNum) {
+	            var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
+
+	            // Use localStorage if available
+	            try {
+	                window.localStorage[storageKey] = levelName;
+	                return;
+	            } catch (ignore) {}
+
+	            // Use session cookie as fallback
+	            try {
+	                window.document.cookie = encodeURIComponent(storageKey) + "=" + levelName + ";";
+	            } catch (ignore) {}
+	        }
+
+	        function getPersistedLevel() {
+	            var storedLevel;
+
+	            try {
+	                storedLevel = window.localStorage[storageKey];
+	            } catch (ignore) {}
+
+	            if ((typeof storedLevel === 'undefined' ? 'undefined' : _typeof(storedLevel)) === undefinedType) {
+	                try {
+	                    var cookie = window.document.cookie;
+	                    var location = cookie.indexOf(encodeURIComponent(storageKey) + "=");
+	                    if (location) {
+	                        storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
+	                    }
+	                } catch (ignore) {}
+	            }
+
+	            // If the stored level is not valid, treat it as if nothing was stored.
+	            if (self.levels[storedLevel] === undefined) {
+	                storedLevel = undefined;
+	            }
+
+	            return storedLevel;
+	        }
+
+	        /*
+	         *
+	         * Public API
+	         *
+	         */
+
+	        self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
+	            "ERROR": 4, "SILENT": 5 };
+
+	        self.methodFactory = factory || defaultMethodFactory;
+
+	        self.getLevel = function () {
+	            return currentLevel;
+	        };
+
+	        self.setLevel = function (level, persist) {
+	            if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
+	                level = self.levels[level.toUpperCase()];
+	            }
+	            if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
+	                currentLevel = level;
+	                if (persist !== false) {
+	                    // defaults to true
+	                    persistLevelIfPossible(level);
+	                }
+	                replaceLoggingMethods.call(self, level, name);
+	                if ((typeof console === 'undefined' ? 'undefined' : _typeof(console)) === undefinedType && level < self.levels.SILENT) {
+	                    return "No console available for logging";
+	                }
+	            } else {
+	                throw "log.setLevel() called with invalid level: " + level;
+	            }
+	        };
+
+	        self.setDefaultLevel = function (level) {
+	            if (!getPersistedLevel()) {
+	                self.setLevel(level, false);
+	            }
+	        };
+
+	        self.enableAll = function (persist) {
+	            self.setLevel(self.levels.TRACE, persist);
+	        };
+
+	        self.disableAll = function (persist) {
+	            self.setLevel(self.levels.SILENT, persist);
+	        };
+
+	        // Initialize with the right level
+	        var initialLevel = getPersistedLevel();
+	        if (initialLevel == null) {
+	            initialLevel = defaultLevel == null ? "WARN" : defaultLevel;
+	        }
+	        self.setLevel(initialLevel, false);
+	    }
+
+	    /*
+	     *
+	     * Package-level API
+	     *
+	     */
+
+	    var defaultLogger = new Logger();
+
+	    var _loggersByName = {};
+	    defaultLogger.getLogger = function getLogger(name) {
+	        if (typeof name !== "string" || name === "") {
+	            throw new TypeError("You must supply a name when creating a logger.");
+	        }
+
+	        var logger = _loggersByName[name];
+	        if (!logger) {
+	            logger = _loggersByName[name] = new Logger(name, defaultLogger.getLevel(), defaultLogger.methodFactory);
+	        }
+	        return logger;
+	    };
+
+	    // Grab the current global log variable in case of overwrite
+	    var _log = (typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== undefinedType ? window.log : undefined;
+	    defaultLogger.noConflict = function () {
+	        if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== undefinedType && window.log === defaultLogger) {
+	            window.log = _log;
+	        }
+
+	        return defaultLogger;
+	    };
+
+	    return defaultLogger;
+	});
+	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4)(module)))
+
+/***/ },
+/* 4 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	module.exports = function (module) {
+		if (!module.webpackPolyfill) {
+			module.deprecate = function () {};
+			module.paths = [];
+			// module.parent = undefined by default
+			module.children = [];
+			module.webpackPolyfill = 1;
+		}
+		return module;
+	};
+
+/***/ },
+/* 5 */
+/***/ function(module, exports) {
+
+	/* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__;
+
+	/* WEBPACK VAR INJECTION */}.call(exports, {}))
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/demo/LightBox.Navigation.js b/demo/LightBox.Navigation.js
new file mode 100644
index 0000000..abcc5b4
--- /dev/null
+++ b/demo/LightBox.Navigation.js
@@ -0,0 +1,138 @@
+var LightBox = LightBox || {}; LightBox["Navigation"] =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	/**
+	 * @author Victor Häggqvist
+	 * @since 1/15/16
+	 */
+
+	var Navigation = function () {
+	    function Navigation() {
+	        _classCallCheck(this, Navigation);
+	    }
+
+	    _createClass(Navigation, [{
+	        key: 'register',
+	        value: function register(lightbox) {
+	            this.lightbox = lightbox;
+	            lightbox.addOnStartListener(this.showNavigation.bind(this));
+	            lightbox.addOnEndListener(this.hideNavigation.bind(this));
+	            lightbox.addOnLoadEndListener(this.updateNavigation.bind(this));
+	        }
+	    }, {
+	        key: 'showNavigation',
+	        value: function showNavigation() {
+	            var _this = this;
+
+	            this.sink = document.createElement('div');
+	            this.sink.id = 'imagelightbox-nav-sink';
+	            this.nav = document.createElement('div');
+	            this.nav.id = 'imagelightbox-nav';
+	            this.sink.appendChild(this.nav);
+
+	            Array.prototype.forEach.call(this.lightbox.targets, function (_) {
+	                _this.nav.appendChild(document.createElement('a'));
+	            });
+
+	            document.body.appendChild(this.sink);
+
+	            var navItems = this.nav.querySelectorAll('a');
+	            Array.prototype.forEach.call(navItems, function (item, i) {
+	                ['click', 'touchend'].forEach(function (name) {
+	                    item.addEventListener(name, _this.navClick.bind(_this, i));
+	                });
+	            });
+
+	            // make the nav actually centered, flex center dont make it
+	            var rect = this.nav.getBoundingClientRect();
+	            var diff = rect.width / 2;
+	            this.nav.style.marginLeft = '-' + diff + 'px';
+	        }
+	    }, {
+	        key: 'updateNavigation',
+	        value: function updateNavigation() {
+	            Array.prototype.forEach.call(this.nav.childNodes, function (n) {
+	                n.classList.remove('active');
+	            });
+
+	            var current = Array.prototype.indexOf.call(this.lightbox.targets, this.lightbox.target);
+	            this.nav.childNodes[current].classList.add('active');
+	        }
+	    }, {
+	        key: 'hideNavigation',
+	        value: function hideNavigation() {
+	            try {
+	                document.body.removeChild(this.sink);
+	            } catch (e) {}
+	        }
+	    }, {
+	        key: 'navClick',
+	        value: function navClick(index, e) {
+	            e.stopPropagation();
+	            e.cancelBubble = true;
+	            this.lightbox.switchToIndex(index);
+	        }
+	    }]);
+
+	    return Navigation;
+	}();
+
+	exports.default = Navigation;
+	module.exports = exports['default'];
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/demo/LightBox.Overlay.js b/demo/LightBox.Overlay.js
new file mode 100644
index 0000000..e52a586
--- /dev/null
+++ b/demo/LightBox.Overlay.js
@@ -0,0 +1,96 @@
+var LightBox = LightBox || {}; LightBox["Overlay"] =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	/**
+	 * @author Victor Häggqvist
+	 * @since 2016-01-14
+	 */
+
+	var Overlay = function () {
+	    function Overlay() {
+	        _classCallCheck(this, Overlay);
+
+	        this.element = document.createElement('div');
+	        this.element.id = 'imagelightbox-overlay';
+	    }
+
+	    _createClass(Overlay, [{
+	        key: 'register',
+	        value: function register(lightbox) {
+	            lightbox.addOnStartListener(this.overlayOn.bind(this));
+	            lightbox.addOnEndListener(this.overlayOff.bind(this));
+	        }
+	    }, {
+	        key: 'overlayOn',
+	        value: function overlayOn() {
+	            document.body.appendChild(this.element);
+	        }
+	    }, {
+	        key: 'overlayOff',
+	        value: function overlayOff() {
+	            document.body.removeChild(this.element);
+	        }
+	    }]);
+
+	    return Overlay;
+	}();
+
+	exports.default = Overlay;
+	module.exports = exports['default'];
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 7bc02cd..d1e167c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,99 +9,214 @@
     <title>Image Lightbox Demo</title>
 
     <link rel="stylesheet" href="demo.css">
-    <link rel="stylesheet" href="touch-imagelightbox.min.css">
-    <style type="text/css">
-        .animate {
-            opacity: 1 !important;
-        }
-    </style>
+    <link rel="stylesheet" href="touch-imagelightbox.css">
 </head>
 
 <body>
-<a href="https://github.com/victorhaggqvist/touch-imagelightbox"><img id="fork-ribbon"
-                                                                      style="position: absolute; top: 0; right: 0; border: 0;"
-                                                                      src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
-                                                                      alt="Fork me on GitHub"
-                                                                      data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+<a href="https://github.com/victorhaggqvist/touch-imagelightbox" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
 <div id="container">
     <header>
-        <h1>Image Lightbox<span>Responsive &amp; Touch-Friendly</span></h1>
-        <iframe id="fork-button"
-                src="http://ghbtns.com/github-btn.html?user=victorhaggqvist&repo=touch-imagelightbox&type=fork"
-                allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
-        <p>View source of demos on <a
-                href="https://github.com/victorhaggqvist/touch-imagelightbox/tree/gh-pages">Github</a>.</p>
+        <h1>Image Lightbox<span>Responsive & Touch-Friendly</span></h1>
+        <p>View source of demos on <a href="https://github.com/victorhaggqvist/touch-imagelightbox/tree/gh-pages">Github</a>.</p>
     </header>
 
-    <h2>With activity indication</h2>
-    <ul>
-        <li><a href="img/14448239362_53203a94bf_o.jpg" data-imagelightbox="0"><img
-                src="img/14448239362_53203a94bf_o.jpg" alt="Sunrise"></a></li>
-        <li><a href="img/6260329772_7ce10ac83c_o.jpg" data-imagelightbox="0"><img
-                src="img/6260329772_7ce10ac83c_o.jpg" alt="transalpina"></a></li>
-        <li><a href="img/7073381043_e3e50744eb_o.jpg" data-imagelightbox="0"><img
-                src="img/7073381043_e3e50744eb_o.jpg" alt="Water, rocks, sun, sea and cloud!"></a></li>
-    </ul>
-    <h2>With overlay <span>&amp; activity indication</span></h2>
-    <ul>
-        <li><a href="img/9440861328_1326d64dbd_o.jpg" data-imagelightbox="1"><img
-                src="img/9440861328_1326d64dbd_o.jpg" alt="Sunday nature"></a></li>
-        <li><a href="img/4440609236_fbfbe396b5_o.jpg" data-imagelightbox="1"><img
-                src="img/4440609236_fbfbe396b5_o.jpg" alt="Light after Darkness"></a></li>
-        <li><a href="img/14459672716_2fd51d6133_o.jpg" data-imagelightbox="1"><img
-                src="img/14459672716_2fd51d6133_o.jpg" alt="A Dragonfly!"></a></li>
-    </ul>
-    <h2>With "close" button <span>&amp; activity indication</span></h2>
-    <ul>
-        <li><a href="img/14461842031_f854d30f15_o.jpg" data-imagelightbox="2"><img
-                src="img/14461842031_f854d30f15_o.jpg" alt="Marumi DHG Macro 200 + Tamron 17-50mm. 2.8"></a>
-        </li>
-        <li><a href="img/6178731018_10e6fd6a9d_o.jpg" data-imagelightbox="2"><img
-                src="img/6178731018_10e6fd6a9d_o.jpg" alt="Times Square in the rain"></a></li>
-        <li><a href="img/12173370053_39624f5dc6_o.jpg" data-imagelightbox="2"><img
-                src="img/12173370053_39624f5dc6_o.jpg"
-                alt="Manchester City Centre - Northern Quarter Viewed from the 15th Floor"></a></li>
-    </ul>
-    <h2>With caption <span>&amp; activity indication</span></h2>
-    <ul>
-        <li><a href="img/8677766442_7d184f890e_o.jpg" data-imagelightbox="3"><img
-                src="img/8677766442_7d184f890e_o.jpg" alt="City sunset"></a></li>
-        <li><a href="img/8553010494_a36be7fcc8_o.jpg" data-imagelightbox="3"><img
-                src="img/8553010494_a36be7fcc8_o.jpg" alt="City Lights"></a></li>
-        <li><a href="img/3155078790_b365637b61_o.jpg" data-imagelightbox="3"><img
-                src="img/3155078790_b365637b61_o.jpg" alt="Ready . . . Set ...................."></a></li>
-    </ul>
-    <h2>With navigation <span>&amp; activity indication</span></h2>
-    <ul>
-        <li><a href="img/443441197_c38caf32ee_o.jpg" data-imagelightbox="4"><img
-                src="img/443441197_c38caf32ee_o.jpg" alt="Lights ou"></a></li>
-        <li><a href="img/4436427104_9cd5f0daba_o.jpg" data-imagelightbox="4"><img
-                src="img/4436427104_9cd5f0daba_o.jpg" alt="Golden Gate Bridge"></a></li>
-        <li><a href="img/9212256888_c44fdaa46f_o.jpg" data-imagelightbox="4"><img
-                src="img/9212256888_c44fdaa46f_o.jpg" alt="Red Spruce Peak"></a></li>
-    </ul>
-    <h2>Combination</h2>
-    <ul>
-        <li><a href="img/8573651373_6650a080d1_o.jpg" data-imagelightbox="5"><img
-                src="img/8573651373_6650a080d1_o.jpg"
-                alt="The Lou Ruvo Center for Brain Health, Las Vegas, Nevada"></a></li>
-        <li><a href="img/1483066391_ba9ceea56a_o.jpg" data-imagelightbox="5"><img
-                src="img/1483066391_ba9ceea56a_o.jpg" alt="Nightfall over South End of Stockholm"></a></li>
-        <li><a href="img/5578985145_640f215e42_o.jpg" data-imagelightbox="5"><img
-                src="img/5578985145_640f215e42_o.jpg" alt="Grand Canyon Morning #dailyshoot"></a></li>
-    </ul>
+    
+        
+        <h2>Core</h2>
+        <ul>
+            <li>
+                <a href="https://images.unsplash.com/photo-1452963510533-a6368b834bf8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=02a0de155409ee591fea7040c8acedb3"  data-imagelightbox="0">
+                    <img src="https://images.unsplash.com/photo-1452963510533-a6368b834bf8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=8d7880cd80b6a9f1169d0680c7a3c20d" alt="Photo by Lucia Velez de Paz">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452963409233-e624c6cd4c11?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=eaa1bfb15011d3ee8243c40ffb6a873d"  data-imagelightbox="0">
+                    <img src="https://images.unsplash.com/photo-1452963409233-e624c6cd4c11?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=a39955db5ea08eac8891df7a33be5f39" alt="Photo by Kate Zaidova">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452962654861-dc5c7e89a3aa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f8a1740919fed67fa3e92a5924a3dea"  data-imagelightbox="0">
+                    <img src="https://images.unsplash.com/photo-1452962654861-dc5c7e89a3aa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=38dd54d73602c09921e2a4dffdfc48d8" alt="Photo by Vladimir Kudinov">
+                </a>
+            </li>
+        </ul>
+    
+        
+        <h2>With activity indication</h2>
+        <ul>
+            <li>
+                <a href="https://images.unsplash.com/photo-1452960962994-acf4fd70b632?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e2bf2701a295324cd0c50b924fe208a6"  data-imagelightbox="1">
+                    <img src="https://images.unsplash.com/photo-1452960962994-acf4fd70b632?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=aa2a0c19b8dd309357b4b27d03037825" alt="Photo by davide ragusa">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452957731583-658917836266?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=bf0789c8876a9ad3342cba4c38ac6963"  data-imagelightbox="1">
+                    <img src="https://images.unsplash.com/photo-1452957731583-658917836266?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=0bc4f8220d93fde1e8799b8832d1102a" alt="Photo by Camilla Bundgaard">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452957689853-fd2b4f3d3aa2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2ffc1e7221beba3ba73e48a15e78ef7f"  data-imagelightbox="1">
+                    <img src="https://images.unsplash.com/photo-1452957689853-fd2b4f3d3aa2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=3407b7de6a14bc903d596940985acb26" alt="Photo by Camilla Bundgaard">
+                </a>
+            </li>
+        </ul>
+    
+        
+        <h2>With overlay & activity indication</h2>
+        <ul>
+            <li>
+                <a href="https://images.unsplash.com/photo-1452955767226-455c94ad1bf2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=987ec039e5bde5c23a29f83534c5a624"  data-imagelightbox="2">
+                    <img src="https://images.unsplash.com/photo-1452955767226-455c94ad1bf2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=fdd2f37c0bf66df35763fd971b0e8c2d" alt="Photo by Georgi Petrov">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452953523127-a0949218fc33?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0024f2c2152c99931b896f97a4895e58"  data-imagelightbox="2">
+                    <img src="https://images.unsplash.com/photo-1452953523127-a0949218fc33?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=3aec9b2ff90657182333a50800c5111b" alt="Photo by Harshal Hirve">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452953008873-ae5837174535?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=164f5bdd08fb25efe4e91973e8f392df"  data-imagelightbox="2">
+                    <img src="https://images.unsplash.com/photo-1452953008873-ae5837174535?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=11ecbf2ad3e60ff796998f2ffcfe4942" alt="Photo by Alex Wing">
+                </a>
+            </li>
+        </ul>
+    
+        
+        <h2>With "close" button & activity indication</h2>
+        <ul>
+            <li>
+                <a href="https://images.unsplash.com/photo-1452952797148-d161124db4c8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1e4db22040a9df9756ed8eae82ec9213"  data-imagelightbox="3">
+                    <img src="https://images.unsplash.com/photo-1452952797148-d161124db4c8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=4914671db2468a15d6eabbae5da14316" alt="Photo by Andreas Kahlhöfer">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452948491233-ad8a1ed01085?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=e9d56706132524d1c080ba95b50f66ed"  data-imagelightbox="3">
+                    <img src="https://images.unsplash.com/photo-1452948491233-ad8a1ed01085?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=d7d2fdeeb16f4504d87e971e6a206b08" alt="Photo by Sven Scheuermeier">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452947637175-7dc3f84f3350?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=b6986ce7c9660bb45280b0c4205fc7f1"  data-imagelightbox="3">
+                    <img src="https://images.unsplash.com/photo-1452947637175-7dc3f84f3350?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=32bfef29b8549e2d30492fd1aaa5be51" alt="Photo by Sven Scheuermeier">
+                </a>
+            </li>
+        </ul>
+    
+        
+        <h2>With caption & activity indication</h2>
+        <ul>
+            <li>
+                <a href="https://images.unsplash.com/photo-1452942000102-9c4c7aaeac81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=8c0269da7206a0dcc83a840a3fc7c57a"  data-imagelightbox="4">
+                    <img src="https://images.unsplash.com/photo-1452942000102-9c4c7aaeac81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=b9bc7dec4ff29dbfde154d74148eb94c" alt="Photo by Miriam Miles">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452933006409-19b87dc327b7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=703b8f947dc61bebde4e1fdb5e008eeb"  data-imagelightbox="4">
+                    <img src="https://images.unsplash.com/photo-1452933006409-19b87dc327b7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=74354b0faacb8cf70d2655b9fadf5846" alt="Photo by Timon Studler">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452924872281-04696e001ea3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=17fbca60da821287959eacae0ab6144b"  data-imagelightbox="4">
+                    <img src="https://images.unsplash.com/photo-1452924872281-04696e001ea3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=5905984278271e96ec6e2d0ac7710109" alt="Photo by Justin Cron">
+                </a>
+            </li>
+        </ul>
+    
+        
+        <h2>With navigation & activity indication</h2>
+        <ul>
+            <li>
+                <a href="https://images.unsplash.com/photo-1452924447697-482a22f55f42?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=262ee0b03a7c11fca9765f804fd71f82"  data-imagelightbox="5">
+                    <img src="https://images.unsplash.com/photo-1452924447697-482a22f55f42?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=c87406375635ef275c0d437a279296b4" alt="Photo by Madeline Gibbs">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452915858640-325b467fe554?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0044ed81a2d247724c452ba939980a6d"  data-imagelightbox="5">
+                    <img src="https://images.unsplash.com/photo-1452915858640-325b467fe554?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=02ed27e7bb8e15fb1df067ee7beb89dc" alt="Photo by Nathan Shively">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452915285804-941a8c0cd8af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=251ef836ada7088607cb82c4f51a674d"  data-imagelightbox="5">
+                    <img src="https://images.unsplash.com/photo-1452915285804-941a8c0cd8af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=7886267096c4f963c7e58efdb50fe9fc" alt="Photo by Callum Gale">
+                </a>
+            </li>
+        </ul>
+    
+        
+        <h2>Combination</h2>
+        <ul>
+            <li>
+                <a href="https://images.unsplash.com/photo-1452914793772-af331bf6e4b6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c2e9ecd41653d863b79cecb82afccacf"  data-imagelightbox="6">
+                    <img src="https://images.unsplash.com/photo-1452914793772-af331bf6e4b6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=54a8d7b094f32816d42dd6ab9b410be4" alt="Photo by Sang Huynh">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452909809578-94f609b1facc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=df0633cfc264005f30d4b54a7b4a463e"  data-imagelightbox="6">
+                    <img src="https://images.unsplash.com/photo-1452909809578-94f609b1facc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=bef3ff82adca61b4477f84ea16f4c61d" alt="Photo by Vladimir Kudinov">
+                </a>
+            </li>
+        
+            <li>
+                <a href="https://images.unsplash.com/photo-1452902793598-4a506dd9a38e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a4e8de5703122be9dfc2e9a1eba64f1e"  data-imagelightbox="6">
+                    <img src="https://images.unsplash.com/photo-1452902793598-4a506dd9a38e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=200&fit=max&s=a813370d501160abb1c9b63ba953baa8" alt="Photo by David Boozer">
+                </a>
+            </li>
+        </ul>
+    
+
     <footer>
-        <p>All photos are licensed <a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>. For full
-            credits please referer to <a href="./images.md">images.md</a></p>
+        <p>All photos are licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0</a> and are delivered by <a href="https://unsplash.com">https://unsplash.com</a>.</p>
+        <p>Created by Victor Häggqvist</p>
     </footer>
 </div>
 
-
-<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
-<script src="./touch-imagelightbox.js"></script>
-<!--<script src="./demo.js"></script>-->
+<script src="./LightBox.Core.js"></script>
+<script src="./LightBox.ActivityIndicator.js"></script>
+<script src="./LightBox.Overlay.js"></script>
+<script src="./LightBox.CloseButton.js"></script>
+<script src="./LightBox.Captions.js"></script>
+<script src="./LightBox.Navigation.js"></script>
 <script>
-    new LightBox.LightBox('a[data-imagelightbox="0"]')
+    var box0 = new LightBox.Core('a[data-imagelightbox="0"]');
+
+    var box1 = new LightBox.Core('a[data-imagelightbox="1"]');
+    box1.registerPlugin(new LightBox.ActivityIndicator());
+
+    var box2 = new LightBox.Core('a[data-imagelightbox="2"]');
+    box2.registerPlugin(new LightBox.ActivityIndicator());
+    box2.registerPlugin(new LightBox.Overlay());
+
+    var box3 = new LightBox.Core('a[data-imagelightbox="3"]');
+    box3.registerPlugin(new LightBox.ActivityIndicator());
+    box3.registerPlugin(new LightBox.CloseButton());
+
+    var box4 = new LightBox.Core('a[data-imagelightbox="4"]');
+    box4.registerPlugin(new LightBox.ActivityIndicator());
+    box4.registerPlugin(new LightBox.Captions());
+
+    var box5 = new LightBox.Core('a[data-imagelightbox="5"]');
+    box5.registerPlugin(new LightBox.ActivityIndicator());
+    box5.registerPlugin(new LightBox.Navigation());
+
+    var box6 = new LightBox.Core('a[data-imagelightbox="6"]');
+    box6.registerPlugin(new LightBox.ActivityIndicator());
+    box6.registerPlugin(new LightBox.Navigation());
+    box6.registerPlugin(new LightBox.Captions());
+    box6.registerPlugin(new LightBox.CloseButton());
+    box6.registerPlugin(new LightBox.Overlay());
 </script>
 </body>
 </html>