From 0e87502b610b2693e8f1308df676e0939cac5c68 Mon Sep 17 00:00:00 2001 From: Victor Häggqvist Date: Wed, 13 Jan 2016 17:06:18 +0100 Subject: test demo stuff --- demo/demo.css | 1 + demo/img/12173370053_39624f5dc6_o.jpg | Bin 0 -> 323261 bytes demo/img/14448239362_53203a94bf_o.jpg | Bin 0 -> 265437 bytes demo/img/14459672716_2fd51d6133_o.jpg | Bin 0 -> 298186 bytes demo/img/14461842031_f854d30f15_o.jpg | Bin 0 -> 359665 bytes demo/img/1483066391_ba9ceea56a_o.jpg | Bin 0 -> 644727 bytes demo/img/3155078790_b365637b61_o.jpg | Bin 0 -> 952752 bytes demo/img/443441197_c38caf32ee_o.jpg | Bin 0 -> 239577 bytes demo/img/4436427104_9cd5f0daba_o.jpg | Bin 0 -> 378646 bytes demo/img/4440609236_fbfbe396b5_o.jpg | Bin 0 -> 484688 bytes demo/img/5578985145_640f215e42_o.jpg | Bin 0 -> 347420 bytes demo/img/6178731018_10e6fd6a9d_o.jpg | Bin 0 -> 865570 bytes demo/img/6260329772_7ce10ac83c_o.jpg | Bin 0 -> 791519 bytes demo/img/7073381043_e3e50744eb_o.jpg | Bin 0 -> 361806 bytes demo/img/8553010494_a36be7fcc8_o.jpg | Bin 0 -> 546541 bytes demo/img/8573651373_6650a080d1_o.jpg | Bin 0 -> 512390 bytes demo/img/8677766442_7d184f890e_o.jpg | Bin 0 -> 218025 bytes demo/img/9212256888_c44fdaa46f_o.jpg | Bin 0 -> 894563 bytes demo/img/9440861328_1326d64dbd_o.jpg | Bin 0 -> 577863 bytes demo/index.html | 107 ++++++ demo/touch-imagelightbox.js | 678 ++++++++++++++++++++++++++++++++++ demo/touch-imagelightbox.min.css | 1 + 22 files changed, 787 insertions(+) create mode 100644 demo/demo.css create mode 100644 demo/img/12173370053_39624f5dc6_o.jpg create mode 100644 demo/img/14448239362_53203a94bf_o.jpg create mode 100644 demo/img/14459672716_2fd51d6133_o.jpg create mode 100644 demo/img/14461842031_f854d30f15_o.jpg create mode 100644 demo/img/1483066391_ba9ceea56a_o.jpg create mode 100644 demo/img/3155078790_b365637b61_o.jpg create mode 100644 demo/img/443441197_c38caf32ee_o.jpg create mode 100644 demo/img/4436427104_9cd5f0daba_o.jpg create mode 100644 demo/img/4440609236_fbfbe396b5_o.jpg create mode 100644 demo/img/5578985145_640f215e42_o.jpg create mode 100644 demo/img/6178731018_10e6fd6a9d_o.jpg create mode 100644 demo/img/6260329772_7ce10ac83c_o.jpg create mode 100644 demo/img/7073381043_e3e50744eb_o.jpg create mode 100644 demo/img/8553010494_a36be7fcc8_o.jpg create mode 100644 demo/img/8573651373_6650a080d1_o.jpg create mode 100644 demo/img/8677766442_7d184f890e_o.jpg create mode 100644 demo/img/9212256888_c44fdaa46f_o.jpg create mode 100644 demo/img/9440861328_1326d64dbd_o.jpg create mode 100644 demo/index.html create mode 100644 demo/touch-imagelightbox.js create mode 100644 demo/touch-imagelightbox.min.css (limited to 'demo') 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 Binary files /dev/null and b/demo/img/12173370053_39624f5dc6_o.jpg differ diff --git a/demo/img/14448239362_53203a94bf_o.jpg b/demo/img/14448239362_53203a94bf_o.jpg new file mode 100644 index 0000000..05675f3 Binary files /dev/null and b/demo/img/14448239362_53203a94bf_o.jpg differ diff --git a/demo/img/14459672716_2fd51d6133_o.jpg b/demo/img/14459672716_2fd51d6133_o.jpg new file mode 100644 index 0000000..af2c646 Binary files /dev/null and b/demo/img/14459672716_2fd51d6133_o.jpg differ diff --git a/demo/img/14461842031_f854d30f15_o.jpg b/demo/img/14461842031_f854d30f15_o.jpg new file mode 100644 index 0000000..5fa1754 Binary files /dev/null and b/demo/img/14461842031_f854d30f15_o.jpg differ diff --git a/demo/img/1483066391_ba9ceea56a_o.jpg b/demo/img/1483066391_ba9ceea56a_o.jpg new file mode 100644 index 0000000..67abf9d Binary files /dev/null and b/demo/img/1483066391_ba9ceea56a_o.jpg differ diff --git a/demo/img/3155078790_b365637b61_o.jpg b/demo/img/3155078790_b365637b61_o.jpg new file mode 100644 index 0000000..86de9f5 Binary files /dev/null and b/demo/img/3155078790_b365637b61_o.jpg differ diff --git a/demo/img/443441197_c38caf32ee_o.jpg b/demo/img/443441197_c38caf32ee_o.jpg new file mode 100644 index 0000000..50ff6c4 Binary files /dev/null and b/demo/img/443441197_c38caf32ee_o.jpg differ diff --git a/demo/img/4436427104_9cd5f0daba_o.jpg b/demo/img/4436427104_9cd5f0daba_o.jpg new file mode 100644 index 0000000..3cbab7f Binary files /dev/null and b/demo/img/4436427104_9cd5f0daba_o.jpg differ diff --git a/demo/img/4440609236_fbfbe396b5_o.jpg b/demo/img/4440609236_fbfbe396b5_o.jpg new file mode 100644 index 0000000..0a80b10 Binary files /dev/null and b/demo/img/4440609236_fbfbe396b5_o.jpg differ diff --git a/demo/img/5578985145_640f215e42_o.jpg b/demo/img/5578985145_640f215e42_o.jpg new file mode 100644 index 0000000..481952c Binary files /dev/null and b/demo/img/5578985145_640f215e42_o.jpg differ diff --git a/demo/img/6178731018_10e6fd6a9d_o.jpg b/demo/img/6178731018_10e6fd6a9d_o.jpg new file mode 100644 index 0000000..d30b8ca Binary files /dev/null and b/demo/img/6178731018_10e6fd6a9d_o.jpg differ diff --git a/demo/img/6260329772_7ce10ac83c_o.jpg b/demo/img/6260329772_7ce10ac83c_o.jpg new file mode 100644 index 0000000..ddfee82 Binary files /dev/null and b/demo/img/6260329772_7ce10ac83c_o.jpg differ diff --git a/demo/img/7073381043_e3e50744eb_o.jpg b/demo/img/7073381043_e3e50744eb_o.jpg new file mode 100644 index 0000000..a9be9a9 Binary files /dev/null and b/demo/img/7073381043_e3e50744eb_o.jpg differ diff --git a/demo/img/8553010494_a36be7fcc8_o.jpg b/demo/img/8553010494_a36be7fcc8_o.jpg new file mode 100644 index 0000000..cadbc3d Binary files /dev/null and b/demo/img/8553010494_a36be7fcc8_o.jpg differ diff --git a/demo/img/8573651373_6650a080d1_o.jpg b/demo/img/8573651373_6650a080d1_o.jpg new file mode 100644 index 0000000..777e14f Binary files /dev/null and b/demo/img/8573651373_6650a080d1_o.jpg differ diff --git a/demo/img/8677766442_7d184f890e_o.jpg b/demo/img/8677766442_7d184f890e_o.jpg new file mode 100644 index 0000000..28e9752 Binary files /dev/null and b/demo/img/8677766442_7d184f890e_o.jpg differ diff --git a/demo/img/9212256888_c44fdaa46f_o.jpg b/demo/img/9212256888_c44fdaa46f_o.jpg new file mode 100644 index 0000000..a58ccc1 Binary files /dev/null and b/demo/img/9212256888_c44fdaa46f_o.jpg differ diff --git a/demo/img/9440861328_1326d64dbd_o.jpg b/demo/img/9440861328_1326d64dbd_o.jpg new file mode 100644 index 0000000..cbc2d8a Binary files /dev/null and b/demo/img/9440861328_1326d64dbd_o.jpg differ 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 @@ + + + + + + + + + Image Lightbox Demo + + + + + + + +Fork me on GitHub +
+
+

Image LightboxResponsive & Touch-Friendly

+ +

View source of demos on Github.

+
+ +

With activity indication

+ +

With overlay & activity indication

+ +

With "close" button & activity indication

+ +

With caption & activity indication

+ +

With navigation & activity indication

+ +

Combination

+ + +
+ + + + + + + + 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); + //$('').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}} -- cgit v1.2.3