├── .gitignore ├── Gruntfile.js ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── bower.json ├── dist ├── ekko-lightbox.css ├── ekko-lightbox.js ├── ekko-lightbox.js.map ├── ekko-lightbox.min.js └── ekko-lightbox.min.js.map ├── ekko-lightbox.js ├── ekko-lightbox.less ├── examples └── bs3.html ├── index.html ├── package.json ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Jetbrains 2 | *.idea 3 | 4 | # Node 5 | node_modules 6 | .DS_Store 7 | 8 | # Bower 9 | bower_components 10 | 11 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | "use strict"; 3 | 4 | grunt.initConfig({ 5 | banner: 6 | '/*!\n' + 7 | ' * Lightbox for Bootstrap by @ashleydw\n' + 8 | ' * https://github.com/ashleydw/lightbox\n' + 9 | ' *\n' + 10 | ' * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE\n' + 11 | ' */', 12 | 13 | less: { 14 | dist: { 15 | files: { 16 | 'dist/ekko-lightbox.css': 'ekko-lightbox.less' 17 | } 18 | } 19 | }, 20 | babel: { 21 | options: { 22 | sourceMap: true, 23 | modules: 'ignore' 24 | }, 25 | dist: { 26 | files: { 27 | 'dist/ekko-lightbox.js': 'ekko-lightbox.js', 28 | } 29 | } 30 | }, 31 | uglify: { 32 | options: { 33 | sourceMap: true, 34 | }, 35 | js: { 36 | files: { 37 | 'dist/ekko-lightbox.min.js': 'dist/ekko-lightbox.js' 38 | } 39 | } 40 | }, 41 | postcss: { 42 | options: { 43 | map: true, 44 | processors: [ 45 | require('autoprefixer')({ 46 | browsers: ['last 2 versions'] 47 | }), 48 | require('cssnano')() 49 | ] 50 | }, 51 | dist: { 52 | src: 'dist/*.css' 53 | } 54 | }, 55 | stamp: { 56 | options: { 57 | banner: '<%= banner %>\n+function ($) {\n', 58 | footer: '\n}(jQuery);' 59 | }, 60 | lightbox: { 61 | files: { 62 | src: ['dist/ekko-lightbox.js', 'dist/ekko-lightbox.min.js'] 63 | } 64 | } 65 | }, 66 | watch: { 67 | babel: { 68 | files: ['ekko-lightbox.js', 'ekko-lightbox.less'], 69 | tasks: ['dev'] 70 | } 71 | } 72 | }); 73 | 74 | grunt.loadNpmTasks('grunt-stamp'); 75 | grunt.loadNpmTasks('grunt-babel'); 76 | grunt.loadNpmTasks('grunt-contrib-uglify'); 77 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 78 | grunt.loadNpmTasks('grunt-contrib-watch'); 79 | grunt.loadNpmTasks('grunt-contrib-less'); 80 | grunt.loadNpmTasks('grunt-postcss'); 81 | 82 | grunt.registerTask('dev', ['babel', 'less']); 83 | grunt.registerTask('dist', ['babel', 'less', 'stamp', 'postcss:dist', 'uglify']); 84 | grunt.registerTask('default', ['dist']); 85 | }; -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | So, you're experiencing a problem? 2 | 3 | If you're not sure how to use the lightbox, or are experiencing a problem with it, please ask on [StackOverflow](http://stackoverflow.com/) - you will most definitely get a faster response time and it leaves this GitHub issues for actual bugs and not support questions. 4 | 5 | If you really do think you have a bug, please: 6 | 7 | - [ ] Provide a link to your site or a full example 8 | - [ ] Provide screenshots where appropriate 9 | - [ ] Browser name and version 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2011-2015 ashleydw 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap Lightbox 2 | ======== 3 | 4 | A lightbox module for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal plugin. 5 | 6 | See the github page for docs: http://ashleydw.github.io/lightbox 7 | 8 | Contributing 9 | ---- 10 | Instead of modifying the /dist/*.js JavaScript files directly, you should instead modify the ekko-lightbox.js file and run the grunt task. 11 | 12 | Copyright and license 13 | ---- 14 | 15 | Code released under [the MIT license](https://github.com/ashleydw/lightbox/blob/master/LICENSE). 16 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ekko-lightbox", 3 | "version": "5.3.0", 4 | "main": "./dist/ekko-lightbox.min.js", 5 | "ignore": [ 6 | "**/.*", 7 | "examples", 8 | "node_modules", 9 | "bower_components", 10 | "test", 11 | "tests" 12 | ], 13 | "dependencies": { 14 | "bootstrap": ">= 4.0.0-alpha.3" 15 | }, 16 | "homepage": "https://github.com/ashleydw/lightbox", 17 | "authors": [ 18 | "ashleydw " 19 | ], 20 | "description": "A lightbox gallery plugin for Bootstrap based on the modal plugin", 21 | "keywords": [ 22 | "lightbox", 23 | "gallery", 24 | "bootstrap", 25 | "jquery", 26 | "modal" 27 | ], 28 | "license": "MIT" 29 | } 30 | -------------------------------------------------------------------------------- /dist/ekko-lightbox.css: -------------------------------------------------------------------------------- 1 | .ekko-lightbox{display:-ms-flexbox!important;display:flex!important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:0!important}.ekko-lightbox-container{position:relative}.ekko-lightbox-container>div.ekko-lightbox-item{position:absolute;top:0;left:0;bottom:0;right:0;width:100%}.ekko-lightbox iframe{width:100%;height:100%}.ekko-lightbox-nav-overlay{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex}.ekko-lightbox-nav-overlay a{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0;transition:opacity .5s;color:#fff;font-size:30px;z-index:1}.ekko-lightbox-nav-overlay a>*{-ms-flex-positive:1;flex-grow:1}.ekko-lightbox-nav-overlay a>:focus{outline:none}.ekko-lightbox-nav-overlay a span{padding:0 30px}.ekko-lightbox-nav-overlay a:last-child span{text-align:right}.ekko-lightbox-nav-overlay a:hover{text-decoration:none}.ekko-lightbox-nav-overlay a:focus{outline:none}.ekko-lightbox-nav-overlay a.disabled{cursor:default;visibility:hidden}.ekko-lightbox a:hover{opacity:1;text-decoration:none}.ekko-lightbox .modal-dialog{display:none}.ekko-lightbox .modal-footer{text-align:left}.ekko-lightbox-loader{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.ekko-lightbox-loader>div{width:40px;height:40px;position:relative;text-align:center}.ekko-lightbox-loader>div>div{width:100%;height:100%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;animation:a 2s infinite ease-in-out}.ekko-lightbox-loader>div>div:last-child{animation-delay:-1s}.modal-dialog .ekko-lightbox-loader>div>div{background-color:#333}@keyframes a{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}} 2 | /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVra28tbGlnaHRib3guY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGVBQ0UsOEJBQXlCLEFBQXpCLHVCQUF5QixBQUN6QixzQkFBb0IsQUFBcEIsbUJBQW9CLEFBQ3BCLHFCQUF3QixBQUF4Qix1QkFBd0IsQUFDeEIseUJBQTZCLENBQzlCLEFBQ0QseUJBQ0UsaUJBQW1CLENBQ3BCLEFBQ0QsZ0RBQ0Usa0JBQW1CLEFBQ25CLE1BQU8sQUFDUCxPQUFRLEFBQ1IsU0FBVSxBQUNWLFFBQVMsQUFDVCxVQUFZLENBQ2IsQUFDRCxzQkFDRSxXQUFZLEFBQ1osV0FBYSxDQUNkLEFBQ0QsMkJBQ0UsVUFBYSxBQUNiLGtCQUFtQixBQUNuQixNQUFPLEFBQ1AsT0FBUSxBQUNSLFdBQVksQUFDWixZQUFhLEFBQ2Isb0JBQWMsQUFBZCxZQUFjLENBQ2YsQUFDRCw2QkFDRSxXQUFRLEFBQVIsT0FBUSxBQUNSLG9CQUFjLEFBQWQsYUFBYyxBQUNkLHNCQUFvQixBQUFwQixtQkFBb0IsQUFDcEIsVUFBVyxBQUNYLHVCQUF5QixBQUN6QixXQUFZLEFBQ1osZUFBZ0IsQUFDaEIsU0FBYSxDQUNkLEFBQ0QsK0JBQ0Usb0JBQWEsQUFBYixXQUFhLENBQ2QsQUFDRCxvQ0FDRSxZQUFjLENBQ2YsQUFDRCxrQ0FDRSxjQUFnQixDQUNqQixBQUNELDZDQUNFLGdCQUFrQixDQUNuQixBQUNELG1DQUNFLG9CQUFzQixDQUN2QixBQUNELG1DQUNFLFlBQWMsQ0FDZixBQUNELHNDQUNFLGVBQWdCLEFBQ2hCLGlCQUFtQixDQUNwQixBQUNELHVCQUNFLFVBQVcsQUFDWCxvQkFBc0IsQ0FDdkIsQUFDRCw2QkFDRSxZQUFjLENBQ2YsQUFDRCw2QkFDRSxlQUFpQixDQUNsQixBQUNELHNCQUNFLGtCQUFtQixBQUNuQixNQUFPLEFBQ1AsT0FBUSxBQUNSLFNBQVUsQUFDVixRQUFTLEFBQ1QsV0FBWSxBQUNaLG9CQUFjLEFBQWQsYUFBYyxBQUVkLDBCQUF1QixBQUF2QixzQkFBdUIsQUFFdkIscUJBQXdCLEFBQXhCLHVCQUF3QixBQUV4QixzQkFBb0IsQUFBcEIsa0JBQW9CLENBQ3JCLEFBQ0QsMEJBQ0UsV0FBWSxBQUNaLFlBQWEsQUFDYixrQkFBbUIsQUFDbkIsaUJBQW1CLENBQ3BCLEFBQ0QsOEJBQ0UsV0FBWSxBQUNaLFlBQWEsQUFDYixrQkFBbUIsQUFDbkIsc0JBQXVCLEFBQ3ZCLFdBQWEsQUFDYixrQkFBbUIsQUFDbkIsTUFBTyxBQUNQLE9BQVEsQUFDUixtQ0FBNkMsQ0FDOUMsQUFDRCx5Q0FDRSxtQkFBcUIsQ0FDdEIsQUFDRCw0Q0FDRSxxQkFBdUIsQ0FDeEIsQUFVRCxhQUNFLE1BRUUsbUJBQW9CLEFBQ3BCLDBCQUE0QixDQUM3QixBQUNELElBQ0UsbUJBQW9CLEFBQ3BCLDBCQUE0QixDQUM3QixDQUNGIiwiZmlsZSI6ImVra28tbGlnaHRib3guY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmVra28tbGlnaHRib3gge1xuICBkaXNwbGF5OiBmbGV4ICFpbXBvcnRhbnQ7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwYWRkaW5nLXJpZ2h0OiAwcHghaW1wb3J0YW50O1xufVxuLmVra28tbGlnaHRib3gtY29udGFpbmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuLmVra28tbGlnaHRib3gtY29udGFpbmVyID4gZGl2LmVra28tbGlnaHRib3gtaXRlbSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICBib3R0b206IDA7XG4gIHJpZ2h0OiAwO1xuICB3aWR0aDogMTAwJTtcbn1cbi5la2tvLWxpZ2h0Ym94IGlmcmFtZSB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSB7XG4gIHotaW5kZXg6IDEwMDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhIHtcbiAgZmxleDogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjVzO1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAzMHB4O1xuICB6LWluZGV4OiAxMDA7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhID4gKiB7XG4gIGZsZXgtZ3JvdzogMTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1vdmVybGF5IGEgPiAqOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1vdmVybGF5IGEgc3BhbiB7XG4gIHBhZGRpbmc6IDAgMzBweDtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1vdmVybGF5IGE6bGFzdC1jaGlsZCBzcGFuIHtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhOmhvdmVyIHtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuLmVra28tbGlnaHRib3gtbmF2LW92ZXJsYXkgYTpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhLmRpc2FibGVkIHtcbiAgY3Vyc29yOiBkZWZhdWx0O1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG4uZWtrby1saWdodGJveCBhOmhvdmVyIHtcbiAgb3BhY2l0eTogMTtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuLmVra28tbGlnaHRib3ggLm1vZGFsLWRpYWxvZyB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG4uZWtrby1saWdodGJveCAubW9kYWwtZm9vdGVyIHtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbn1cbi5la2tvLWxpZ2h0Ym94LWxvYWRlciB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICBib3R0b206IDA7XG4gIHJpZ2h0OiAwO1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgLyogZXN0YWJsaXNoIGZsZXggY29udGFpbmVyICovXG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIC8qIG1ha2UgbWFpbiBheGlzIHZlcnRpY2FsICovXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAvKiBjZW50ZXIgaXRlbXMgdmVydGljYWxseSwgaW4gdGhpcyBjYXNlICovXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYge1xuICB3aWR0aDogNDBweDtcbiAgaGVpZ2h0OiA0MHB4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5la2tvLWxpZ2h0Ym94LWxvYWRlciA+IGRpdiA+IGRpdiB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgb3BhY2l0eTogMC42O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgYW5pbWF0aW9uOiBzay1ib3VuY2UgMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQ7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYgPiBkaXY6bGFzdC1jaGlsZCB7XG4gIGFuaW1hdGlvbi1kZWxheTogLTFzO1xufVxuLm1vZGFsLWRpYWxvZyAuZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYgPiBkaXYge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzO1xufVxuQC13ZWJraXQta2V5ZnJhbWVzIHNrLWJvdW5jZSB7XG4gIDAlLFxuICAxMDAlIHtcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGUoMCk7XG4gIH1cbiAgNTAlIHtcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGUoMSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2stYm91bmNlIHtcbiAgMCUsXG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMCk7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDApO1xuICB9XG4gIDUwJSB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGUoMSk7XG4gIH1cbn1cbiJdfQ== */ -------------------------------------------------------------------------------- /dist/ekko-lightbox.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Lightbox for Bootstrap by @ashleydw 3 | * https://github.com/ashleydw/lightbox 4 | * 5 | * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE 6 | */ 7 | +function ($) { 8 | 9 | 'use strict'; 10 | 11 | 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; }; })(); 12 | 13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 14 | 15 | var Lightbox = (function ($) { 16 | 17 | var NAME = 'ekkoLightbox'; 18 | var JQUERY_NO_CONFLICT = $.fn[NAME]; 19 | 20 | var Default = { 21 | title: '', 22 | footer: '', 23 | maxWidth: 9999, 24 | maxHeight: 9999, 25 | showArrows: true, //display the left / right arrows or not 26 | wrapping: true, //if true, gallery loops infinitely 27 | type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it 28 | alwaysShowClose: false, //always show the close button, even if there is no title 29 | loadingMessage: '
', // http://tobiasahlin.com/spinkit/ 30 | leftArrow: '❮', 31 | rightArrow: '❯', 32 | strings: { 33 | close: 'Close', 34 | fail: 'Failed to load image:', 35 | type: 'Could not detect remote target type. Force the type using data-type' 36 | }, 37 | doc: document, // if in an iframe can specify top.document 38 | onShow: function onShow() {}, 39 | onShown: function onShown() {}, 40 | onHide: function onHide() {}, 41 | onHidden: function onHidden() {}, 42 | onNavigate: function onNavigate() {}, 43 | onContentLoaded: function onContentLoaded() {} 44 | }; 45 | 46 | var Lightbox = (function () { 47 | _createClass(Lightbox, null, [{ 48 | key: 'Default', 49 | 50 | /** 51 | Class properties: 52 | _$element: null -> the element currently being displayed 53 | _$modal: The bootstrap modal generated 54 | _$modalDialog: The .modal-dialog 55 | _$modalContent: The .modal-content 56 | _$modalBody: The .modal-body 57 | _$modalHeader: The .modal-header 58 | _$modalFooter: The .modal-footer 59 | _$lightboxContainerOne: Container of the first lightbox element 60 | _$lightboxContainerTwo: Container of the second lightbox element 61 | _$lightboxBody: First element in the container 62 | _$modalArrows: The overlayed arrows container 63 | _$galleryItems: Other 's available for this gallery 64 | _galleryName: Name of the current data('gallery') showing 65 | _galleryIndex: The current index of the _$galleryItems being shown 66 | _config: {} the options for the modal 67 | _modalId: unique id for the current lightbox 68 | _padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content 69 | */ 70 | 71 | get: function get() { 72 | return Default; 73 | } 74 | }]); 75 | 76 | function Lightbox($element, config) { 77 | var _this = this; 78 | 79 | _classCallCheck(this, Lightbox); 80 | 81 | this._config = $.extend({}, Default, config); 82 | this._$modalArrows = null; 83 | this._galleryIndex = 0; 84 | this._galleryName = null; 85 | this._padding = null; 86 | this._border = null; 87 | this._titleIsShown = false; 88 | this._footerIsShown = false; 89 | this._wantedWidth = 0; 90 | this._wantedHeight = 0; 91 | this._touchstartX = 0; 92 | this._touchendX = 0; 93 | 94 | this._modalId = 'ekkoLightbox-' + Math.floor(Math.random() * 1000 + 1); 95 | this._$element = $element instanceof jQuery ? $element : $($element); 96 | 97 | this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3; 98 | 99 | var h4 = '

' + (this._config.title || " ") + '

'; 100 | var btn = ''; 101 | 102 | var header = '
' + (this._isBootstrap3 ? btn + h4 : h4 + btn) + '
'; 103 | var footer = '
' + (this._config.footer || " ") + '
'; 104 | var body = '
'; 105 | var dialog = '
' + header + body + footer + '
'; 106 | $(this._config.doc.body).append(''); 107 | 108 | this._$modal = $('#' + this._modalId, this._config.doc); 109 | this._$modalDialog = this._$modal.find('.modal-dialog').first(); 110 | this._$modalContent = this._$modal.find('.modal-content').first(); 111 | this._$modalBody = this._$modal.find('.modal-body').first(); 112 | this._$modalHeader = this._$modal.find('.modal-header').first(); 113 | this._$modalFooter = this._$modal.find('.modal-footer').first(); 114 | 115 | this._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first(); 116 | this._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first(); 117 | this._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first(); 118 | 119 | this._border = this._calculateBorders(); 120 | this._padding = this._calculatePadding(); 121 | 122 | this._galleryName = this._$element.data('gallery'); 123 | if (this._galleryName) { 124 | this._$galleryItems = $(document.body).find('*[data-gallery="' + this._galleryName + '"]'); 125 | this._galleryIndex = this._$galleryItems.index(this._$element); 126 | $(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this)); 127 | 128 | // add the directional arrows to the modal 129 | if (this._config.showArrows && this._$galleryItems.length > 1) { 130 | this._$lightboxContainer.append('
' + this._config.leftArrow + '' + this._config.rightArrow + '
'); 131 | this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first(); 132 | this._$lightboxContainer.on('click', 'a:first-child', function (event) { 133 | event.preventDefault(); 134 | return _this.navigateLeft(); 135 | }); 136 | this._$lightboxContainer.on('click', 'a:last-child', function (event) { 137 | event.preventDefault(); 138 | return _this.navigateRight(); 139 | }); 140 | this.updateNavigation(); 141 | } 142 | } 143 | 144 | this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () { 145 | _this._toggleLoading(true); 146 | _this._handle(); 147 | return _this._config.onShown.call(_this); 148 | }).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function () { 149 | if (_this._galleryName) { 150 | $(document).off('keydown.ekkoLightbox'); 151 | $(window).off('resize.ekkoLightbox'); 152 | } 153 | _this._$modal.remove(); 154 | return _this._config.onHidden.call(_this); 155 | }).modal(this._config); 156 | 157 | $(window).on('resize.ekkoLightbox', function () { 158 | _this._resize(_this._wantedWidth, _this._wantedHeight); 159 | }); 160 | this._$lightboxContainer.on('touchstart', function () { 161 | _this._touchstartX = event.changedTouches[0].screenX; 162 | }).on('touchend', function () { 163 | _this._touchendX = event.changedTouches[0].screenX; 164 | _this._swipeGesure(); 165 | }); 166 | } 167 | 168 | _createClass(Lightbox, [{ 169 | key: 'element', 170 | value: function element() { 171 | return this._$element; 172 | } 173 | }, { 174 | key: 'modal', 175 | value: function modal() { 176 | return this._$modal; 177 | } 178 | }, { 179 | key: 'navigateTo', 180 | value: function navigateTo(index) { 181 | 182 | if (index < 0 || index > this._$galleryItems.length - 1) return this; 183 | 184 | this._galleryIndex = index; 185 | 186 | this.updateNavigation(); 187 | 188 | this._$element = $(this._$galleryItems.get(this._galleryIndex)); 189 | this._handle(); 190 | } 191 | }, { 192 | key: 'navigateLeft', 193 | value: function navigateLeft() { 194 | 195 | if (!this._$galleryItems) return; 196 | 197 | if (this._$galleryItems.length === 1) return; 198 | 199 | if (this._galleryIndex === 0) { 200 | if (this._config.wrapping) this._galleryIndex = this._$galleryItems.length - 1;else return; 201 | } else //circular 202 | this._galleryIndex--; 203 | 204 | this._config.onNavigate.call(this, 'left', this._galleryIndex); 205 | return this.navigateTo(this._galleryIndex); 206 | } 207 | }, { 208 | key: 'navigateRight', 209 | value: function navigateRight() { 210 | 211 | if (!this._$galleryItems) return; 212 | 213 | if (this._$galleryItems.length === 1) return; 214 | 215 | if (this._galleryIndex === this._$galleryItems.length - 1) { 216 | if (this._config.wrapping) this._galleryIndex = 0;else return; 217 | } else //circular 218 | this._galleryIndex++; 219 | 220 | this._config.onNavigate.call(this, 'right', this._galleryIndex); 221 | return this.navigateTo(this._galleryIndex); 222 | } 223 | }, { 224 | key: 'updateNavigation', 225 | value: function updateNavigation() { 226 | if (!this._config.wrapping) { 227 | var $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay'); 228 | if (this._galleryIndex === 0) $nav.find('a:first-child').addClass('disabled');else $nav.find('a:first-child').removeClass('disabled'); 229 | 230 | if (this._galleryIndex === this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled');else $nav.find('a:last-child').removeClass('disabled'); 231 | } 232 | } 233 | }, { 234 | key: 'close', 235 | value: function close() { 236 | return this._$modal.modal('hide'); 237 | } 238 | 239 | // helper private methods 240 | }, { 241 | key: '_navigationalBinder', 242 | value: function _navigationalBinder(event) { 243 | event = event || window.event; 244 | if (event.keyCode === 39) return this.navigateRight(); 245 | if (event.keyCode === 37) return this.navigateLeft(); 246 | } 247 | 248 | // type detection private methods 249 | }, { 250 | key: '_detectRemoteType', 251 | value: function _detectRemoteType(src, type) { 252 | 253 | type = type || false; 254 | 255 | if (!type && this._isImage(src)) type = 'image'; 256 | if (!type && this._getYoutubeId(src)) type = 'youtube'; 257 | if (!type && this._getVimeoId(src)) type = 'vimeo'; 258 | if (!type && this._getInstagramId(src)) type = 'instagram'; 259 | if (type == 'audio' || type == 'video' || !type && this._isMedia(src)) type = 'media'; 260 | if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(type) < 0) type = 'url'; 261 | 262 | return type; 263 | } 264 | }, { 265 | key: '_getRemoteContentType', 266 | value: function _getRemoteContentType(src) { 267 | var response = $.ajax({ 268 | type: 'HEAD', 269 | url: src, 270 | async: false 271 | }); 272 | var contentType = response.getResponseHeader('Content-Type'); 273 | return contentType; 274 | } 275 | }, { 276 | key: '_isImage', 277 | value: function _isImage(string) { 278 | return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i); 279 | } 280 | }, { 281 | key: '_isMedia', 282 | value: function _isMedia(string) { 283 | return string && string.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i); 284 | } 285 | }, { 286 | key: '_containerToUse', 287 | value: function _containerToUse() { 288 | var _this2 = this; 289 | 290 | // if currently showing an image, fade it out and remove 291 | var $toUse = this._$lightboxBodyTwo; 292 | var $current = this._$lightboxBodyOne; 293 | 294 | if (this._$lightboxBodyTwo.hasClass('in')) { 295 | $toUse = this._$lightboxBodyOne; 296 | $current = this._$lightboxBodyTwo; 297 | } 298 | 299 | $current.removeClass('in show'); 300 | setTimeout(function () { 301 | if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty(); 302 | if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty(); 303 | }, 500); 304 | 305 | $toUse.addClass('in show'); 306 | return $toUse; 307 | } 308 | }, { 309 | key: '_handle', 310 | value: function _handle() { 311 | 312 | var $toUse = this._containerToUse(); 313 | this._updateTitleAndFooter(); 314 | 315 | var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href'); 316 | var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false); 317 | 318 | if (['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type); 319 | 320 | switch (currentType) { 321 | case 'image': 322 | this._preloadImage(currentRemote, $toUse); 323 | this._preloadImageByIndex(this._galleryIndex, 3); 324 | break; 325 | case 'youtube': 326 | this._showYoutubeVideo(currentRemote, $toUse); 327 | break; 328 | case 'vimeo': 329 | this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse); 330 | break; 331 | case 'instagram': 332 | this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse); 333 | break; 334 | case 'media': 335 | this._showHtml5Media(currentRemote, $toUse); 336 | break; 337 | default: 338 | // url 339 | this._loadRemoteContent(currentRemote, $toUse); 340 | break; 341 | } 342 | 343 | return this; 344 | } 345 | }, { 346 | key: '_getYoutubeId', 347 | value: function _getYoutubeId(string) { 348 | if (!string) return false; 349 | var matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/); 350 | return matches && matches[2].length === 11 ? matches[2] : false; 351 | } 352 | }, { 353 | key: '_getVimeoId', 354 | value: function _getVimeoId(string) { 355 | return string && string.indexOf('vimeo') > 0 ? string : false; 356 | } 357 | }, { 358 | key: '_getInstagramId', 359 | value: function _getInstagramId(string) { 360 | return string && string.indexOf('instagram') > 0 ? string : false; 361 | } 362 | 363 | // layout private methods 364 | }, { 365 | key: '_toggleLoading', 366 | value: function _toggleLoading(show) { 367 | show = show || false; 368 | if (show) { 369 | this._$modalDialog.css('display', 'none'); 370 | this._$modal.removeClass('in show'); 371 | $('.modal-backdrop').append(this._config.loadingMessage); 372 | } else { 373 | this._$modalDialog.css('display', 'block'); 374 | this._$modal.addClass('in show'); 375 | $('.modal-backdrop').find('.ekko-lightbox-loader').remove(); 376 | } 377 | return this; 378 | } 379 | }, { 380 | key: '_calculateBorders', 381 | value: function _calculateBorders() { 382 | return { 383 | top: this._totalCssByAttribute('border-top-width'), 384 | right: this._totalCssByAttribute('border-right-width'), 385 | bottom: this._totalCssByAttribute('border-bottom-width'), 386 | left: this._totalCssByAttribute('border-left-width') 387 | }; 388 | } 389 | }, { 390 | key: '_calculatePadding', 391 | value: function _calculatePadding() { 392 | return { 393 | top: this._totalCssByAttribute('padding-top'), 394 | right: this._totalCssByAttribute('padding-right'), 395 | bottom: this._totalCssByAttribute('padding-bottom'), 396 | left: this._totalCssByAttribute('padding-left') 397 | }; 398 | } 399 | }, { 400 | key: '_totalCssByAttribute', 401 | value: function _totalCssByAttribute(attribute) { 402 | return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10); 403 | } 404 | }, { 405 | key: '_updateTitleAndFooter', 406 | value: function _updateTitleAndFooter() { 407 | var title = this._$element.data('title') || ""; 408 | var caption = this._$element.data('footer') || ""; 409 | 410 | this._titleIsShown = false; 411 | if (title || this._config.alwaysShowClose) { 412 | this._titleIsShown = true; 413 | this._$modalHeader.css('display', '').find('.modal-title').html(title || " "); 414 | } else this._$modalHeader.css('display', 'none'); 415 | 416 | this._footerIsShown = false; 417 | if (caption) { 418 | this._footerIsShown = true; 419 | this._$modalFooter.css('display', '').html(caption); 420 | } else this._$modalFooter.css('display', 'none'); 421 | 422 | return this; 423 | } 424 | }, { 425 | key: '_showYoutubeVideo', 426 | value: function _showYoutubeVideo(remote, $containerForElement) { 427 | var id = this._getYoutubeId(remote); 428 | var query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : ''; 429 | var width = this._$element.data('width') || 560; 430 | var height = this._$element.data('height') || width / (560 / 315); 431 | return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement); 432 | } 433 | }, { 434 | key: '_showVimeoVideo', 435 | value: function _showVimeoVideo(id, $containerForElement) { 436 | var width = this._$element.data('width') || 500; 437 | var height = this._$element.data('height') || width / (560 / 315); 438 | return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement); 439 | } 440 | }, { 441 | key: '_showInstagramVideo', 442 | value: function _showInstagramVideo(id, $containerForElement) { 443 | // instagram load their content into iframe's so this can be put straight into the element 444 | var width = this._$element.data('width') || 612; 445 | var height = width + 80; 446 | id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash 447 | $containerForElement.html(''); 448 | this._resize(width, height); 449 | this._config.onContentLoaded.call(this); 450 | if (this._$modalArrows) //hide the arrows when showing video 451 | this._$modalArrows.css('display', 'none'); 452 | this._toggleLoading(false); 453 | return this; 454 | } 455 | }, { 456 | key: '_showVideoIframe', 457 | value: function _showVideoIframe(url, width, height, $containerForElement) { 458 | // should be used for videos only. for remote content use loadRemoteContent (data-type=url) 459 | height = height || width; // default to square 460 | $containerForElement.html('
'); 461 | this._resize(width, height); 462 | this._config.onContentLoaded.call(this); 463 | if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video 464 | this._toggleLoading(false); 465 | return this; 466 | } 467 | }, { 468 | key: '_showHtml5Media', 469 | value: function _showHtml5Media(url, $containerForElement) { 470 | // should be used for videos only. for remote content use loadRemoteContent (data-type=url) 471 | var contentType = this._getRemoteContentType(url); 472 | if (!contentType) { 473 | return this._error(this._config.strings.type); 474 | } 475 | var mediaType = ''; 476 | if (contentType.indexOf('audio') > 0) { 477 | mediaType = 'audio'; 478 | } else { 479 | mediaType = 'video'; 480 | } 481 | var width = this._$element.data('width') || 560; 482 | var height = this._$element.data('height') || width / (560 / 315); 483 | $containerForElement.html('
<' + mediaType + ' width="' + width + '" height="' + height + '" preload="auto" autoplay controls class="embed-responsive-item">' + this._config.strings.type + '
'); 484 | this._resize(width, height); 485 | this._config.onContentLoaded.call(this); 486 | if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video 487 | this._toggleLoading(false); 488 | return this; 489 | } 490 | }, { 491 | key: '_loadRemoteContent', 492 | value: function _loadRemoteContent(url, $containerForElement) { 493 | var _this3 = this; 494 | 495 | var width = this._$element.data('width') || 560; 496 | var height = this._$element.data('height') || 560; 497 | 498 | var disableExternalCheck = this._$element.data('disableExternalCheck') || false; 499 | this._toggleLoading(false); 500 | 501 | // external urls are loading into an iframe 502 | // local ajax can be loaded into the container itself 503 | if (!disableExternalCheck && !this._isExternal(url)) { 504 | $containerForElement.load(url, $.proxy(function () { 505 | return _this3._$element.trigger('loaded.bs.modal');l; 506 | })); 507 | } else { 508 | $containerForElement.html(''); 509 | this._config.onContentLoaded.call(this); 510 | } 511 | 512 | if (this._$modalArrows) //hide the arrows when remote content 513 | this._$modalArrows.css('display', 'none'); 514 | 515 | this._resize(width, height); 516 | return this; 517 | } 518 | }, { 519 | key: '_isExternal', 520 | value: function _isExternal(url) { 521 | var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/); 522 | if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true; 523 | 524 | if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(':(' + ({ 525 | "http:": 80, 526 | "https:": 443 527 | })[location.protocol] + ')?$'), "") !== location.host) return true; 528 | 529 | return false; 530 | } 531 | }, { 532 | key: '_error', 533 | value: function _error(message) { 534 | console.error(message); 535 | this._containerToUse().html(message); 536 | this._resize(300, 300); 537 | return this; 538 | } 539 | }, { 540 | key: '_preloadImageByIndex', 541 | value: function _preloadImageByIndex(startIndex, numberOfTimes) { 542 | 543 | if (!this._$galleryItems) return; 544 | 545 | var next = $(this._$galleryItems.get(startIndex), false); 546 | if (typeof next == 'undefined') return; 547 | 548 | var src = next.attr('data-remote') || next.attr('href'); 549 | if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false); 550 | 551 | if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1); 552 | } 553 | }, { 554 | key: '_preloadImage', 555 | value: function _preloadImage(src, $containerForImage) { 556 | var _this4 = this; 557 | 558 | $containerForImage = $containerForImage || false; 559 | 560 | var img = new Image(); 561 | if ($containerForImage) { 562 | (function () { 563 | 564 | // if loading takes > 200ms show a loader 565 | var loadingTimeout = setTimeout(function () { 566 | $containerForImage.append(_this4._config.loadingMessage); 567 | }, 200); 568 | 569 | img.onload = function () { 570 | if (loadingTimeout) clearTimeout(loadingTimeout); 571 | loadingTimeout = null; 572 | var image = $(''); 573 | image.attr('src', img.src); 574 | image.addClass('img-fluid'); 575 | 576 | // backward compatibility for bootstrap v3 577 | image.css('width', '100%'); 578 | 579 | $containerForImage.html(image); 580 | if (_this4._$modalArrows) _this4._$modalArrows.css('display', ''); // remove display to default to css property 581 | 582 | _this4._resize(img.width, img.height); 583 | _this4._toggleLoading(false); 584 | return _this4._config.onContentLoaded.call(_this4); 585 | }; 586 | img.onerror = function () { 587 | _this4._toggleLoading(false); 588 | return _this4._error(_this4._config.strings.fail + (' ' + src)); 589 | }; 590 | })(); 591 | } 592 | 593 | img.src = src; 594 | return img; 595 | } 596 | }, { 597 | key: '_swipeGesure', 598 | value: function _swipeGesure() { 599 | if (this._touchendX < this._touchstartX) { 600 | return this.navigateRight(); 601 | } 602 | if (this._touchendX > this._touchstartX) { 603 | return this.navigateLeft(); 604 | } 605 | } 606 | }, { 607 | key: '_resize', 608 | value: function _resize(width, height) { 609 | 610 | height = height || width; 611 | this._wantedWidth = width; 612 | this._wantedHeight = height; 613 | 614 | var imageAspecRatio = width / height; 615 | 616 | // if width > the available space, scale down the expected width and height 617 | var widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right; 618 | 619 | // force 10px margin if window size > 575px 620 | var addMargin = this._config.doc.body.clientWidth > 575 ? 20 : 0; 621 | var discountMargin = this._config.doc.body.clientWidth > 575 ? 0 : 20; 622 | 623 | var maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth); 624 | 625 | if (width + widthBorderAndPadding > maxWidth) { 626 | height = (maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio; 627 | width = maxWidth; 628 | } else width = width + widthBorderAndPadding; 629 | 630 | var headerHeight = 0, 631 | footerHeight = 0; 632 | 633 | // as the resize is performed the modal is show, the calculate might fail 634 | // if so, default to the default sizes 635 | if (this._footerIsShown) footerHeight = this._$modalFooter.outerHeight(true) || 55; 636 | 637 | if (this._titleIsShown) headerHeight = this._$modalHeader.outerHeight(true) || 67; 638 | 639 | var borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top; 640 | 641 | //calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins 642 | var margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom')); 643 | 644 | var maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight); 645 | 646 | if (height > maxHeight) { 647 | // if height > the available height, scale down the width 648 | width = Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding; 649 | } 650 | 651 | this._$lightboxContainer.css('height', maxHeight); 652 | this._$modalDialog.css('flex', 1).css('maxWidth', width); 653 | 654 | var modal = this._$modal.data('bs.modal'); 655 | if (modal) { 656 | // v4 method is mistakenly protected 657 | try { 658 | modal._handleUpdate(); 659 | } catch (Exception) { 660 | modal.handleUpdate(); 661 | } 662 | } 663 | return this; 664 | } 665 | }], [{ 666 | key: '_jQueryInterface', 667 | value: function _jQueryInterface(config) { 668 | var _this5 = this; 669 | 670 | config = config || {}; 671 | return this.each(function () { 672 | var $this = $(_this5); 673 | var _config = $.extend({}, Lightbox.Default, $this.data(), typeof config === 'object' && config); 674 | 675 | new Lightbox(_this5, _config); 676 | }); 677 | } 678 | }]); 679 | 680 | return Lightbox; 681 | })(); 682 | 683 | $.fn[NAME] = Lightbox._jQueryInterface; 684 | $.fn[NAME].Constructor = Lightbox; 685 | $.fn[NAME].noConflict = function () { 686 | $.fn[NAME] = JQUERY_NO_CONFLICT; 687 | return Lightbox._jQueryInterface; 688 | }; 689 | 690 | return Lightbox; 691 | })(jQuery); 692 | //# sourceMappingURL=ekko-lightbox.js.map 693 | 694 | }(jQuery); 695 | -------------------------------------------------------------------------------- /dist/ekko-lightbox.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../ekko-lightbox.js"],"names":[],"mappings":"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","file":"ekko-lightbox.js","sourcesContent":["const Lightbox = (($) => {\n\n\tconst NAME = 'ekkoLightbox'\n\tconst JQUERY_NO_CONFLICT = $.fn[NAME]\n\n\tconst Default = {\n\t\ttitle: '',\n\t\tfooter: '',\n\t\tmaxWidth: 9999,\n\t\tmaxHeight: 9999,\n\t\tshowArrows: true, //display the left / right arrows or not\n\t\twrapping: true, //if true, gallery loops infinitely\n\t\ttype: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it\n\t\talwaysShowClose: false, //always show the close button, even if there is no title\n\t\tloadingMessage: '
', // http://tobiasahlin.com/spinkit/\n\t\tleftArrow: '❮',\n\t\trightArrow: '❯',\n\t\tstrings: {\n\t\t\tclose: 'Close',\n\t\t\tfail: 'Failed to load image:',\n\t\t\ttype: 'Could not detect remote target type. Force the type using data-type',\n\t\t},\n\t\tdoc: document, // if in an iframe can specify top.document\n\t\tonShow() {},\n\t\tonShown() {},\n\t\tonHide() {},\n\t\tonHidden() {},\n\t\tonNavigate() {},\n\t\tonContentLoaded() {}\n\t}\n\n\tclass Lightbox {\n\n\t\t/**\n\n\t Class properties:\n\n\t\t _$element: null -> the element currently being displayed\n\t\t _$modal: The bootstrap modal generated\n\t\t _$modalDialog: The .modal-dialog\n\t\t _$modalContent: The .modal-content\n\t\t _$modalBody: The .modal-body\n\t\t _$modalHeader: The .modal-header\n\t\t _$modalFooter: The .modal-footer\n\t\t _$lightboxContainerOne: Container of the first lightbox element\n\t\t _$lightboxContainerTwo: Container of the second lightbox element\n\t\t _$lightboxBody: First element in the container\n\t\t _$modalArrows: The overlayed arrows container\n\n\t\t _$galleryItems: Other 's available for this gallery\n\t\t _galleryName: Name of the current data('gallery') showing\n\t\t _galleryIndex: The current index of the _$galleryItems being shown\n\n\t\t _config: {} the options for the modal\n\t\t _modalId: unique id for the current lightbox\n\t\t _padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content\n\n\t\t */\n\n\t\tstatic get Default() {\n\t\t\treturn Default\n\t\t}\n\n\t\tconstructor($element, config) {\n\t\t\tthis._config = $.extend({}, Default, config)\n\t\t\tthis._$modalArrows = null\n\t\t\tthis._galleryIndex = 0\n\t\t\tthis._galleryName = null\n\t\t\tthis._padding = null\n\t\t\tthis._border = null\n\t\t\tthis._titleIsShown = false\n\t\t\tthis._footerIsShown = false\n\t\t\tthis._wantedWidth = 0\n\t\t\tthis._wantedHeight = 0\n\t\t\tthis._touchstartX = 0\n\t\t\tthis._touchendX = 0\n\n\t\t\tthis._modalId = `ekkoLightbox-${Math.floor((Math.random() * 1000) + 1)}`;\n\t\t\tthis._$element = $element instanceof jQuery ? $element : $($element)\n\n\t\t\tthis._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3;\n\n\t\t\tlet h4 = `

${this._config.title || \" \"}

`;\n\t\t\tlet btn = ``;\n\n\t\t\tlet header = `
`+(this._isBootstrap3 ? btn+h4 : h4+btn)+`
`;\n\t\t\tlet footer = `
${this._config.footer || \" \"}
`;\n\t\t\tlet body = '
'\n\t\t\tlet dialog = `
${header}${body}${footer}
`\n\t\t\t$(this._config.doc.body).append(`
${dialog}
`)\n\n\t\t\tthis._$modal = $(`#${this._modalId}`, this._config.doc)\n\t\t\tthis._$modalDialog = this._$modal.find('.modal-dialog').first()\n\t\t\tthis._$modalContent = this._$modal.find('.modal-content').first()\n\t\t\tthis._$modalBody = this._$modal.find('.modal-body').first()\n\t\t\tthis._$modalHeader = this._$modal.find('.modal-header').first()\n\t\t\tthis._$modalFooter = this._$modal.find('.modal-footer').first()\n\n\t\t\tthis._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first()\n\t\t\tthis._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first()\n\t\t\tthis._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first()\n\n\t\t\tthis._border = this._calculateBorders()\n\t\t\tthis._padding = this._calculatePadding()\n\n\t\t\tthis._galleryName = this._$element.data('gallery')\n\t\t\tif (this._galleryName) {\n\t\t\t\tthis._$galleryItems = $(document.body).find(`*[data-gallery=\"${this._galleryName}\"]`)\n\t\t\t\tthis._galleryIndex = this._$galleryItems.index(this._$element)\n\t\t\t\t$(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this))\n\n\t\t\t\t// add the directional arrows to the modal\n\t\t\t\tif (this._config.showArrows && this._$galleryItems.length > 1) {\n\t\t\t\t\tthis._$lightboxContainer.append(`
${this._config.leftArrow}${this._config.rightArrow}
`)\n\t\t\t\t\tthis._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first()\n\t\t\t\t\tthis._$lightboxContainer.on('click', 'a:first-child', event => {\n\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\treturn this.navigateLeft()\n\t\t\t\t\t})\n\t\t\t\t\tthis._$lightboxContainer.on('click', 'a:last-child', event => {\n\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\treturn this.navigateRight()\n\t\t\t\t\t})\n\t\t\t\t\tthis.updateNavigation()\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis._$modal\n\t\t\t.on('show.bs.modal', this._config.onShow.bind(this))\n\t\t\t.on('shown.bs.modal', () => {\n\t\t\t\tthis._toggleLoading(true)\n\t\t\t\tthis._handle()\n\t\t\t\treturn this._config.onShown.call(this)\n\t\t\t})\n\t\t\t.on('hide.bs.modal', this._config.onHide.bind(this))\n\t\t\t.on('hidden.bs.modal', () => {\n\t\t\t\tif (this._galleryName) {\n\t\t\t\t\t$(document).off('keydown.ekkoLightbox')\n\t\t\t\t\t$(window).off('resize.ekkoLightbox')\n\t\t\t\t}\n\t\t\t\tthis._$modal.remove()\n\t\t\t\treturn this._config.onHidden.call(this)\n\t\t\t})\n\t\t\t.modal(this._config)\n\n\t\t\t$(window).on('resize.ekkoLightbox', () => {\n\t\t\t\tthis._resize(this._wantedWidth, this._wantedHeight)\n\t\t\t})\n\t\t\tthis._$lightboxContainer\n\t\t\t.on('touchstart', () => {\n\t\t\t\tthis._touchstartX = event.changedTouches[0].screenX;\n\n\t\t\t})\n\t\t\t.on('touchend', () => {\n\t\t\t\tthis._touchendX = event.changedTouches[0].screenX;\n\t\t\t this._swipeGesure();\n\t\t\t})\n\t\t}\n\n\t\telement() {\n\t\t\treturn this._$element;\n\t\t}\n\n\t\tmodal() {\n\t\t\treturn this._$modal;\n\t\t}\n\n\t\tnavigateTo(index) {\n\n\t\t\tif (index < 0 || index > this._$galleryItems.length-1)\n\t\t\t\treturn this\n\n\t\t\tthis._galleryIndex = index\n\n\t\t\tthis.updateNavigation()\n\n\t\t\tthis._$element = $(this._$galleryItems.get(this._galleryIndex))\n\t\t\tthis._handle();\n\t\t}\n\n\t\tnavigateLeft() {\n\n\t\t\tif(!this._$galleryItems)\n\t\t\t\treturn;\n\n\t\t\tif (this._$galleryItems.length === 1)\n\t\t\t\treturn\n\n\t\t\tif (this._galleryIndex === 0) {\n\t\t\t\tif (this._config.wrapping)\n\t\t\t\t\tthis._galleryIndex = this._$galleryItems.length - 1\n\t\t\t\telse\n\t\t\t\t\treturn\n\t\t\t}\n\t\t\telse //circular\n\t\t\t\tthis._galleryIndex--\n\n\t\t\tthis._config.onNavigate.call(this, 'left', this._galleryIndex)\n\t\t\treturn this.navigateTo(this._galleryIndex)\n\t\t}\n\n\t\tnavigateRight() {\n\n\t\t\tif(!this._$galleryItems)\n\t\t\t\treturn;\n\n\t\t\tif (this._$galleryItems.length === 1)\n\t\t\t\treturn\n\n\t\t\tif (this._galleryIndex === this._$galleryItems.length - 1) {\n\t\t\t\tif (this._config.wrapping)\n\t\t\t\t\tthis._galleryIndex = 0\n\t\t\t\telse\n\t\t\t\t\treturn\n\t\t\t}\n\t\t\telse //circular\n\t\t\t\tthis._galleryIndex++\n\n\t\t\tthis._config.onNavigate.call(this, 'right', this._galleryIndex)\n\t\t\treturn this.navigateTo(this._galleryIndex)\n\t\t}\n\n\t\tupdateNavigation() {\n\t\t\tif (!this._config.wrapping) {\n\t\t\t\tlet $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay')\n\t\t\t\tif (this._galleryIndex === 0)\n\t\t\t\t\t$nav.find('a:first-child').addClass('disabled')\n\t\t\t\telse\n\t\t\t\t\t$nav.find('a:first-child').removeClass('disabled')\n\n\t\t\t\tif (this._galleryIndex === this._$galleryItems.length - 1)\n\t\t\t\t\t$nav.find('a:last-child').addClass('disabled')\n\t\t\t\telse\n\t\t\t\t\t$nav.find('a:last-child').removeClass('disabled')\n\t\t\t}\n\t\t}\n\n\t\tclose() {\n\t\t\treturn this._$modal.modal('hide');\n\t\t}\n\n\t\t// helper private methods\n\t\t_navigationalBinder(event) {\n\t\t\tevent = event || window.event;\n\t\t\tif (event.keyCode === 39)\n\t\t\t\treturn this.navigateRight()\n\t\t\tif (event.keyCode === 37)\n\t\t\t\treturn this.navigateLeft()\n\t\t}\n\n\t\t// type detection private methods\n\t\t_detectRemoteType(src, type) {\n\n\t\t\ttype = type || false;\n\n\t\t\tif(!type && this._isImage(src))\n\t\t\t\ttype = 'image';\n\t\t\tif(!type && this._getYoutubeId(src))\n\t\t\t\ttype = 'youtube';\n\t\t\tif(!type && this._getVimeoId(src))\n\t\t\t\ttype = 'vimeo';\n\t\t\tif(!type && this._getInstagramId(src))\n\t\t\t\ttype = 'instagram';\n\t\t\tif(type == 'audio' || type == 'video' || (!type && this._isMedia(src)))\n\t\t\t\ttype = 'media';\n\t\t\tif(!type || ['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(type) < 0)\n\t\t\t\ttype = 'url';\n\n\t\t\treturn type;\n\t\t}\n\n\t\t_getRemoteContentType(src) {\n\t\t\tlet response = $.ajax({\n\t\t\t\ttype: 'HEAD',\n\t\t\t\turl: src,\n\t\t\t\tasync: false\n\t\t\t});\n\t\t\tlet contentType = response.getResponseHeader('Content-Type')\n\t\t\treturn contentType;\n\t\t}\n\n\t\t_isImage(string) {\n\t\t\treturn string && string.match(/(^data:image\\/.*,)|(\\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\\?|#).*)?$)/i)\n\t\t}\n\n\t\t_isMedia(string) {\n\t\t\treturn string && string.match(/(\\.(mp3|mp4|ogg|webm|wav)((\\?|#).*)?$)/i)\n\t\t}\n\n\t\t_containerToUse() {\n\t\t\t// if currently showing an image, fade it out and remove\n\t\t\tlet $toUse = this._$lightboxBodyTwo\n\t\t\tlet $current = this._$lightboxBodyOne\n\n\t\t\tif(this._$lightboxBodyTwo.hasClass('in')) {\n\t\t\t\t$toUse = this._$lightboxBodyOne\n\t\t\t\t$current = this._$lightboxBodyTwo\n\t\t\t}\n\n\t\t\t$current.removeClass('in show')\n\t\t\tsetTimeout(() => {\n\t\t\t\tif(!this._$lightboxBodyTwo.hasClass('in'))\n\t\t\t\t\tthis._$lightboxBodyTwo.empty()\n\t\t\t\tif(!this._$lightboxBodyOne.hasClass('in'))\n\t\t\t\t\tthis._$lightboxBodyOne.empty()\n\t\t\t}, 500)\n\n\t\t\t$toUse.addClass('in show')\n\t\t\treturn $toUse\n\t\t}\n\n\t\t_handle() {\n\n\t\t\tlet $toUse = this._containerToUse()\n\t\t\tthis._updateTitleAndFooter()\n\n\t\t\tlet currentRemote = this._$element.attr('data-remote') || this._$element.attr('href')\n\t\t\tlet currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false)\n\n\t\t\tif(['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0)\n\t\t\t\treturn this._error(this._config.strings.type)\n\n\t\t\tswitch(currentType) {\n\t\t\t\tcase 'image':\n\t\t\t\t\tthis._preloadImage(currentRemote, $toUse)\n\t\t\t\t\tthis._preloadImageByIndex(this._galleryIndex, 3)\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'youtube':\n\t\t\t\t\tthis._showYoutubeVideo(currentRemote, $toUse);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'vimeo':\n\t\t\t\t\tthis._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'instagram':\n\t\t\t\t\tthis._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'media':\n\t\t\t\t\tthis._showHtml5Media(currentRemote, $toUse);\n\t\t\t\t\tbreak;\n\t\t\t\tdefault: // url\n\t\t\t\t\tthis._loadRemoteContent(currentRemote, $toUse);\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\treturn this;\n\t\t}\n\n\t\t_getYoutubeId(string) {\n\t\t\tif(!string)\n\t\t\t\treturn false;\n\t\t\tlet matches = string.match(/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|\\&v=)([^#\\&\\?]*).*/)\n\t\t\treturn (matches && matches[2].length === 11) ? matches[2] : false\n\t\t}\n\n\t\t_getVimeoId(string) {\n\t\t\treturn string && string.indexOf('vimeo') > 0 ? string : false\n\t\t}\n\n\t\t_getInstagramId(string) {\n\t\t\treturn string && string.indexOf('instagram') > 0 ? string : false\n\t\t}\n\n\t\t// layout private methods\n\t\t_toggleLoading(show) {\n\t\t\tshow = show || false\n\t\t\tif(show) {\n\t\t\t\tthis._$modalDialog.css('display', 'none')\n\t\t\t\tthis._$modal.removeClass('in show')\n\t\t\t\t$('.modal-backdrop').append(this._config.loadingMessage)\n\t\t\t}\n\t\t\telse {\n\t\t\t\tthis._$modalDialog.css('display', 'block')\n\t\t\t\tthis._$modal.addClass('in show')\n\t\t\t\t$('.modal-backdrop').find('.ekko-lightbox-loader').remove()\n\t\t\t}\n\t\t\treturn this;\n\t\t}\n\n\t\t_calculateBorders() {\n\t\t\treturn {\n\t\t\t\ttop: this._totalCssByAttribute('border-top-width'),\n\t\t\t\tright: this._totalCssByAttribute('border-right-width'),\n\t\t\t\tbottom: this._totalCssByAttribute('border-bottom-width'),\n\t\t\t\tleft: this._totalCssByAttribute('border-left-width'),\n\t\t\t}\n\t\t}\n\n\t\t_calculatePadding() {\n\t\t\treturn {\n\t\t\t\ttop: this._totalCssByAttribute('padding-top'),\n\t\t\t\tright: this._totalCssByAttribute('padding-right'),\n\t\t\t\tbottom: this._totalCssByAttribute('padding-bottom'),\n\t\t\t\tleft: this._totalCssByAttribute('padding-left'),\n\t\t\t}\n\t\t}\n\n\t\t_totalCssByAttribute(attribute) {\n\t\t\treturn parseInt(this._$modalDialog.css(attribute), 10) +\n\t\t\t\tparseInt(this._$modalContent.css(attribute), 10) +\n\t\t\t\tparseInt(this._$modalBody.css(attribute), 10)\n\t\t}\n\n\t\t_updateTitleAndFooter() {\n\t\t\tlet title = this._$element.data('title') || \"\"\n\t\t\tlet caption = this._$element.data('footer') || \"\"\n\n\t\t\tthis._titleIsShown = false\n\t\t\tif (title || this._config.alwaysShowClose) {\n\t\t\t\tthis._titleIsShown = true\n\t\t\t\tthis._$modalHeader.css('display', '').find('.modal-title').html(title || \" \")\n\t\t\t}\n\t\t\telse\n\t\t\t\tthis._$modalHeader.css('display', 'none')\n\n\t\t\tthis._footerIsShown = false\n\t\t\tif (caption) {\n\t\t\t\tthis._footerIsShown = true\n\t\t\t\tthis._$modalFooter.css('display', '').html(caption)\n\t\t\t}\n\t\t\telse\n\t\t\t\tthis._$modalFooter.css('display', 'none')\n\n\t\t\treturn this;\n\t\t}\n\n\t\t_showYoutubeVideo(remote, $containerForElement) {\n\t\t\tlet id = this._getYoutubeId(remote)\n\t\t\tlet query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : ''\n\t\t\tlet width = this._$element.data('width') || 560\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\n\t\t\treturn this._showVideoIframe(\n\t\t\t\t`//www.youtube.com/embed/${id}?badge=0&autoplay=1&html5=1${query}`,\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t\t$containerForElement\n\t\t\t);\n\t\t}\n\n\t\t_showVimeoVideo(id, $containerForElement) {\n\t\t\tlet width = this._$element.data('width') || 500\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\n\t\t\treturn this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement)\n\t\t}\n\n\t\t_showInstagramVideo(id, $containerForElement) {\n\t\t\t// instagram load their content into iframe's so this can be put straight into the element\n\t\t\tlet width = this._$element.data('width') || 612\n\t\t\tlet height = width + 80;\n\t\t\tid = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash\n\t\t\t$containerForElement.html(``);\n\t\t\tthis._resize(width, height);\n\t\t\tthis._config.onContentLoaded.call(this);\n\t\t\tif (this._$modalArrows) //hide the arrows when showing video\n\t\t\t\tthis._$modalArrows.css('display', 'none');\n\t\t\tthis._toggleLoading(false);\n\t\t\treturn this;\n\t\t}\n\n\t\t_showVideoIframe(url, width, height, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)\n\t\t\theight = height || width; // default to square\n\t\t\t$containerForElement.html(`
`);\n\t\t\tthis._resize(width, height);\n\t\t\tthis._config.onContentLoaded.call(this);\n\t\t\tif (this._$modalArrows)\n\t\t\t\tthis._$modalArrows.css('display', 'none'); //hide the arrows when showing video\n\t\t\tthis._toggleLoading(false);\n\t\t\treturn this;\n\t\t}\n \n\t\t_showHtml5Media(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)\n\t\t\tlet contentType = this._getRemoteContentType(url);\n\t\t\tif(!contentType){\n\t\t\t\treturn this._error(this._config.strings.type)\n\t\t\t}\n\t\t\tlet mediaType = '';\n\t\t\tif(contentType.indexOf('audio') > 0){\n\t\t\t\tmediaType = 'audio';\n\t\t\t}else{\n\t\t\t\tmediaType = 'video';\n\t\t\t}\n\t\t\tlet width = this._$element.data('width') || 560\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\n\t\t\t$containerForElement.html(`
<${mediaType} width=\"${width}\" height=\"${height}\" preload=\"auto\" autoplay controls class=\"embed-responsive-item\">${this._config.strings.type}
`);\n\t\t\tthis._resize(width, height);\n\t\t\tthis._config.onContentLoaded.call(this);\n\t\t\tif (this._$modalArrows)\n\t\t\t\tthis._$modalArrows.css('display', 'none'); //hide the arrows when showing video\n\t\t\tthis._toggleLoading(false);\n\t\t\treturn this;\n\t\t}\n\n\t\t_loadRemoteContent(url, $containerForElement) {\n\t\t\tlet width = this._$element.data('width') || 560;\n\t\t\tlet height = this._$element.data('height') || 560;\n\n\t\t\tlet disableExternalCheck = this._$element.data('disableExternalCheck') || false;\n\t\t\tthis._toggleLoading(false);\n\n\t\t\t// external urls are loading into an iframe\n\t\t\t// local ajax can be loaded into the container itself\n\t\t\tif (!disableExternalCheck && !this._isExternal(url)) {\n\t\t\t\t$containerForElement.load(url, $.proxy(() => {\n\t\t\t\t\treturn this._$element.trigger('loaded.bs.modal');l\n\t\t\t\t}));\n\n\t\t\t} else {\n\t\t\t\t$containerForElement.html(``);\n\t\t\t\tthis._config.onContentLoaded.call(this);\n\t\t\t}\n\n\t\t\tif (this._$modalArrows) //hide the arrows when remote content\n\t\t\t\tthis._$modalArrows.css('display', 'none')\n\n\t\t\tthis._resize(width, height);\n\t\t\treturn this;\n\t\t}\n\n\t\t_isExternal(url) {\n\t\t\tlet match = url.match(/^([^:\\/?#]+:)?(?:\\/\\/([^\\/?#]*))?([^?#]+)?(\\?[^#]*)?(#.*)?/);\n\t\t\tif (typeof match[1] === \"string\" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol)\n\t\t\t\treturn true;\n\n\t\t\tif (typeof match[2] === \"string\" && match[2].length > 0 && match[2].replace(new RegExp(`:(${{\n\t\t\t\t\t\"http:\": 80,\n\t\t\t\t\t\"https:\": 443\n\t\t\t\t}[location.protocol]})?$`), \"\") !== location.host)\n\t\t\t\treturn true;\n\n\t\t\treturn false;\n\t\t}\n\n\t\t_error( message ) {\n\t\t\tconsole.error(message);\n\t\t\tthis._containerToUse().html(message);\n\t\t\tthis._resize(300, 300);\n\t\t\treturn this;\n\t\t}\n\n\t\t_preloadImageByIndex(startIndex, numberOfTimes) {\n\n\t\t\tif(!this._$galleryItems)\n\t\t\t\treturn;\n\n\t\t\tlet next = $(this._$galleryItems.get(startIndex), false)\n\t\t\tif(typeof next == 'undefined')\n\t\t\t\treturn\n\n\t\t\tlet src = next.attr('data-remote') || next.attr('href')\n\t\t\tif (next.attr('data-type') === 'image' || this._isImage(src))\n\t\t\t\tthis._preloadImage(src, false)\n\n\t\t\tif(numberOfTimes > 0)\n\t\t\t\treturn this._preloadImageByIndex(startIndex + 1, numberOfTimes-1);\n\t\t}\n\n\t\t_preloadImage( src, $containerForImage) {\n\n\t\t\t$containerForImage = $containerForImage || false\n\n\t\t\tlet img = new Image();\n\t\t\tif ($containerForImage) {\n\n\t\t\t\t// if loading takes > 200ms show a loader\n\t\t\t\tlet loadingTimeout = setTimeout(() => {\n\t\t\t\t\t$containerForImage.append(this._config.loadingMessage)\n\t\t\t\t}, 200)\n\n\t\t\t\timg.onload = () => {\n\t\t\t\t\tif(loadingTimeout)\n\t\t\t\t\t\tclearTimeout(loadingTimeout)\n\t\t\t\t\tloadingTimeout = null;\n\t\t\t\t\tlet image = $('');\n\t\t\t\t\timage.attr('src', img.src);\n\t\t\t\t\timage.addClass('img-fluid');\n\n\t\t\t\t\t// backward compatibility for bootstrap v3\n\t\t\t\t\timage.css('width', '100%');\n\n\t\t\t\t\t$containerForImage.html(image);\n\t\t\t\t\tif (this._$modalArrows)\n\t\t\t\t\t\tthis._$modalArrows.css('display', '') // remove display to default to css property\n\n\t\t\t\t\tthis._resize(img.width, img.height);\n\t\t\t\t\tthis._toggleLoading(false);\n\t\t\t\t\treturn this._config.onContentLoaded.call(this);\n\t\t\t\t};\n\t\t\t\timg.onerror = () => {\n\t\t\t\t\tthis._toggleLoading(false);\n\t\t\t\t\treturn this._error(this._config.strings.fail+` ${src}`);\n\t\t\t\t};\n\t\t\t}\n\n\t\t\timg.src = src;\n\t\t\treturn img;\n\t\t}\n\n\t\t_swipeGesure() {\n\t\t if (this._touchendX < this._touchstartX) {\n\t\t return this.navigateRight();\n\t\t }\n\t\t if (this._touchendX > this._touchstartX) {\n\t\t return this.navigateLeft();\n\t\t }\n\t\t}\n\n\t\t_resize( width, height ) {\n\n\t\t\theight = height || width\n\t\t\tthis._wantedWidth = width\n\t\t\tthis._wantedHeight = height\n\n\t\t\tlet imageAspecRatio = width / height;\n\n\t\t\t// if width > the available space, scale down the expected width and height\n\t\t\tlet widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right\n\n\t\t\t// force 10px margin if window size > 575px\n\t\t\tlet addMargin = this._config.doc.body.clientWidth > 575 ? 20 : 0\n\t\t\tlet discountMargin = this._config.doc.body.clientWidth > 575 ? 0 : 20\n\n\t\t\tlet maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth)\n\n\t\t\tif((width + widthBorderAndPadding) > maxWidth) {\n\t\t\t\theight = (maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio;\n\t\t\t\twidth = maxWidth\n\t\t\t} else\n\t\t\t\twidth = (width + widthBorderAndPadding)\n\n\t\t\tlet headerHeight = 0,\n\t\t\t footerHeight = 0\n\n\t\t\t// as the resize is performed the modal is show, the calculate might fail\n\t\t\t// if so, default to the default sizes\n\t\t\tif (this._footerIsShown)\n\t\t\t\tfooterHeight = this._$modalFooter.outerHeight(true) || 55\n\n\t\t\tif (this._titleIsShown)\n\t\t\t\theaderHeight = this._$modalHeader.outerHeight(true) || 67\n\n\t\t\tlet borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top\n\n\t\t\t//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins\n\t\t\tlet margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));\n\n\t\t\tlet maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight);\n\n\t\t\tif(height > maxHeight) {\n\t\t\t\t// if height > the available height, scale down the width\n\t\t\t\twidth = Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding;\n\t\t\t}\n\n\t\t\tthis._$lightboxContainer.css('height', maxHeight)\n\t\t\tthis._$modalDialog.css('flex', 1).css('maxWidth', width);\n\n\t\t\tlet modal = this._$modal.data('bs.modal');\n\t\t\tif (modal) {\n\t\t\t\t// v4 method is mistakenly protected\n\t\t\t\ttry {\n\t\t\t\t\tmodal._handleUpdate();\n\t\t\t\t} catch(Exception) {\n\t\t\t\t\tmodal.handleUpdate();\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn this;\n\t\t}\n\n\t\tstatic _jQueryInterface(config) {\n\t\t\tconfig = config || {}\n\t\t\treturn this.each(() => {\n\t\t\t\tlet $this = $(this)\n\t\t\t\tlet _config = $.extend(\n\t\t\t\t\t{},\n\t\t\t\t\tLightbox.Default,\n\t\t\t\t\t$this.data(),\n\t\t\t\t\ttypeof config === 'object' && config\n\t\t\t\t)\n\n\t\t\t\tnew Lightbox(this, _config)\n\t\t\t})\n\t\t}\n\t}\n\n\n\n\t$.fn[NAME] = Lightbox._jQueryInterface\n\t$.fn[NAME].Constructor = Lightbox\n\t$.fn[NAME].noConflict = () => {\n\t\t$.fn[NAME] = JQUERY_NO_CONFLICT\n\t\treturn Lightbox._jQueryInterface\n\t}\n\n\treturn Lightbox\n\n})(jQuery)\n\nexport default Lightbox\n"]} -------------------------------------------------------------------------------- /dist/ekko-lightbox.min.js: -------------------------------------------------------------------------------- 1 | +function(a){"use strict";function b(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var c=function(){function a(a,b){for(var c=0;c
',leftArrow:"❮",rightArrow:"❯",strings:{close:"Close",fail:"Failed to load image:",type:"Could not detect remote target type. Force the type using data-type"},doc:document,onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){},onNavigate:function(){},onContentLoaded:function(){}},g=function(){function d(c,e){var g=this;b(this,d),this._config=a.extend({},f,e),this._$modalArrows=null,this._galleryIndex=0,this._galleryName=null,this._padding=null,this._border=null,this._titleIsShown=!1,this._footerIsShown=!1,this._wantedWidth=0,this._wantedHeight=0,this._touchstartX=0,this._touchendX=0,this._modalId="ekkoLightbox-"+Math.floor(1e3*Math.random()+1),this._$element=c instanceof jQuery?c:a(c),this._isBootstrap3=3==a.fn.modal.Constructor.VERSION[0];var h='

'+(this._config.title||" ")+"

",i='',j='
'+(this._isBootstrap3?i+h:h+i)+"
",k='
'+(this._config.footer||" ")+"
",l='
',m='
'+j+l+k+"
";a(this._config.doc.body).append('"),this._$modal=a("#"+this._modalId,this._config.doc),this._$modalDialog=this._$modal.find(".modal-dialog").first(),this._$modalContent=this._$modal.find(".modal-content").first(),this._$modalBody=this._$modal.find(".modal-body").first(),this._$modalHeader=this._$modal.find(".modal-header").first(),this._$modalFooter=this._$modal.find(".modal-footer").first(),this._$lightboxContainer=this._$modalBody.find(".ekko-lightbox-container").first(),this._$lightboxBodyOne=this._$lightboxContainer.find("> div:first-child").first(),this._$lightboxBodyTwo=this._$lightboxContainer.find("> div:last-child").first(),this._border=this._calculateBorders(),this._padding=this._calculatePadding(),this._galleryName=this._$element.data("gallery"),this._galleryName&&(this._$galleryItems=a(document.body).find('*[data-gallery="'+this._galleryName+'"]'),this._galleryIndex=this._$galleryItems.index(this._$element),a(document).on("keydown.ekkoLightbox",this._navigationalBinder.bind(this)),this._config.showArrows&&this._$galleryItems.length>1&&(this._$lightboxContainer.append('
'+this._config.leftArrow+''+this._config.rightArrow+"
"),this._$modalArrows=this._$lightboxContainer.find("div.ekko-lightbox-nav-overlay").first(),this._$lightboxContainer.on("click","a:first-child",function(a){return a.preventDefault(),g.navigateLeft()}),this._$lightboxContainer.on("click","a:last-child",function(a){return a.preventDefault(),g.navigateRight()}),this.updateNavigation())),this._$modal.on("show.bs.modal",this._config.onShow.bind(this)).on("shown.bs.modal",function(){return g._toggleLoading(!0),g._handle(),g._config.onShown.call(g)}).on("hide.bs.modal",this._config.onHide.bind(this)).on("hidden.bs.modal",function(){return g._galleryName&&(a(document).off("keydown.ekkoLightbox"),a(window).off("resize.ekkoLightbox")),g._$modal.remove(),g._config.onHidden.call(g)}).modal(this._config),a(window).on("resize.ekkoLightbox",function(){g._resize(g._wantedWidth,g._wantedHeight)}),this._$lightboxContainer.on("touchstart",function(){g._touchstartX=event.changedTouches[0].screenX}).on("touchend",function(){g._touchendX=event.changedTouches[0].screenX,g._swipeGesure()})}return c(d,null,[{key:"Default",get:function(){return f}}]),c(d,[{key:"element",value:function(){return this._$element}},{key:"modal",value:function(){return this._$modal}},{key:"navigateTo",value:function(b){return b<0||b>this._$galleryItems.length-1?this:(this._galleryIndex=b,this.updateNavigation(),this._$element=a(this._$galleryItems.get(this._galleryIndex)),void this._handle())}},{key:"navigateLeft",value:function(){if(this._$galleryItems&&1!==this._$galleryItems.length){if(0===this._galleryIndex){if(!this._config.wrapping)return;this._galleryIndex=this._$galleryItems.length-1}else this._galleryIndex--;return this._config.onNavigate.call(this,"left",this._galleryIndex),this.navigateTo(this._galleryIndex)}}},{key:"navigateRight",value:function(){if(this._$galleryItems&&1!==this._$galleryItems.length){if(this._galleryIndex===this._$galleryItems.length-1){if(!this._config.wrapping)return;this._galleryIndex=0}else this._galleryIndex++;return this._config.onNavigate.call(this,"right",this._galleryIndex),this.navigateTo(this._galleryIndex)}}},{key:"updateNavigation",value:function(){if(!this._config.wrapping){var a=this._$lightboxContainer.find("div.ekko-lightbox-nav-overlay");0===this._galleryIndex?a.find("a:first-child").addClass("disabled"):a.find("a:first-child").removeClass("disabled"),this._galleryIndex===this._$galleryItems.length-1?a.find("a:last-child").addClass("disabled"):a.find("a:last-child").removeClass("disabled")}}},{key:"close",value:function(){return this._$modal.modal("hide")}},{key:"_navigationalBinder",value:function(a){return a=a||window.event,39===a.keyCode?this.navigateRight():37===a.keyCode?this.navigateLeft():void 0}},{key:"_detectRemoteType",value:function(a,b){return b=b||!1,!b&&this._isImage(a)&&(b="image"),!b&&this._getYoutubeId(a)&&(b="youtube"),!b&&this._getVimeoId(a)&&(b="vimeo"),!b&&this._getInstagramId(a)&&(b="instagram"),("audio"==b||"video"==b||!b&&this._isMedia(a))&&(b="media"),(!b||["image","youtube","vimeo","instagram","media","url"].indexOf(b)<0)&&(b="url"),b}},{key:"_getRemoteContentType",value:function(b){var c=a.ajax({type:"HEAD",url:b,async:!1}),d=c.getResponseHeader("Content-Type");return d}},{key:"_isImage",value:function(a){return a&&a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)}},{key:"_isMedia",value:function(a){return a&&a.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i)}},{key:"_containerToUse",value:function(){var a=this,b=this._$lightboxBodyTwo,c=this._$lightboxBodyOne;return this._$lightboxBodyTwo.hasClass("in")&&(b=this._$lightboxBodyOne,c=this._$lightboxBodyTwo),c.removeClass("in show"),setTimeout(function(){a._$lightboxBodyTwo.hasClass("in")||a._$lightboxBodyTwo.empty(),a._$lightboxBodyOne.hasClass("in")||a._$lightboxBodyOne.empty()},500),b.addClass("in show"),b}},{key:"_handle",value:function(){var a=this._containerToUse();this._updateTitleAndFooter();var b=this._$element.attr("data-remote")||this._$element.attr("href"),c=this._detectRemoteType(b,this._$element.attr("data-type")||!1);if(["image","youtube","vimeo","instagram","media","url"].indexOf(c)<0)return this._error(this._config.strings.type);switch(c){case"image":this._preloadImage(b,a),this._preloadImageByIndex(this._galleryIndex,3);break;case"youtube":this._showYoutubeVideo(b,a);break;case"vimeo":this._showVimeoVideo(this._getVimeoId(b),a);break;case"instagram":this._showInstagramVideo(this._getInstagramId(b),a);break;case"media":this._showHtml5Media(b,a);break;default:this._loadRemoteContent(b,a)}return this}},{key:"_getYoutubeId",value:function(a){if(!a)return!1;var b=a.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);return!(!b||11!==b[2].length)&&b[2]}},{key:"_getVimeoId",value:function(a){return!!(a&&a.indexOf("vimeo")>0)&&a}},{key:"_getInstagramId",value:function(a){return!!(a&&a.indexOf("instagram")>0)&&a}},{key:"_toggleLoading",value:function(b){return b=b||!1,b?(this._$modalDialog.css("display","none"),this._$modal.removeClass("in show"),a(".modal-backdrop").append(this._config.loadingMessage)):(this._$modalDialog.css("display","block"),this._$modal.addClass("in show"),a(".modal-backdrop").find(".ekko-lightbox-loader").remove()),this}},{key:"_calculateBorders",value:function(){return{top:this._totalCssByAttribute("border-top-width"),right:this._totalCssByAttribute("border-right-width"),bottom:this._totalCssByAttribute("border-bottom-width"),left:this._totalCssByAttribute("border-left-width")}}},{key:"_calculatePadding",value:function(){return{top:this._totalCssByAttribute("padding-top"),right:this._totalCssByAttribute("padding-right"),bottom:this._totalCssByAttribute("padding-bottom"),left:this._totalCssByAttribute("padding-left")}}},{key:"_totalCssByAttribute",value:function(a){return parseInt(this._$modalDialog.css(a),10)+parseInt(this._$modalContent.css(a),10)+parseInt(this._$modalBody.css(a),10)}},{key:"_updateTitleAndFooter",value:function(){var a=this._$element.data("title")||"",b=this._$element.data("footer")||"";return this._titleIsShown=!1,a||this._config.alwaysShowClose?(this._titleIsShown=!0,this._$modalHeader.css("display","").find(".modal-title").html(a||" ")):this._$modalHeader.css("display","none"),this._footerIsShown=!1,b?(this._footerIsShown=!0,this._$modalFooter.css("display","").html(b)):this._$modalFooter.css("display","none"),this}},{key:"_showYoutubeVideo",value:function(a,b){var c=this._getYoutubeId(a),d=a.indexOf("&")>0?a.substr(a.indexOf("&")):"",e=this._$element.data("width")||560,f=this._$element.data("height")||e/(560/315);return this._showVideoIframe("//www.youtube.com/embed/"+c+"?badge=0&autoplay=1&html5=1"+d,e,f,b)}},{key:"_showVimeoVideo",value:function(a,b){var c=this._$element.data("width")||500,d=this._$element.data("height")||c/(560/315);return this._showVideoIframe(a+"?autoplay=1",c,d,b)}},{key:"_showInstagramVideo",value:function(a,b){var c=this._$element.data("width")||612,d=c+80;return a="/"!==a.substr(-1)?a+"/":a,b.html(''),this._resize(c,d),this._config.onContentLoaded.call(this),this._$modalArrows&&this._$modalArrows.css("display","none"),this._toggleLoading(!1),this}},{key:"_showVideoIframe",value:function(a,b,c,d){return c=c||b,d.html('
'),this._resize(b,c),this._config.onContentLoaded.call(this),this._$modalArrows&&this._$modalArrows.css("display","none"),this._toggleLoading(!1),this}},{key:"_showHtml5Media",value:function(a,b){var c=this._getRemoteContentType(a);if(!c)return this._error(this._config.strings.type);var d="";d=c.indexOf("audio")>0?"audio":"video";var e=this._$element.data("width")||560,f=this._$element.data("height")||e/(560/315);return b.html('
<'+d+' width="'+e+'" height="'+f+'" preload="auto" autoplay controls class="embed-responsive-item">'+this._config.strings.type+"
"),this._resize(e,f),this._config.onContentLoaded.call(this),this._$modalArrows&&this._$modalArrows.css("display","none"),this._toggleLoading(!1),this}},{key:"_loadRemoteContent",value:function(b,c){var d=this,e=this._$element.data("width")||560,f=this._$element.data("height")||560,g=this._$element.data("disableExternalCheck")||!1;return this._toggleLoading(!1),g||this._isExternal(b)?(c.html(''),this._config.onContentLoaded.call(this)):c.load(b,a.proxy(function(){return d._$element.trigger("loaded.bs.modal")})),this._$modalArrows&&this._$modalArrows.css("display","none"),this._resize(e,f),this}},{key:"_isExternal",value:function(a){var b=a.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);return"string"==typeof b[1]&&b[1].length>0&&b[1].toLowerCase()!==location.protocol||"string"==typeof b[2]&&b[2].length>0&&b[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"),"")!==location.host}},{key:"_error",value:function(a){return console.error(a),this._containerToUse().html(a),this._resize(300,300),this}},{key:"_preloadImageByIndex",value:function(b,c){if(this._$galleryItems){var d=a(this._$galleryItems.get(b),!1);if("undefined"!=typeof d){var e=d.attr("data-remote")||d.attr("href");return("image"===d.attr("data-type")||this._isImage(e))&&this._preloadImage(e,!1),c>0?this._preloadImageByIndex(b+1,c-1):void 0}}}},{key:"_preloadImage",value:function(b,c){var d=this;c=c||!1;var e=new Image;return c&&!function(){var f=setTimeout(function(){c.append(d._config.loadingMessage)},200);e.onload=function(){f&&clearTimeout(f),f=null;var b=a("");return b.attr("src",e.src),b.addClass("img-fluid"),b.css("width","100%"),c.html(b),d._$modalArrows&&d._$modalArrows.css("display",""),d._resize(e.width,e.height),d._toggleLoading(!1),d._config.onContentLoaded.call(d)},e.onerror=function(){return d._toggleLoading(!1),d._error(d._config.strings.fail+(" "+b))}}(),e.src=b,e}},{key:"_swipeGesure",value:function(){return this._touchendXthis._touchstartX?this.navigateLeft():void 0}},{key:"_resize",value:function(b,c){c=c||b,this._wantedWidth=b,this._wantedHeight=c;var d=b/c,e=this._padding.left+this._padding.right+this._border.left+this._border.right,f=this._config.doc.body.clientWidth>575?20:0,g=this._config.doc.body.clientWidth>575?0:20,h=Math.min(b+e,this._config.doc.body.clientWidth-f,this._config.maxWidth);b+e>h?(c=(h-e-g)/d,b=h):b+=e;var i=0,j=0;this._footerIsShown&&(j=this._$modalFooter.outerHeight(!0)||55),this._titleIsShown&&(i=this._$modalHeader.outerHeight(!0)||67);var k=this._padding.top+this._padding.bottom+this._border.bottom+this._border.top,l=parseFloat(this._$modalDialog.css("margin-top"))+parseFloat(this._$modalDialog.css("margin-bottom")),m=Math.min(c,a(window).height()-k-l-i-j,this._config.maxHeight-k-i-j);c>m&&(b=Math.ceil(m*d)+e),this._$lightboxContainer.css("height",m),this._$modalDialog.css("flex",1).css("maxWidth",b);var n=this._$modal.data("bs.modal");if(n)try{n._handleUpdate()}catch(o){n.handleUpdate()}return this}}],[{key:"_jQueryInterface",value:function(b){var c=this;return b=b||{},this.each(function(){var e=a(c),f=a.extend({},d.Default,e.data(),"object"==typeof b&&b);new d(c,f)})}}]),d}();return a.fn[d]=g._jQueryInterface,a.fn[d].Constructor=g,a.fn[d].noConflict=function(){return a.fn[d]=e,g._jQueryInterface},g})(jQuery)}(jQuery); 2 | //# sourceMappingURL=ekko-lightbox.min.js.map -------------------------------------------------------------------------------- /dist/ekko-lightbox.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["ekko-lightbox.js"],"names":["$","_classCallCheck","instance","Constructor","TypeError","_createClass","defineProperties","target","props","i","length","descriptor","enumerable","configurable","writable","Object","defineProperty","key","protoProps","staticProps","prototype","NAME","JQUERY_NO_CONFLICT","fn","Default","title","footer","maxWidth","maxHeight","showArrows","wrapping","type","alwaysShowClose","loadingMessage","leftArrow","rightArrow","strings","close","fail","doc","document","onShow","onShown","onHide","onHidden","onNavigate","onContentLoaded","Lightbox","$element","config","_this","this","_config","extend","_$modalArrows","_galleryIndex","_galleryName","_padding","_border","_titleIsShown","_footerIsShown","_wantedWidth","_wantedHeight","_touchstartX","_touchendX","_modalId","Math","floor","random","_$element","jQuery","_isBootstrap3","modal","VERSION","h4","btn","header","body","dialog","append","_$modal","_$modalDialog","find","first","_$modalContent","_$modalBody","_$modalHeader","_$modalFooter","_$lightboxContainer","_$lightboxBodyOne","_$lightboxBodyTwo","_calculateBorders","_calculatePadding","data","_$galleryItems","index","on","_navigationalBinder","bind","event","preventDefault","navigateLeft","navigateRight","updateNavigation","_toggleLoading","_handle","call","off","window","remove","_resize","changedTouches","screenX","_swipeGesure","get","value","navigateTo","$nav","addClass","removeClass","keyCode","src","_isImage","_getYoutubeId","_getVimeoId","_getInstagramId","_isMedia","indexOf","response","ajax","url","async","contentType","getResponseHeader","string","match","_this2","$toUse","$current","hasClass","setTimeout","empty","_containerToUse","_updateTitleAndFooter","currentRemote","attr","currentType","_detectRemoteType","_error","_preloadImage","_preloadImageByIndex","_showYoutubeVideo","_showVimeoVideo","_showInstagramVideo","_showHtml5Media","_loadRemoteContent","matches","show","css","top","_totalCssByAttribute","right","bottom","left","attribute","parseInt","caption","html","remote","$containerForElement","id","query","substr","width","height","_showVideoIframe","_getRemoteContentType","mediaType","_this3","disableExternalCheck","_isExternal","load","proxy","trigger","toLowerCase","location","protocol","replace","RegExp","http:","https:","host","message","console","error","startIndex","numberOfTimes","next","$containerForImage","_this4","img","Image","loadingTimeout","onload","clearTimeout","image","onerror","imageAspecRatio","widthBorderAndPadding","addMargin","clientWidth","discountMargin","min","headerHeight","footerHeight","outerHeight","borderPadding","margins","parseFloat","ceil","_handleUpdate","Exception","handleUpdate","_this5","each","$this","_jQueryInterface","noConflict"],"mappings":"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","file":"ekko-lightbox.min.js"} -------------------------------------------------------------------------------- /ekko-lightbox.js: -------------------------------------------------------------------------------- 1 | const Lightbox = (($) => { 2 | 3 | const NAME = 'ekkoLightbox' 4 | const JQUERY_NO_CONFLICT = $.fn[NAME] 5 | 6 | const Default = { 7 | title: '', 8 | footer: '', 9 | maxWidth: 9999, 10 | maxHeight: 9999, 11 | showArrows: true, //display the left / right arrows or not 12 | wrapping: true, //if true, gallery loops infinitely 13 | type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it 14 | alwaysShowClose: false, //always show the close button, even if there is no title 15 | loadingMessage: '
', // http://tobiasahlin.com/spinkit/ 16 | leftArrow: '❮', 17 | rightArrow: '❯', 18 | strings: { 19 | close: 'Close', 20 | fail: 'Failed to load image:', 21 | type: 'Could not detect remote target type. Force the type using data-type', 22 | }, 23 | doc: document, // if in an iframe can specify top.document 24 | onShow() {}, 25 | onShown() {}, 26 | onHide() {}, 27 | onHidden() {}, 28 | onNavigate() {}, 29 | onContentLoaded() {} 30 | } 31 | 32 | class Lightbox { 33 | 34 | /** 35 | 36 | Class properties: 37 | 38 | _$element: null -> the element currently being displayed 39 | _$modal: The bootstrap modal generated 40 | _$modalDialog: The .modal-dialog 41 | _$modalContent: The .modal-content 42 | _$modalBody: The .modal-body 43 | _$modalHeader: The .modal-header 44 | _$modalFooter: The .modal-footer 45 | _$lightboxContainerOne: Container of the first lightbox element 46 | _$lightboxContainerTwo: Container of the second lightbox element 47 | _$lightboxBody: First element in the container 48 | _$modalArrows: The overlayed arrows container 49 | 50 | _$galleryItems: Other 's available for this gallery 51 | _galleryName: Name of the current data('gallery') showing 52 | _galleryIndex: The current index of the _$galleryItems being shown 53 | 54 | _config: {} the options for the modal 55 | _modalId: unique id for the current lightbox 56 | _padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content 57 | 58 | */ 59 | 60 | static get Default() { 61 | return Default 62 | } 63 | 64 | constructor($element, config) { 65 | this._config = $.extend({}, Default, config) 66 | this._$modalArrows = null 67 | this._galleryIndex = 0 68 | this._galleryName = null 69 | this._padding = null 70 | this._border = null 71 | this._titleIsShown = false 72 | this._footerIsShown = false 73 | this._wantedWidth = 0 74 | this._wantedHeight = 0 75 | this._touchstartX = 0 76 | this._touchendX = 0 77 | 78 | this._modalId = `ekkoLightbox-${Math.floor((Math.random() * 1000) + 1)}`; 79 | this._$element = $element instanceof jQuery ? $element : $($element) 80 | 81 | this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3; 82 | 83 | let h4 = `

${this._config.title || " "}

`; 84 | let btn = ``; 85 | 86 | let header = `
`+(this._isBootstrap3 ? btn+h4 : h4+btn)+`
`; 87 | let footer = `
${this._config.footer || " "}
`; 88 | let body = '
' 89 | let dialog = `
${header}${body}${footer}
` 90 | $(this._config.doc.body).append(``) 91 | 92 | this._$modal = $(`#${this._modalId}`, this._config.doc) 93 | this._$modalDialog = this._$modal.find('.modal-dialog').first() 94 | this._$modalContent = this._$modal.find('.modal-content').first() 95 | this._$modalBody = this._$modal.find('.modal-body').first() 96 | this._$modalHeader = this._$modal.find('.modal-header').first() 97 | this._$modalFooter = this._$modal.find('.modal-footer').first() 98 | 99 | this._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first() 100 | this._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first() 101 | this._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first() 102 | 103 | this._border = this._calculateBorders() 104 | this._padding = this._calculatePadding() 105 | 106 | this._galleryName = this._$element.data('gallery') 107 | if (this._galleryName) { 108 | this._$galleryItems = $(document.body).find(`*[data-gallery="${this._galleryName}"]`) 109 | this._galleryIndex = this._$galleryItems.index(this._$element) 110 | $(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this)) 111 | 112 | // add the directional arrows to the modal 113 | if (this._config.showArrows && this._$galleryItems.length > 1) { 114 | this._$lightboxContainer.append(`
${this._config.leftArrow}${this._config.rightArrow}
`) 115 | this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first() 116 | this._$lightboxContainer.on('click', 'a:first-child', event => { 117 | event.preventDefault() 118 | return this.navigateLeft() 119 | }) 120 | this._$lightboxContainer.on('click', 'a:last-child', event => { 121 | event.preventDefault() 122 | return this.navigateRight() 123 | }) 124 | this.updateNavigation() 125 | } 126 | } 127 | 128 | this._$modal 129 | .on('show.bs.modal', this._config.onShow.bind(this)) 130 | .on('shown.bs.modal', () => { 131 | this._toggleLoading(true) 132 | this._handle() 133 | return this._config.onShown.call(this) 134 | }) 135 | .on('hide.bs.modal', this._config.onHide.bind(this)) 136 | .on('hidden.bs.modal', () => { 137 | if (this._galleryName) { 138 | $(document).off('keydown.ekkoLightbox') 139 | $(window).off('resize.ekkoLightbox') 140 | } 141 | this._$modal.remove() 142 | return this._config.onHidden.call(this) 143 | }) 144 | .modal(this._config) 145 | 146 | $(window).on('resize.ekkoLightbox', () => { 147 | this._resize(this._wantedWidth, this._wantedHeight) 148 | }) 149 | this._$lightboxContainer 150 | .on('touchstart', () => { 151 | this._touchstartX = event.changedTouches[0].screenX; 152 | 153 | }) 154 | .on('touchend', () => { 155 | this._touchendX = event.changedTouches[0].screenX; 156 | this._swipeGesure(); 157 | }) 158 | } 159 | 160 | element() { 161 | return this._$element; 162 | } 163 | 164 | modal() { 165 | return this._$modal; 166 | } 167 | 168 | navigateTo(index) { 169 | 170 | if (index < 0 || index > this._$galleryItems.length-1) 171 | return this 172 | 173 | this._galleryIndex = index 174 | 175 | this.updateNavigation() 176 | 177 | this._$element = $(this._$galleryItems.get(this._galleryIndex)) 178 | this._handle(); 179 | } 180 | 181 | navigateLeft() { 182 | 183 | if(!this._$galleryItems) 184 | return; 185 | 186 | if (this._$galleryItems.length === 1) 187 | return 188 | 189 | if (this._galleryIndex === 0) { 190 | if (this._config.wrapping) 191 | this._galleryIndex = this._$galleryItems.length - 1 192 | else 193 | return 194 | } 195 | else //circular 196 | this._galleryIndex-- 197 | 198 | this._config.onNavigate.call(this, 'left', this._galleryIndex) 199 | return this.navigateTo(this._galleryIndex) 200 | } 201 | 202 | navigateRight() { 203 | 204 | if(!this._$galleryItems) 205 | return; 206 | 207 | if (this._$galleryItems.length === 1) 208 | return 209 | 210 | if (this._galleryIndex === this._$galleryItems.length - 1) { 211 | if (this._config.wrapping) 212 | this._galleryIndex = 0 213 | else 214 | return 215 | } 216 | else //circular 217 | this._galleryIndex++ 218 | 219 | this._config.onNavigate.call(this, 'right', this._galleryIndex) 220 | return this.navigateTo(this._galleryIndex) 221 | } 222 | 223 | updateNavigation() { 224 | if (!this._config.wrapping) { 225 | let $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay') 226 | if (this._galleryIndex === 0) 227 | $nav.find('a:first-child').addClass('disabled') 228 | else 229 | $nav.find('a:first-child').removeClass('disabled') 230 | 231 | if (this._galleryIndex === this._$galleryItems.length - 1) 232 | $nav.find('a:last-child').addClass('disabled') 233 | else 234 | $nav.find('a:last-child').removeClass('disabled') 235 | } 236 | } 237 | 238 | close() { 239 | return this._$modal.modal('hide'); 240 | } 241 | 242 | // helper private methods 243 | _navigationalBinder(event) { 244 | event = event || window.event; 245 | if (event.keyCode === 39) 246 | return this.navigateRight() 247 | if (event.keyCode === 37) 248 | return this.navigateLeft() 249 | } 250 | 251 | // type detection private methods 252 | _detectRemoteType(src, type) { 253 | 254 | type = type || false; 255 | 256 | if(!type && this._isImage(src)) 257 | type = 'image'; 258 | if(!type && this._getYoutubeId(src)) 259 | type = 'youtube'; 260 | if(!type && this._getVimeoId(src)) 261 | type = 'vimeo'; 262 | if(!type && this._getInstagramId(src)) 263 | type = 'instagram'; 264 | if(type == 'audio' || type == 'video' || (!type && this._isMedia(src))) 265 | type = 'media'; 266 | if(!type || ['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(type) < 0) 267 | type = 'url'; 268 | 269 | return type; 270 | } 271 | 272 | _getRemoteContentType(src) { 273 | let response = $.ajax({ 274 | type: 'HEAD', 275 | url: src, 276 | async: false 277 | }); 278 | let contentType = response.getResponseHeader('Content-Type') 279 | return contentType; 280 | } 281 | 282 | _isImage(string) { 283 | return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i) 284 | } 285 | 286 | _isMedia(string) { 287 | return string && string.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i) 288 | } 289 | 290 | _containerToUse() { 291 | // if currently showing an image, fade it out and remove 292 | let $toUse = this._$lightboxBodyTwo 293 | let $current = this._$lightboxBodyOne 294 | 295 | if(this._$lightboxBodyTwo.hasClass('in')) { 296 | $toUse = this._$lightboxBodyOne 297 | $current = this._$lightboxBodyTwo 298 | } 299 | 300 | $current.removeClass('in show') 301 | setTimeout(() => { 302 | if(!this._$lightboxBodyTwo.hasClass('in')) 303 | this._$lightboxBodyTwo.empty() 304 | if(!this._$lightboxBodyOne.hasClass('in')) 305 | this._$lightboxBodyOne.empty() 306 | }, 500) 307 | 308 | $toUse.addClass('in show') 309 | return $toUse 310 | } 311 | 312 | _handle() { 313 | 314 | let $toUse = this._containerToUse() 315 | this._updateTitleAndFooter() 316 | 317 | let currentRemote = this._$element.attr('data-remote') || this._$element.attr('href') 318 | let currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false) 319 | 320 | if(['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0) 321 | return this._error(this._config.strings.type) 322 | 323 | switch(currentType) { 324 | case 'image': 325 | this._preloadImage(currentRemote, $toUse) 326 | this._preloadImageByIndex(this._galleryIndex, 3) 327 | break; 328 | case 'youtube': 329 | this._showYoutubeVideo(currentRemote, $toUse); 330 | break; 331 | case 'vimeo': 332 | this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse); 333 | break; 334 | case 'instagram': 335 | this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse); 336 | break; 337 | case 'media': 338 | this._showHtml5Media(currentRemote, $toUse); 339 | break; 340 | default: // url 341 | this._loadRemoteContent(currentRemote, $toUse); 342 | break; 343 | } 344 | 345 | return this; 346 | } 347 | 348 | _getYoutubeId(string) { 349 | if(!string) 350 | return false; 351 | let matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/) 352 | return (matches && matches[2].length === 11) ? matches[2] : false 353 | } 354 | 355 | _getVimeoId(string) { 356 | return string && string.indexOf('vimeo') > 0 ? string : false 357 | } 358 | 359 | _getInstagramId(string) { 360 | return string && string.indexOf('instagram') > 0 ? string : false 361 | } 362 | 363 | // layout private methods 364 | _toggleLoading(show) { 365 | show = show || false 366 | if(show) { 367 | this._$modalDialog.css('display', 'none') 368 | this._$modal.removeClass('in show') 369 | $('.modal-backdrop').append(this._config.loadingMessage) 370 | } 371 | else { 372 | this._$modalDialog.css('display', 'block') 373 | this._$modal.addClass('in show') 374 | $('.modal-backdrop').find('.ekko-lightbox-loader').remove() 375 | } 376 | return this; 377 | } 378 | 379 | _calculateBorders() { 380 | return { 381 | top: this._totalCssByAttribute('border-top-width'), 382 | right: this._totalCssByAttribute('border-right-width'), 383 | bottom: this._totalCssByAttribute('border-bottom-width'), 384 | left: this._totalCssByAttribute('border-left-width'), 385 | } 386 | } 387 | 388 | _calculatePadding() { 389 | return { 390 | top: this._totalCssByAttribute('padding-top'), 391 | right: this._totalCssByAttribute('padding-right'), 392 | bottom: this._totalCssByAttribute('padding-bottom'), 393 | left: this._totalCssByAttribute('padding-left'), 394 | } 395 | } 396 | 397 | _totalCssByAttribute(attribute) { 398 | return parseInt(this._$modalDialog.css(attribute), 10) + 399 | parseInt(this._$modalContent.css(attribute), 10) + 400 | parseInt(this._$modalBody.css(attribute), 10) 401 | } 402 | 403 | _updateTitleAndFooter() { 404 | let title = this._$element.data('title') || "" 405 | let caption = this._$element.data('footer') || "" 406 | 407 | this._titleIsShown = false 408 | if (title || this._config.alwaysShowClose) { 409 | this._titleIsShown = true 410 | this._$modalHeader.css('display', '').find('.modal-title').html(title || " ") 411 | } 412 | else 413 | this._$modalHeader.css('display', 'none') 414 | 415 | this._footerIsShown = false 416 | if (caption) { 417 | this._footerIsShown = true 418 | this._$modalFooter.css('display', '').html(caption) 419 | } 420 | else 421 | this._$modalFooter.css('display', 'none') 422 | 423 | return this; 424 | } 425 | 426 | _showYoutubeVideo(remote, $containerForElement) { 427 | let id = this._getYoutubeId(remote) 428 | let query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '' 429 | let width = this._$element.data('width') || 560 430 | let height = this._$element.data('height') || width / ( 560/315 ) 431 | return this._showVideoIframe( 432 | `//www.youtube.com/embed/${id}?badge=0&autoplay=1&html5=1${query}`, 433 | width, 434 | height, 435 | $containerForElement 436 | ); 437 | } 438 | 439 | _showVimeoVideo(id, $containerForElement) { 440 | let width = this._$element.data('width') || 500 441 | let height = this._$element.data('height') || width / ( 560/315 ) 442 | return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement) 443 | } 444 | 445 | _showInstagramVideo(id, $containerForElement) { 446 | // instagram load their content into iframe's so this can be put straight into the element 447 | let width = this._$element.data('width') || 612 448 | let height = width + 80; 449 | id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash 450 | $containerForElement.html(``); 451 | this._resize(width, height); 452 | this._config.onContentLoaded.call(this); 453 | if (this._$modalArrows) //hide the arrows when showing video 454 | this._$modalArrows.css('display', 'none'); 455 | this._toggleLoading(false); 456 | return this; 457 | } 458 | 459 | _showVideoIframe(url, width, height, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url) 460 | height = height || width; // default to square 461 | $containerForElement.html(`
`); 462 | this._resize(width, height); 463 | this._config.onContentLoaded.call(this); 464 | if (this._$modalArrows) 465 | this._$modalArrows.css('display', 'none'); //hide the arrows when showing video 466 | this._toggleLoading(false); 467 | return this; 468 | } 469 | 470 | _showHtml5Media(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url) 471 | let contentType = this._getRemoteContentType(url); 472 | if(!contentType){ 473 | return this._error(this._config.strings.type) 474 | } 475 | let mediaType = ''; 476 | if(contentType.indexOf('audio') > 0){ 477 | mediaType = 'audio'; 478 | }else{ 479 | mediaType = 'video'; 480 | } 481 | let width = this._$element.data('width') || 560 482 | let height = this._$element.data('height') || width / ( 560/315 ) 483 | $containerForElement.html(`
<${mediaType} width="${width}" height="${height}" preload="auto" autoplay controls class="embed-responsive-item">${this._config.strings.type}
`); 484 | this._resize(width, height); 485 | this._config.onContentLoaded.call(this); 486 | if (this._$modalArrows) 487 | this._$modalArrows.css('display', 'none'); //hide the arrows when showing video 488 | this._toggleLoading(false); 489 | return this; 490 | } 491 | 492 | _loadRemoteContent(url, $containerForElement) { 493 | let width = this._$element.data('width') || 560; 494 | let height = this._$element.data('height') || 560; 495 | 496 | let disableExternalCheck = this._$element.data('disableExternalCheck') || false; 497 | this._toggleLoading(false); 498 | 499 | // external urls are loading into an iframe 500 | // local ajax can be loaded into the container itself 501 | if (!disableExternalCheck && !this._isExternal(url)) { 502 | $containerForElement.load(url, $.proxy(() => { 503 | return this._$element.trigger('loaded.bs.modal'); 504 | })); 505 | 506 | } else { 507 | $containerForElement.html(``); 508 | this._config.onContentLoaded.call(this); 509 | } 510 | 511 | if (this._$modalArrows) //hide the arrows when remote content 512 | this._$modalArrows.css('display', 'none') 513 | 514 | this._resize(width, height); 515 | return this; 516 | } 517 | 518 | _isExternal(url) { 519 | let match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/); 520 | if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) 521 | return true; 522 | 523 | if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(`:(${{ 524 | "http:": 80, 525 | "https:": 443 526 | }[location.protocol]})?$`), "") !== location.host) 527 | return true; 528 | 529 | return false; 530 | } 531 | 532 | _error( message ) { 533 | console.error(message); 534 | this._containerToUse().html(message); 535 | this._resize(300, 300); 536 | return this; 537 | } 538 | 539 | _preloadImageByIndex(startIndex, numberOfTimes) { 540 | 541 | if(!this._$galleryItems) 542 | return; 543 | 544 | let next = $(this._$galleryItems.get(startIndex), false) 545 | if(typeof next == 'undefined') 546 | return 547 | 548 | let src = next.attr('data-remote') || next.attr('href') 549 | if (next.attr('data-type') === 'image' || this._isImage(src)) 550 | this._preloadImage(src, false) 551 | 552 | if(numberOfTimes > 0) 553 | return this._preloadImageByIndex(startIndex + 1, numberOfTimes-1); 554 | } 555 | 556 | _preloadImage( src, $containerForImage) { 557 | 558 | $containerForImage = $containerForImage || false 559 | 560 | let img = new Image(); 561 | if ($containerForImage) { 562 | 563 | // if loading takes > 200ms show a loader 564 | let loadingTimeout = setTimeout(() => { 565 | $containerForImage.append(this._config.loadingMessage) 566 | }, 200) 567 | 568 | img.onload = () => { 569 | if(loadingTimeout) 570 | clearTimeout(loadingTimeout) 571 | loadingTimeout = null; 572 | let image = $(''); 573 | image.attr('src', img.src); 574 | image.addClass('img-fluid'); 575 | 576 | // backward compatibility for bootstrap v3 577 | image.css('width', '100%'); 578 | 579 | $containerForImage.html(image); 580 | if (this._$modalArrows) 581 | this._$modalArrows.css('display', '') // remove display to default to css property 582 | 583 | this._resize(img.width, img.height); 584 | this._toggleLoading(false); 585 | return this._config.onContentLoaded.call(this); 586 | }; 587 | img.onerror = () => { 588 | this._toggleLoading(false); 589 | return this._error(this._config.strings.fail+` ${src}`); 590 | }; 591 | } 592 | 593 | img.src = src; 594 | return img; 595 | } 596 | 597 | _swipeGesure() { 598 | if (this._touchendX < this._touchstartX) { 599 | return this.navigateRight(); 600 | } 601 | if (this._touchendX > this._touchstartX) { 602 | return this.navigateLeft(); 603 | } 604 | } 605 | 606 | _resize( width, height ) { 607 | 608 | height = height || width 609 | this._wantedWidth = width 610 | this._wantedHeight = height 611 | 612 | let imageAspecRatio = width / height; 613 | 614 | // if width > the available space, scale down the expected width and height 615 | let widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right 616 | 617 | // force 10px margin if window size > 575px 618 | let addMargin = this._config.doc.body.clientWidth > 575 ? 20 : 0 619 | let discountMargin = this._config.doc.body.clientWidth > 575 ? 0 : 20 620 | 621 | let maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth) 622 | 623 | if((width + widthBorderAndPadding) > maxWidth) { 624 | height = (maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio; 625 | width = maxWidth 626 | } else 627 | width = (width + widthBorderAndPadding) 628 | 629 | let headerHeight = 0, 630 | footerHeight = 0 631 | 632 | // as the resize is performed the modal is show, the calculate might fail 633 | // if so, default to the default sizes 634 | if (this._footerIsShown) 635 | footerHeight = this._$modalFooter.outerHeight(true) || 55 636 | 637 | if (this._titleIsShown) 638 | headerHeight = this._$modalHeader.outerHeight(true) || 67 639 | 640 | let borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top 641 | 642 | //calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins 643 | let margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom')); 644 | 645 | let maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight); 646 | 647 | if(height > maxHeight) { 648 | // if height > the available height, scale down the width 649 | width = Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding; 650 | } 651 | 652 | this._$lightboxContainer.css('height', maxHeight) 653 | this._$modalDialog.css('flex', 1).css('maxWidth', width); 654 | 655 | let modal = this._$modal.data('bs.modal'); 656 | if (modal) { 657 | // v4 method is mistakenly protected 658 | try { 659 | modal._handleUpdate(); 660 | } catch(Exception) { 661 | modal.handleUpdate(); 662 | } 663 | } 664 | return this; 665 | } 666 | 667 | static _jQueryInterface(config) { 668 | config = config || {} 669 | return this.each(() => { 670 | let $this = $(this) 671 | let _config = $.extend( 672 | {}, 673 | Lightbox.Default, 674 | $this.data(), 675 | typeof config === 'object' && config 676 | ) 677 | 678 | new Lightbox(this, _config) 679 | }) 680 | } 681 | } 682 | 683 | 684 | 685 | $.fn[NAME] = Lightbox._jQueryInterface 686 | $.fn[NAME].Constructor = Lightbox 687 | $.fn[NAME].noConflict = () => { 688 | $.fn[NAME] = JQUERY_NO_CONFLICT 689 | return Lightbox._jQueryInterface 690 | } 691 | 692 | return Lightbox 693 | 694 | })(jQuery) 695 | 696 | export default Lightbox 697 | -------------------------------------------------------------------------------- /ekko-lightbox.less: -------------------------------------------------------------------------------- 1 | .ekko-lightbox { 2 | display: flex !important; 3 | align-items: center; 4 | justify-content: center; 5 | padding-right: 0px!important; 6 | 7 | &-container { 8 | position:relative; 9 | > div.ekko-lightbox-item { 10 | position:absolute; 11 | top:0; 12 | left:0; 13 | bottom:0; 14 | right:0; 15 | width:100%; 16 | } 17 | } 18 | 19 | iframe { 20 | width: 100%; 21 | height: 100%; 22 | } 23 | 24 | &-nav-overlay { 25 | z-index:100; 26 | position: absolute; 27 | top:0; 28 | left:0; 29 | width:100%; 30 | height:100%; 31 | display: flex; 32 | 33 | a { 34 | flex: 1; 35 | display:flex; 36 | align-items: center; 37 | 38 | opacity: 0; 39 | transition: opacity 0.5s; 40 | color: #fff; 41 | font-size:30px; 42 | z-index:100; 43 | 44 | > * { 45 | flex-grow:1; 46 | &:focus { 47 | outline: none; 48 | } 49 | } 50 | span { 51 | padding:0 30px; 52 | } 53 | &:last-child span { 54 | text-align: right; 55 | } 56 | &:hover { 57 | text-decoration: none; 58 | } 59 | &:focus { 60 | outline: none; 61 | } 62 | &.disabled { 63 | cursor: default; 64 | visibility: hidden; 65 | } 66 | } 67 | } 68 | 69 | a:hover { 70 | opacity: 1; 71 | text-decoration: none; 72 | } 73 | .modal-dialog { 74 | display:none; 75 | } 76 | .modal-footer { 77 | text-align: left; 78 | } 79 | 80 | // http://tobiasahlin.com/spinkit/ 81 | &-loader { 82 | position:absolute; 83 | top:0; 84 | left:0; 85 | bottom:0; 86 | right:0; 87 | width:100%; 88 | 89 | display: flex; /* establish flex container */ 90 | flex-direction: column; /* make main axis vertical */ 91 | justify-content: center; /* center items vertically, in this case */ 92 | align-items: center; 93 | 94 | > div { 95 | width: 40px; 96 | height: 40px; 97 | 98 | position: relative; 99 | text-align: center; 100 | 101 | > div { 102 | width: 100%; 103 | height: 100%; 104 | border-radius: 50%; 105 | background-color: #fff; 106 | opacity: 0.6; 107 | position: absolute; 108 | top: 0; 109 | left: 0; 110 | 111 | animation: sk-bounce 2.0s infinite ease-in-out; 112 | &:last-child { 113 | animation-delay: -1.0s; 114 | } 115 | } 116 | } 117 | } 118 | 119 | .modal-dialog &-loader { 120 | > div > div { 121 | background-color:#333; 122 | } 123 | } 124 | 125 | @-webkit-keyframes sk-bounce { 126 | 0%, 100% { -webkit-transform: scale(0.0) } 127 | 50% { -webkit-transform: scale(1.0) } 128 | } 129 | 130 | @keyframes sk-bounce { 131 | 0%, 100% { 132 | transform: scale(0.0); 133 | -webkit-transform: scale(0.0); 134 | } 50% { 135 | transform: scale(1.0); 136 | -webkit-transform: scale(1.0); 137 | } 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /examples/bs3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bootstrap Lightbox 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 118 | 119 | 120 | 121 |
122 |

NB!: This page is intended to demonstrate that the lightbox works with Bootstrap 3 - the CSS classes for the layout use BS4 so this page won't display correctly.

123 |

Use this page only to check the lightbox works with BS3.

124 |
125 | 126 |
127 | 128 |
129 |
130 |
131 | 132 |
133 |

Lightbox for Bootstrap

134 |

Utilizes Bootstraps modal plugin to implement a lightbox gallery - GitHub

135 |
136 | 137 | 138 | 139 |
140 |
141 | 142 |
143 |
144 |
145 |
146 | 147 |
148 |
149 |
150 | 151 |

Install

152 |

Grab the latest CSS / JS files from the CDN: https://cdnjs.com/libraries/ekko-lightbox.

153 |

Or, with bower: bower install ekko-lightbox --save

154 |

Or, download the files directly: https://github.com/ashleydw/lightbox/tree/master/dist

155 |

156 |

Place this near on your page, probably near the end of the body section:

157 | $(document).on('click', '[data-toggle="lightbox"]', function(event) { 158 | event.preventDefault(); 159 | $(this).ekkoLightbox(); 160 | }); 161 |

162 |

Then simply add data-toggle to your anchor tags.

163 | <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox"> 164 | <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> 165 | </a> 166 | 167 |

168 |

Obviously, you need Bootstrap. Made for Bootstrap v4 but *should* work with v3.

169 | 170 |

Options

171 |

Options are passed down to the modal object so you can also use any of the original modal options.

172 |

Pass the options to the calling function as an object, or set defaults using $.fn.ekkoLightbox.defaults (excluding modal default options, notable: title, footer, remote)

173 |
174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 |
Nametypedefaultdescriptiondata-*
leftArrow / rightArrowhtml❮ / ❯HTML for the arrows
width / heightintegerForce the width / heightdata-(width|height)="[0-9]+"
alwaysShowClosebooleanfalseAlways show the close button, even if no title is present
loadingMessagehtmlA fancy loaderHTML injected for loading
showArrowsbooltrueDisable the navigation overlay
222 |
223 | $(this).ekkoLightbox({ 224 | alwaysShowClose: true, 225 | onShown: function() { 226 | console.log('Checking our the events huh?'); 227 | }, 228 | onNavigate: function(direction, itemIndex) 229 | console.log('Navigating '+direction+'. Current item: '+itemIndex); 230 | } 231 | ... 232 | }); 233 |

234 |

The following options are specified per element.

235 |
236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 |
NameDescriptionExample
remoteIf you can't/don't want to set the href property of an elementdata-remote="http://www...."
galleryFor grouping elementsdata-gallery="gallery-name"
typeForce the lightbox into image/YouTube mode.data-type="(image|youtube|vimeo)"
262 |
263 | <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image"> 264 | <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> 265 | </a> 266 | 267 |

Events

268 |

Events can be hooked into, set the the same as options above.

269 |
270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 |
NameDescription
onContentLoadedFired when content (image/video/remote page etc) has been fully loaded.
onNavigateFired before navigating a gallery.
onShow/onShown/onHide/onHiddenInherited from the bootstrap modal.
292 |
293 | 294 |

Examples

295 |

Thanks to https://unsplash.it/ for the images.

296 | 308 | 309 |

Single Image

310 |

Note: uses modal plugin title option via data-title, and the custom footer tag using data-footer

311 |
312 |
313 | 314 | 315 | 316 |
317 |
318 | 319 | 320 | 321 |

Galleries are created by adding the data-gallery attribute.

322 |
323 |
324 |
325 |
326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 |
336 |
337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 |
347 |
348 |
349 |
350 | 351 | 352 |

Videos

353 |

YouTube

354 |

You can use various YouTube URL formats, the regex used is: /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/

355 | 360 | 361 |

Vimeo

362 |

You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.

363 |
364 |

City Lights - from Colin Rich (using embed link)

365 |

City Lights - from Colin Rich (with reccommended data-remote setting)

366 |
367 | 368 |

Instagram

369 |

370 |
371 |

GOtags.co.uk

372 |

This also works with photos: GOtags.co.uk

373 |
374 | 375 |

Forcing width

376 |

Set the width of the video

377 | 382 | 383 | 384 | 385 | 386 | 387 |
388 |
389 |
390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 |
400 |
401 |
402 | 403 | 404 | 405 |
406 |
407 |
408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 |
418 |
419 |
420 | 421 | 422 |

Programmatically call

423 |

These two examples are opened via the JavaScript at the bottom of the source.

424 |
425 |
426 |
427 | 428 | 429 | 430 | 431 | 432 | 433 |
434 |
435 |
436 | 437 | $('#open-image').click(function (e) { 438 | e.preventDefault(); 439 | $(this).ekkoLightbox(); 440 | }); 441 | $('#open-youtube').click(function (e) { 442 | e.preventDefault(); 443 | $(this).ekkoLightbox(); 444 | }); 445 | 446 |

Via data-remote

447 |

Neither of these are <a /> tags, so both rely on the data-remote attribute.

448 |
449 |
450 |
451 | 452 | 453 |
454 |
455 |
456 | 457 | 458 |

Force type

459 |

If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what data-type it is.

460 |

Current allowed types are: ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url']

461 | 466 | 467 | 468 |

Hidden elements

469 |

Facebook style, only show a few images but have a large gallery

470 |
471 |
472 |
473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 | 492 | 493 |

Remote content

494 |

Given a URL, that is not an image or video (including unforced types), load the content using an iFrame.

495 |
496 |
497 |
498 |

Bootstrap Docs

499 |
500 |
501 |
502 | 503 | 504 |

Built by me, ashleydw

505 |
506 |
507 |
508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 595 | 596 | 597 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bootstrap Lightbox 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 118 | 119 | 120 | 121 |
122 | 123 |
124 |
125 |
126 | 127 |
128 |

Lightbox for Bootstrap

129 |

Utilizes Bootstraps modal plugin to implement a lightbox gallery - GitHub

130 |
131 | 132 | 133 | 134 |
135 |
136 | 137 |
138 |
139 |
140 |
141 | 142 |
143 |
144 |
145 | 146 |

Install

147 |

Grab the latest CSS / JS files from the CDN: https://cdnjs.com/libraries/ekko-lightbox.

148 |

Or, with bower: bower install ekko-lightbox --save

149 |

Or, download the files directly: https://github.com/ashleydw/lightbox/tree/master/dist

150 |

151 |

Place this near on your page, probably near the end of the body section:

152 | $(document).on('click', '[data-toggle="lightbox"]', function(event) { 153 | event.preventDefault(); 154 | $(this).ekkoLightbox(); 155 | }); 156 |

157 |

Then simply add data-toggle to your anchor tags.

158 | <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox"> 159 | <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> 160 | </a> 161 | 162 |

163 |

Obviously, you need Bootstrap. Made for Bootstrap v4 but *should* work with v3.

164 | 165 |

Options

166 |

Options are passed down to the modal object so you can also use any of the original modal options.

167 |

Pass the options to the calling function as an object, or set defaults using $.fn.ekkoLightbox.defaults (excluding modal default options, notable: title, footer, remote)

168 |
169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 |
Nametypedefaultdescriptiondata-*
leftArrow / rightArrowhtml❮ / ❯HTML for the arrows
wrappingbooleantrueWhether the gallery should loop or not
width / heightintegerForce the width / heightdata-(width|height)="[0-9]+"
maxWidth / maxHeightinteger9999Limit the container width / heightdata-(max-width|max-height)="[0-9]+"
alwaysShowClosebooleanfalseAlways show the close button, even if no title is present
loadingMessagehtmlA fancy loaderHTML injected for loading
showArrowsbooltrueDisable the navigation overlay
231 |
232 | $(this).ekkoLightbox({ 233 | alwaysShowClose: true, 234 | onShown: function() { 235 | console.log('Checking our the events huh?'); 236 | }, 237 | onNavigate: function(direction, itemIndex) 238 | console.log('Navigating '+direction+'. Current item: '+itemIndex); 239 | } 240 | ... 241 | }); 242 |

243 |

The following options are specified per element.

244 |
245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 |
NameDescriptionExample
remoteIf you can't/don't want to set the href property of an elementdata-remote="http://www...."
galleryFor grouping elementsdata-gallery="gallery-name"
typeForce the lightbox into image/YouTube mode.data-type="(image|youtube|vimeo)"
disable-external-checkForce the lightbox loading into an iframe.data-disable-external-check="(true|false)"
276 |
277 | <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image"> 278 | <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> 279 | </a> 280 | 281 |

Events

282 |

Events can be hooked into, set the the same as options above.

283 |
284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 |
NameDescription
onContentLoadedFired when content (image/video/remote page etc) has been fully loaded.
onNavigateFired before navigating a gallery.
onShow/onShown/onHide/onHiddenInherited from the bootstrap modal.
306 |
307 | 308 |

Examples

309 |

Thanks to https://unsplash.it/ for the images.

310 | 324 | 325 |

Single Image

326 |

Note: uses modal plugin title option via data-title, and the custom footer tag using data-footer

327 |
328 |
329 | 330 | 331 | 332 |
333 |
334 | 335 | 336 | 337 |

Galleries are created by adding the data-gallery attribute.

338 |
339 |
340 |
341 |
342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 |
352 |
353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 |
363 |
364 |
365 |
366 | 367 | 368 |

Limit Image Size

369 |

Note: uses modal plugin limiting via data-max-width (or data-max-height)

370 |
371 |
372 | 373 | 374 | 375 |
376 |
377 | 378 | 379 |

Videos

380 |

YouTube

381 |

You can use various YouTube URL formats, the regex used is: /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/

382 | 387 | 388 |

Vimeo

389 |

You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.

390 |
391 |

City Lights - from Colin Rich (using embed link)

392 |

City Lights - from Colin Rich (with reccommended data-remote setting)

393 |
394 | 395 |

Instagram

396 |

397 |
398 |

Instagram

399 |

This also works with photos: Instagram

400 |
401 | 402 |

Forcing width

403 |

Set the width of the video

404 | 409 | 410 | 411 | 412 | 413 | 414 |
415 |
416 |
417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 |
427 |
428 |
429 | 430 | 431 | 432 |
433 |
434 |
435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 |
445 |
446 |
447 | 448 | 449 |

Programmatically call

450 |

These two examples are opened via the JavaScript at the bottom of the source.

451 |
452 |
453 |
454 | 455 | 456 | 457 | 458 | 459 | 460 |
461 |
462 |
463 | 464 | $('#open-image').click(function (e) { 465 | e.preventDefault(); 466 | $(this).ekkoLightbox(); 467 | }); 468 | $('#open-youtube').click(function (e) { 469 | e.preventDefault(); 470 | $(this).ekkoLightbox(); 471 | }); 472 | 473 |

Via data-remote

474 |

Neither of these are <a /> tags, so both rely on the data-remote attribute.

475 |
476 |
477 |
478 | 479 | 480 |
481 |
482 |
483 | 484 | 485 |

Force type

486 |

If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what data-type it is.

487 |

Current allowed types are: ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url']

488 | 493 | 494 | 495 |

Hidden elements

496 |

Facebook style, only show a few images but have a large gallery

497 |
498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 |
509 |
510 |
511 |
512 |
513 |
514 | 515 | 516 |

Remote content

517 |

Given a URL, that is not an image or video (including unforced types), load the content using an iFrame.

518 |
519 |
520 |
521 |

Bootstrap Docs

522 |
523 |
524 |
525 | 526 | 527 | 528 |

Disable wrapping

529 |

To disable wrapping, set `wrapping` to false when creating a gallery.

530 |
531 |
532 |
533 |
534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 |
544 |
545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 |
555 |
556 |
557 |
558 | $(this).ekkoLightbox({ wrapping: false }); 559 | 560 |

Built by me, ashleydw

561 |
562 |
563 |
564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 658 | 659 | 660 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ekko-lightbox", 3 | "description": "A lightbox gallery plugin for Bootstrap based on the modal plugin", 4 | "version": "5.3.0", 5 | "keywords": [ 6 | "lightbox", 7 | "gallery", 8 | "bootstrap", 9 | "jquery", 10 | "modal" 11 | ], 12 | "homepage": "https://github.com/ashleydw/lightbox", 13 | "author": "ashleydw ", 14 | "main": "dist/ekko-lightbox.min.js", 15 | "style": "dist/ekko-lightbox.css", 16 | "less": "ekko-lightbox.less", 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/ashleydw/lightbox.git" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/ashleydw/lightbox/issues" 23 | }, 24 | "license": "MIT", 25 | "scripts": { 26 | "build": "NODE_ENV=production webpack --config webpack.config.js -p", 27 | "start": "NODE_ENV=development webpack-serve --open --no-clipboard --content ./ --config webpack.config.js --hot --colors --inline" 28 | }, 29 | "devDependencies": { 30 | "autoprefixer": "^6.4.0", 31 | "babel-core": "^6.26.3", 32 | "babel-loader": "^7.1.4", 33 | "babel-preset-env": "^1.6.1", 34 | "babel-preset-es2015": "^6.13.2", 35 | "css-hot-loader": "^1.3.9", 36 | "css-loader": "^0.28.11", 37 | "cssnano": "^3.7.4", 38 | "less": "^3.0.2", 39 | "less-loader": "^4.1.0", 40 | "mini-css-extract-plugin": "^0.4.0", 41 | "postcss-loader": "^2.1.4", 42 | "raw-loader": "^0.5.1", 43 | "style-loader": "^0.21.0", 44 | "webpack": "^4.6.0", 45 | "webpack-cli": "^2.1.2", 46 | "webpack-serve": "^0.3.2" 47 | }, 48 | "npmName": "ekko-lightbox", 49 | "npmFileMap": [ 50 | { 51 | "basePath": "/dist/", 52 | "files": [ 53 | "*" 54 | ] 55 | } 56 | ] 57 | } 58 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const webpack = require('webpack'); 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 6 | 7 | const devMode = process.env.NODE_ENV !== 'production' 8 | 9 | function getHotCSS(bundle, devMode) { 10 | if(!devMode) { 11 | return bundle; 12 | } 13 | return [ 14 | 'css-hot-loader', 15 | ].concat(bundle); 16 | } 17 | 18 | const prod = { 19 | mode: devMode ? 'development' : 'production', 20 | devtool: devMode ? 'cheap-module-source-map' : 'source-map', 21 | entry: [ 22 | './ekko-lightbox.js', 23 | './ekko-lightbox.less' 24 | ], 25 | output: { 26 | path: path.resolve(__dirname, 'dist'), 27 | filename: devMode ? '[name].js' : 'ekko-lightbox.js' 28 | }, 29 | module: { 30 | rules: [{ 31 | test: /\.less$/, 32 | use: getHotCSS([ 33 | MiniCssExtractPlugin.loader, 34 | { loader: 'css-loader', options: { sourceMap: true } }, 35 | { 36 | loader: 'postcss-loader', 37 | options: { 38 | ident: 'postcss', 39 | sourceMap: true, 40 | plugins: (loader) => [ 41 | require('autoprefixer')({ 42 | browsers: ['last 2 versions'] 43 | }), 44 | require('cssnano')() 45 | ] 46 | } 47 | }, 48 | { loader: 'less-loader', options: { sourceMap: true } } 49 | ], devMode) 50 | }, 51 | { 52 | test: /\.js$/, 53 | exclude: /(node_modules|bower_components)/, 54 | use: { 55 | loader: 'babel-loader', 56 | options: { 57 | presets: [require('babel-preset-env')] 58 | } 59 | } 60 | }] 61 | }, 62 | plugins: [ 63 | new MiniCssExtractPlugin({ 64 | filename: devMode ? '[name].css' : 'ekko-lightbox.css' 65 | }) 66 | ], 67 | }; 68 | 69 | if (!devMode) { 70 | prod.plugins.push( 71 | new webpack.BannerPlugin({ 72 | banner: 73 | 'Lightbox for Bootstrap by @ashleydw\n' + 74 | 'https://github.com/ashleydw/lightbox\n' + 75 | '\n' + 76 | 'License: https://github.com/ashleydw/lightbox/blob/master/LICENSE\n', 77 | entryOnly: true, 78 | include: 'ekko-lightbox.js' 79 | }) 80 | ); 81 | } else { 82 | prod.entry.push('./index.html'); 83 | prod.module.rules.push({ 84 | test: /\.html$/, 85 | use: "raw-loader" 86 | }); 87 | } 88 | 89 | module.exports = prod; --------------------------------------------------------------------------------