test demo stuff

22 files changed, 787 insertions, 0 deletions

diff --git a/demo/demo.css b/demo/demo.css
new file mode 100644
index 0000000..019ec65
--- /dev/null
+++ b/demo/demo.css
@@ -0,0 +1 @@
+body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif}#container{margin:50px auto 100px;padding:0 20px;text-align:center;width:700px}#container img{border:0.625em solid rgba(255,255,255,0.5);-moz-box-shadow:0 0 0.313em rgba(0,0,0,0.05);-webkit-box-shadow:0 0 0.313em rgba(0,0,0,0.05);box-shadow:0 0 0.313em rgba(0,0,0,0.05);height:8.75em;-moz-transition:-moz-box-shadow .3s ease, border-color .3s ease;-ms-transition:-ms-box-shadow .3s ease, border-color .3s ease;-o-transition:-o-box-shadow .3s ease, border-color .3s ease;-webkit-transition:-webkit-box-shadow .3s ease, border-color .3s ease;transition:box-shadow .3s ease, border-color .3s ease;width:8.75em}#container img:hover{border-color:#fff;-moz-box-shadow:0 0 0.938em rgba(0,0,0,0.25);-webkit-box-shadow:0 0 0.938em rgba(0,0,0,0.25);box-shadow:0 0 0.938em rgba(0,0,0,0.25)}h1{font-size:37px;line-height:.882em;text-transform:uppercase}h1 span{color:#aaa;display:block;font-size:.588em;line-height:1em}h1:hover{color:#666}h1:hover span{color:#666}h2{border-top:1px solid #ddd;margin-bottom:15px;margin-top:45px;padding-top:45px}h2 span{color:#666}li{display:inline-block;margin:.625em}footer{border-top:1px solid #ddd;color:#aaa;font-size:.875em;margin-top:2.143em;padding-top:2.143em}footer a{color:#666}#fork-button{display:none}@media only screen and (max-width: 660px){#container{width:90%}#container:before,#container:after{content:' ';display:table}#fork-ribbon{display:none}#fork-button{display:inline-block}h1{margin-bottom:5px}h2:first-of-type{margin-top:30px}}ul{padding:0}
diff --git a/demo/img/12173370053_39624f5dc6_o.jpg b/demo/img/12173370053_39624f5dc6_o.jpg
new file mode 100644
index 0000000..8e85078
--- /dev/null
+++ b/demo/img/12173370053_39624f5dc6_o.jpg
diff --git a/demo/img/14448239362_53203a94bf_o.jpg b/demo/img/14448239362_53203a94bf_o.jpg
new file mode 100644
index 0000000..05675f3
--- /dev/null
+++ b/demo/img/14448239362_53203a94bf_o.jpg
diff --git a/demo/img/14459672716_2fd51d6133_o.jpg b/demo/img/14459672716_2fd51d6133_o.jpg
new file mode 100644
index 0000000..af2c646
--- /dev/null
+++ b/demo/img/14459672716_2fd51d6133_o.jpg
diff --git a/demo/img/14461842031_f854d30f15_o.jpg b/demo/img/14461842031_f854d30f15_o.jpg
new file mode 100644
index 0000000..5fa1754
--- /dev/null
+++ b/demo/img/14461842031_f854d30f15_o.jpg
diff --git a/demo/img/1483066391_ba9ceea56a_o.jpg b/demo/img/1483066391_ba9ceea56a_o.jpg
new file mode 100644
index 0000000..67abf9d
--- /dev/null
+++ b/demo/img/1483066391_ba9ceea56a_o.jpg
diff --git a/demo/img/3155078790_b365637b61_o.jpg b/demo/img/3155078790_b365637b61_o.jpg
new file mode 100644
index 0000000..86de9f5
--- /dev/null
+++ b/demo/img/3155078790_b365637b61_o.jpg
diff --git a/demo/img/443441197_c38caf32ee_o.jpg b/demo/img/443441197_c38caf32ee_o.jpg
new file mode 100644
index 0000000..50ff6c4
--- /dev/null
+++ b/demo/img/443441197_c38caf32ee_o.jpg
diff --git a/demo/img/4436427104_9cd5f0daba_o.jpg b/demo/img/4436427104_9cd5f0daba_o.jpg
new file mode 100644
index 0000000..3cbab7f
--- /dev/null
+++ b/demo/img/4436427104_9cd5f0daba_o.jpg
diff --git a/demo/img/4440609236_fbfbe396b5_o.jpg b/demo/img/4440609236_fbfbe396b5_o.jpg
new file mode 100644
index 0000000..0a80b10
--- /dev/null
+++ b/demo/img/4440609236_fbfbe396b5_o.jpg
diff --git a/demo/img/5578985145_640f215e42_o.jpg b/demo/img/5578985145_640f215e42_o.jpg
new file mode 100644
index 0000000..481952c
--- /dev/null
+++ b/demo/img/5578985145_640f215e42_o.jpg
diff --git a/demo/img/6178731018_10e6fd6a9d_o.jpg b/demo/img/6178731018_10e6fd6a9d_o.jpg
new file mode 100644
index 0000000..d30b8ca
--- /dev/null
+++ b/demo/img/6178731018_10e6fd6a9d_o.jpg
diff --git a/demo/img/6260329772_7ce10ac83c_o.jpg b/demo/img/6260329772_7ce10ac83c_o.jpg
new file mode 100644
index 0000000..ddfee82
--- /dev/null
+++ b/demo/img/6260329772_7ce10ac83c_o.jpg
diff --git a/demo/img/7073381043_e3e50744eb_o.jpg b/demo/img/7073381043_e3e50744eb_o.jpg
new file mode 100644
index 0000000..a9be9a9
--- /dev/null
+++ b/demo/img/7073381043_e3e50744eb_o.jpg
diff --git a/demo/img/8553010494_a36be7fcc8_o.jpg b/demo/img/8553010494_a36be7fcc8_o.jpg
new file mode 100644
index 0000000..cadbc3d
--- /dev/null
+++ b/demo/img/8553010494_a36be7fcc8_o.jpg
diff --git a/demo/img/8573651373_6650a080d1_o.jpg b/demo/img/8573651373_6650a080d1_o.jpg
new file mode 100644
index 0000000..777e14f
--- /dev/null
+++ b/demo/img/8573651373_6650a080d1_o.jpg
diff --git a/demo/img/8677766442_7d184f890e_o.jpg b/demo/img/8677766442_7d184f890e_o.jpg
new file mode 100644
index 0000000..28e9752
--- /dev/null
+++ b/demo/img/8677766442_7d184f890e_o.jpg
diff --git a/demo/img/9212256888_c44fdaa46f_o.jpg b/demo/img/9212256888_c44fdaa46f_o.jpg
new file mode 100644
index 0000000..a58ccc1
--- /dev/null
+++ b/demo/img/9212256888_c44fdaa46f_o.jpg
diff --git a/demo/img/9440861328_1326d64dbd_o.jpg b/demo/img/9440861328_1326d64dbd_o.jpg
new file mode 100644
index 0000000..cbc2d8a
--- /dev/null
+++ b/demo/img/9440861328_1326d64dbd_o.jpg
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..7bc02cd
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
+    <meta name="msapplication-tap-highlight" content="no">
+
+    <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>
+</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>
+<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>
+    </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>
+    <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>
+    </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>
+    new LightBox.LightBox('a[data-imagelightbox="0"]')
+</script>
+</body>
+</html>
diff --git a/demo/touch-imagelightbox.js b/demo/touch-imagelightbox.js
new file mode 100644
index 0000000..a4aed89
--- /dev/null
+++ b/demo/touch-imagelightbox.js
@@ -0,0 +1,678 @@
+var LightBox =
+/******/ (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; }; }(); /**
+	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * Created by Victor Häggqvist on 1/12/16.
+	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      */
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.LightBox = undefined;
+
+	var _CSSUtil = __webpack_require__(1);
+
+	var _Log = __webpack_require__(2);
+
+	var _animate = __webpack_require__(4);
+
+	var _FetchImage = __webpack_require__(5);
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var LightBox = exports.LightBox = function () {
+	    function LightBox(targetSelector) {
+	        var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+	        _classCallCheck(this, LightBox);
+
+	        this.targets = document.querySelectorAll(targetSelector);
+
+	        var defaultOptions = {
+	            allowedTypes: 'png|jpg|jpeg|gif',
+	            animationSpeed: 250,
+	            preloadNext: true,
+	            enableKeyboard: true,
+	            quitOnEnd: false,
+	            quitOnImgClick: false,
+	            quitOnDocClick: true,
+	            onStart: false,
+	            onEnd: false,
+	            onLoadStart: false,
+	            onLoadEnd: false
+	        };
+
+	        this.options = Object.assign(options, defaultOptions);
+	        console.log(this.options);
+
+	        this.target = null;
+	        this.image = document.createElement('img');
+	        this.imageWidth = 0;
+	        this.imageHeight = 0;
+	        this.swipeDiff = 0;
+	        this.inProgress = false;
+
+	        this.bindEvents();
+	    }
+
+	    _createClass(LightBox, [{
+	        key: 'bindEvents',
+	        value: function bindEvents() {
+	            var _this = this;
+
+	            console.log(this.targets);
+
+	            Array.prototype.forEach.call(this.targets, function (ele) {
+	                ele.onclick = _this.onImageClick.bind(_this);
+	            });
+	            window.addEventListener('resize', this.windowResizeListener.bind(this));
+	        }
+	    }, {
+	        key: 'onImageClick',
+	        value: function onImageClick(event) {
+	            console.log(event);
+	            var element = event.srcElement.parentElement;
+	            //console.log(this.isTargetValid(element));
+	            if (!this.isTargetValid(element)) return true;
+
+	            event.preventDefault();
+
+	            if (this.inProgress) return;
+
+	            this.inProgress = false;
+
+	            if (this.options.onStart !== false) this.options.onStart();
+
+	            this.target = element;
+
+	            this.loadImage();
+	        }
+	    }, {
+	        key: 'isTargetValid',
+	        value: function isTargetValid(element) {
+	            var validTypes = new RegExp("(\.(" + this.options.allowedTypes + ")$)");
+
+	            //console.log(element.tagName.toLowerCase());
+	            return element.tagName.toLowerCase() === 'a' && validTypes.test(element.href);
+
+	            //return $( element ).prop( 'tagName' ).toLowerCase() === 'a' && options.regexValidObject.test($(element).attr('href') );
+	        }
+	    }, {
+	        key: 'loadImage',
+	        value: function loadImage() {
+	            var _this2 = this;
+
+	            var direction = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
+
+	            _Log.Log.l('loadImage');
+	            _Log.Log.l(this.inProgress);
+	            if (this.inProgress) return false;
+	            _Log.Log.l('not progress');
+	            // if image.length
+	            //if ()
+
+	            this.inProgress = true;
+	            if (this.options.onLoadStart !== false) this.options.onLoadStart();
+
+	            setTimeout(function () {
+	                _Log.Log.l('loadImage in');
+	                (0, _FetchImage.FetchImage)(_this2.target.href).then(function (image) {
+	                    _this2.image = image;
+	                    image.id = 'imagelightbox';
+	                    console.log(image);
+
+	                    //let image = new Image();
+	                    //image.src = this.target.href;
+
+	                    _Log.Log.l(image);
+	                    document.body.appendChild(image);
+	                    //image.appendTo('body');
+	                    _Log.Log.d('setImage');
+	                    _this2.setImage();
+
+	                    var params = { opacity: 1 };
+	                    image.style.opacity = 0;
+
+	                    var prefix = _CSSUtil.CSSUtil.cssTransitionSupport();
+	                    _CSSUtil.CSSUtil.setTransitionProperty(image.style, 'opacity .3s linear');
+	                    //image.style[prefix + 'transform'] = 'opacity 25s linear';
+	                    //image.style.transition = 'opacity .3s linear';
+	                    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;
+	                    }, 5);
+
+	                    if (_this2.options.preloadNext) {
+	                        console.log(_this2.options.preloadNext);
+	                        Array.prototype.forEach.call(_this2.targets, function (t) {
+	                            if (t == _this2.target) {
+	                                console.log(t);
+	                                console.log('match');
+	                            }
+	                        });
+	                        //
+	                        ////this.targets.
+	                        //let nextTarget = targets.eq(targets.index(target) + 1);
+	                        //if (!nextTarget.length) nextTarget = targets.eq(0);
+	                        //$('<img />').attr('src', nextTarget.attr('href')).load();
+	                    }
+
+	                    _this2.image = image;
+	                });
+	            }, this.options.animationSpeed + 100);
+	        }
+
+	        //static animate(elem,style,unit,from,to,time) {
+	        //    if( !elem) return;
+	        //    var start = new Date().getTime(),
+	        //        timer = setInterval(function() {
+	        //            var step = Math.min(1,(new Date().getTime()-start)/time);
+	        //            elem.style[style] = (from+step*(to-from))+unit;
+	        //            if( step == 1) clearInterval(timer);
+	        //        },25);
+	        //    elem.style[style] = from+unit;
+	        //}
+
+	        //animate(id, direction, value, end, speed) {
+	        //    var div = document.getElementById(id);
+	        //    interval = setInterval(function() {
+	        //        if (+(div.style) === end) {
+	        //            clearInterval(interval);
+	        //            return false;
+	        //        }
+	        //        div.style[direction] += value; // or -= as per your needs
+	        //    }, speed);
+	        //}
+
+	    }, {
+	        key: 'setImage',
+	        value: function setImage() {
+	            var _this3 = this;
+
+	            _Log.Log.l(this.image);
+	            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 () {
+	                _this3.imageWidth = tmpImage.width;
+	                _this3.imageHeight = tmpImage.height;
+
+	                if (_this3.imageWidth > screenWidth || _this3.imageHeight > screenHeight) {
+	                    var ratio = _this3.imageWidth / _this3.imageHeight > screenWidth / screenHeight ? _this3.imageWidth / screenWidth : _this3.imageHeight / screenHeight;
+	                    _this3.imageWidth /= ratio;
+	                    _this3.imageHeight /= ratio;
+	                }
+
+	                _this3.image.style.width = _this3.imageWidth + 'px';
+	                _this3.image.style.height = _this3.imageHeight + 'px';
+	                _this3.image.style.top = (window.innerHeight - _this3.imageHeight) / 2 + 'px';
+	                _this3.image.style.left = (window.innerWidth - _this3.imageWidth) / 2 + 'px';
+	            };
+	        }
+	    }, {
+	        key: 'windowResizeListener',
+	        value: function windowResizeListener() {
+	            console.log('resized');
+	        }
+	    }]);
+
+	    return LightBox;
+	}();
+
+/***/ },
+/* 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
+	         * @param value
+	         */
+	        value: function setTransitionProperty(ele, value) {
+	            if (ele.transition === '') {
+	                ele.transition = value;
+	                return;
+	            }
+	            if (ele.WebkitTransition === '') {
+	                ele.WebkitTransition = value;
+	                return;
+	            }
+	            if (ele.MozTransition === '') {
+	                ele.MozTransition = value;
+	                return;
+	            }
+	            if (ele.OTransition === '') {
+	                ele.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 options = {};
+	            var prefix = CSSUtil.cssTransitionSupport();
+	            element.style[prefix + 'transform'] = 'translateX(' + positionX + ')';
+	            element.style[prefix + 'transition'] = prefix + 'transform ' + speed + 's linear';
+	            //element.style = Object.assign(options, element.style);
+	        }
+	    }]);
+
+	    return CSSUtil;
+	}();
+
+	CSSUtil.isCssTransitionSupport = CSSUtil.cssTransitionSupport() !== false;
+
+/***/ },
+/* 2 */
+/***/ 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; }; }(); /**
+	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * Created by Victor Häggqvist on 1/12/16.
+	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      */
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.Log = undefined;
+
+	var _LogLevel = __webpack_require__(3);
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var Log = exports.Log = function () {
+	    function Log() {
+	        _classCallCheck(this, Log);
+	    }
+
+	    _createClass(Log, null, [{
+	        key: 'init',
+
+	        //var instance = null;
+	        value: function init() {
+	            Log.level = _LogLevel.LogLevel.DEBUG;
+	        }
+	    }, {
+	        key: 'silence',
+	        value: function silence() {
+	            Log.level = _LogLevel.LogLevel.SILENT;
+	        }
+	    }, {
+	        key: 'l',
+	        value: function l(msg) {
+	            Log.log(msg, 'log');
+	        }
+	    }, {
+	        key: 'w',
+	        value: function w(msg) {
+	            Log.log(msg, 'warn');
+	        }
+	    }, {
+	        key: 'd',
+	        value: function d(msg) {
+	            Log.log(msg, 'debug');
+	            //console.debug(Log.explode(msg));
+	        }
+	    }, {
+	        key: 'log',
+	        value: function log(args) {
+	            var type = arguments.length <= 1 || arguments[1] === undefined ? 'log' : arguments[1];
+
+	            var baked = Log.explode(args);
+
+	            if (Log.level === _LogLevel.LogLevel.SILENT) return;
+
+	            switch (type) {
+	                case 'info':
+	                    return console.info(baked);
+	                case 'log':
+	                    return console.log(baked);
+	                case 'warn':
+	                    return console.warn(baked);
+	                case 'debug':
+	                    return console.debug(baked);
+	            }
+	        }
+	    }, {
+	        key: 'explode',
+	        value: function explode(args) {
+	            if (!Array.isArray(args)) {
+	                return args;
+	            }
+
+	            return args;
+	        }
+	    }]);
+
+	    return Log;
+	}();
+
+/***/ },
+/* 3 */
+/***/ 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/12/16.
+	 */
+
+	var LogLevel = exports.LogLevel = function LogLevel() {
+	  _classCallCheck(this, LogLevel);
+	};
+
+	LogLevel.SILENT = 0;
+	LogLevel.INFO = 1;
+	LogLevel.VERBOSE = 1;
+	LogLevel.DEBUG = 1;
+
+/***/ },
+/* 4 */
+/***/ function(module, exports) {
+
+	"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; };
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+	var animate = exports.animate = function () {
+
+	    "use strict";
+
+	    var defaults = {
+	        delay: 0,
+	        duration: 400,
+	        easing: "ease"
+	    };
+
+	    // array utils ===================================================================================
+
+	    var head = function head(arr) {
+	        return arr[0];
+	    };
+
+	    var tail = function tail(arr) {
+	        return arr.slice(1);
+	    };
+
+	    var contains = function () {
+	        return Array.prototype.includes ? function (arr, value) {
+	            return arr.includes(value);
+	        } : function (arr, value) {
+	            return arr.some(function (el) {
+	                return el === value;
+	            });
+	        };
+	    }();
+
+	    var toArray = function toArray(obj) {
+	        if (obj.nodeType) {
+	            return [obj];
+	        }
+	        if (Array.isArray(obj)) {
+	            return obj;
+	        }
+	        return [].concat(_toConsumableArray(obj));
+	    };
+
+	    // params utils ==================================================================================
+
+	    var requireParams = function requireParams(func) {
+	        return function (params) {
+	            if ((typeof params === "undefined" ? "undefined" : _typeof(params)) != "object") return;
+	            func(params);
+	        };
+	    };
+
+	    var getParamsEl = function getParamsEl(el) {
+	        return toArray(typeof el == "string" ? selectElements(el) : el);
+	    };
+
+	    // misc utils ====================================================================================
+
+	    var selectElements = function selectElements(selector) {
+	        var context = arguments.length <= 1 || arguments[1] === undefined ? document : arguments[1];
+
+	        if (/^[\#.]?[\w-]+$/.test(selector)) {
+	            if (head(selector) == ".") {
+	                return context.getElementsByClassName(tail(selector));
+	            }
+	            if (head(selector) == "#") {
+	                return context.getElementById(tail(selector));
+	            }
+	            return context.getElementsByTagName(selector);
+	        }
+	        return context.querySelectorAll(selector);
+	    };
+
+	    var hasUnit = function hasUnit(value) {
+	        return (/\D$/.test(value)
+	        );
+	    };
+
+	    // transition ====================================================================================
+
+	    var setTransition = function () {
+	        var addUnit = function addUnit(value) {
+	            if (hasUnit(value)) {
+	                return value;
+	            }
+	            return value + "ms";
+	        };
+	        return function (el, params) {
+	            var transition = {
+	                "property": "opacity," + transformProperty(),
+	                "duration": addUnit(params.duration || defaults.duration),
+	                "timing-function": params.easing || defaults.easing,
+	                "delay": addUnit(params.delay || defaults.delay)
+	            };
+	            Object.keys(transition).forEach(function (prop) {
+	                el.style["transition-" + prop] = transition[prop];
+	            });
+	        };
+	    }();
+
+	    var clearTransition = function clearTransition(params) {
+	        var clearListener = function clearListener(event) {
+	            event.target.removeEventListener("transitionend", clearListener);
+	            if (!params.complete) return;
+	            params.complete.call(event.target);
+	        };
+	        return clearListener;
+	    };
+
+	    // opacity =======================================================================================
+
+	    var setOpacity = function setOpacity(el, params) {
+	        if (params.opacity == undefined) return;
+	        el.style.opacity = params.opacity;
+	    };
+
+	    // transform =====================================================================================
+
+	    var transformProperty = function () {
+	        var transform;
+	        return function () {
+	            if (!transform) {
+	                transform = "transform" in document.body.style ? "transform" : "-webkit-transform";
+	            }
+	            return transform;
+	        };
+	    }();
+
+	    var isTransform = function () {
+	        var ignore = ["complete", "el", "opacity"].concat(Object.keys(defaults));
+	        return function (key) {
+	            return !contains(ignore, key);
+	        };
+	    }();
+
+	    var getTransformFunctions = function getTransformFunctions(params) {
+	        return Object.keys(params).filter(function (key) {
+	            return isTransform(key);
+	        });
+	    };
+
+	    var setTransform = function () {
+	        var addUnit = function addUnit(transformFunction, value) {
+	            if (hasUnit(value) || /scale/.test(transformFunction)) {
+	                return value;
+	            }
+	            if (/rotate|skew/.test(transformFunction)) {
+	                return value + "deg";
+	            }
+	            return value + "px";
+	        };
+	        return function (el, params) {
+	            var transforms = getTransformFunctions(params);
+	            if (!transforms.length) return;
+	            el.style[transformProperty()] = transforms.map(function (func) {
+	                return func + "(" + addUnit(func, params[func]) + ")";
+	            }).join(" ");
+	        };
+	    }();
+
+	    // init ==========================================================================================
+
+	    var setStyle = function setStyle(params) {
+	        return function (el) {
+	            // wait for the next frame
+	            requestAnimationFrame(function () {
+	                [setTransition, setOpacity, setTransform].forEach(function (func) {
+	                    func(el, params);
+	                });
+	            });
+	            el.addEventListener("transitionend", clearTransition(params));
+	        };
+	    };
+
+	    return requireParams(function (params) {
+	        getParamsEl(params.el).forEach(setStyle(params));
+	    });
+	}();
+
+/***/ },
+/* 5 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	/**
+	 * Created by Victor Häggqvist on 1/12/16.
+	 */
+
+	var FetchImage = exports.FetchImage = function FetchImage(url) {
+	    return new Promise(function (resolve, reject) {
+	        fetch(url).then(function (res) {
+	            var img = new Image();
+	            img.src = url;
+	            //console.log(img);
+	            resolve(img);
+	        });
+	    });
+	};
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/demo/touch-imagelightbox.min.css b/demo/touch-imagelightbox.min.css
new file mode 100644
index 0000000..0e2c8fb
--- /dev/null
+++ b/demo/touch-imagelightbox.min.css
@@ -0,0 +1 @@
+html{-ms-touch-action:manipulation;touch-action:manipulation}#imagelightbox{-ms-touch-action:none;touch-action:none;-moz-box-shadow:rgba(0,0,0,0.75) 0 0 50px;-webkit-box-shadow:rgba(0,0,0,0.75) 0 0 50px;box-shadow:rgba(0,0,0,0.75) 0 0 50px;cursor:pointer;position:fixed;z-index:10000}#imagelightbox-loading,#imagelightbox-loading div{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}#imagelightbox-loading{-moz-box-shadow:rgba(0,0,0,0.75) 0 0 40px;-webkit-box-shadow:rgba(0,0,0,0.75) 0 0 40px;box-shadow:rgba(0,0,0,0.75) 0 0 40px;background:#444;background:rgba(0,0,0,0.5);height:20px;left:50%;margin:-20px 0 0 -20px;padding:10px;position:fixed;top:50%;width:20px;z-index:10003}#imagelightbox-loading div{-moz-animation:imagelightbox-loading .5s ease infinite;-o-animation:imagelightbox-loading .5s ease infinite;-webkit-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite;background-color:#fff;height:20px;width:20px}@-webkit-keyframes imagelightbox-loading{0%{opacity:.5;-webkit-transform:scale(0.75)}50%{opacity:1;-webkit-transform:scale(1)}100%{opacity:.5;-webkit-transform:scale(0.75)}}@-moz-keyframes imagelightbox-loading{0%{opacity:.5;-moz-transform:scale(0.75)}50%{opacity:1;-moz-transform:scale(1)}100%{opacity:.5;-moz-transform:scale(0.75)}}@-o-keyframes imagelightbox-loading{0%{opacity:.5;-o-transform:scale(0.75)}50%{opacity:1;-o-transform:scale(1)}100%{opacity:.5;-o-transform:scale(0.75)}}@keyframes imagelightbox-loading{0%{opacity:.5;transform:scale(0.75)}50%{opacity:1;transform:scale(1)}100%{opacity:.5;transform:scale(0.75)}}#imagelightbox-overlay{background:#fff;background:rgba(255,255,255,0.9);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9998}#imagelightbox-close{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background-color:#666;height:40px;position:fixed;right:40px;text-align:left;text-indent:-9999px;top:40px;-moz-transition:color .3s ease;-ms-transition:color .3s ease;-o-transition:color .3s ease;-webkit-transition:color .3s ease;transition:color .3s ease;width:40px;z-index:10002}#imagelightbox-close:hover{background-color:#111}#imagelightbox-close:before,#imagelightbox-close:after{background-color:#fff;bottom:20%;content:'';left:50%;margin-left:-1px;position:absolute;top:20%;width:2px}#imagelightbox-close:before{-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}#imagelightbox-close:after{-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}#imagelightbox-caption{background-color:#666;bottom:0;color:#fff;left:0;padding:10px;position:fixed;right:0;text-align:center;z-index:10001}#imagelightbox-nav{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#444;background-color:rgba(0,0,0,0.5);bottom:60px;left:50%;padding:5px 2px 1px;position:fixed;z-index:10001}#imagelightbox-nav a{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border:1px solid #fff;display:inline-block;height:20px;margin:0 5px;width:20px}#imagelightbox-nav .active{background-color:#fff}#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption,#imagelightbox-nav{-moz-animation:fade-in .25s linear;-o-animation:fade-in .25s linear;-webkit-animation:fade-in .25s linear;animation:fade-in .25s linear}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@media only screen and (max-width: 660px){#imagelightbox-close{right:20px;top:20px}#imagelightbox-nav{bottom:20px}}