diff --git a/dist/ekko-lightbox.css b/dist/ekko-lightbox.css
index 48bf0ab..5cf4301 100644
--- a/dist/ekko-lightbox.css
+++ b/dist/ekko-lightbox.css
@@ -1,2 +1,2 @@
-.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)}}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVra28tbGlnaHRib3guY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGVBQ0UsOEJBQXlCLEFBQXpCLHVCQUF5QixBQUN6QixzQkFBb0IsQUFBcEIsbUJBQW9CLEFBQ3BCLHFCQUF3QixBQUF4Qix1QkFBd0IsQUFDeEIseUJBQTZCLENBQzlCLEFBQ0QseUJBQ0UsaUJBQW1CLENBQ3BCLEFBQ0QsZ0RBQ0Usa0JBQW1CLEFBQ25CLE1BQU8sQUFDUCxPQUFRLEFBQ1IsU0FBVSxBQUNWLFFBQVMsQUFDVCxVQUFZLENBQ2IsQUFDRCxzQkFDRSxXQUFZLEFBQ1osV0FBYSxDQUNkLEFBQ0QsMkJBQ0UsVUFBYSxBQUNiLGtCQUFtQixBQUNuQixNQUFPLEFBQ1AsT0FBUSxBQUNSLFdBQVksQUFDWixZQUFhLEFBQ2Isb0JBQWMsQUFBZCxZQUFjLENBQ2YsQUFDRCw2QkFDRSxXQUFRLEFBQVIsT0FBUSxBQUNSLG9CQUFjLEFBQWQsYUFBYyxBQUNkLHNCQUFvQixBQUFwQixtQkFBb0IsQUFDcEIsVUFBVyxBQUNYLHVCQUF5QixBQUN6QixXQUFZLEFBQ1osZUFBZ0IsQUFDaEIsU0FBYSxDQUNkLEFBQ0QsK0JBQ0Usb0JBQWEsQUFBYixXQUFhLENBQ2QsQUFDRCxvQ0FDRSxZQUFjLENBQ2YsQUFDRCxrQ0FDRSxjQUFnQixDQUNqQixBQUNELDZDQUNFLGdCQUFrQixDQUNuQixBQUNELG1DQUNFLG9CQUFzQixDQUN2QixBQUNELG1DQUNFLFlBQWMsQ0FDZixBQUNELHNDQUNFLGVBQWdCLEFBQ2hCLGlCQUFtQixDQUNwQixBQUNELHVCQUNFLFVBQVcsQUFDWCxvQkFBc0IsQ0FDdkIsQUFDRCw2QkFDRSxZQUFjLENBQ2YsQUFDRCw2QkFDRSxlQUFpQixDQUNsQixBQUNELHNCQUNFLGtCQUFtQixBQUNuQixNQUFPLEFBQ1AsT0FBUSxBQUNSLFNBQVUsQUFDVixRQUFTLEFBQ1QsV0FBWSxBQUNaLG9CQUFjLEFBQWQsYUFBYyxBQUVkLDBCQUF1QixBQUF2QixzQkFBdUIsQUFFdkIscUJBQXdCLEFBQXhCLHVCQUF3QixBQUV4QixzQkFBb0IsQUFBcEIsa0JBQW9CLENBQ3JCLEFBQ0QsMEJBQ0UsV0FBWSxBQUNaLFlBQWEsQUFDYixrQkFBbUIsQUFDbkIsaUJBQW1CLENBQ3BCLEFBQ0QsOEJBQ0UsV0FBWSxBQUNaLFlBQWEsQUFDYixrQkFBbUIsQUFDbkIsc0JBQXVCLEFBQ3ZCLFdBQWEsQUFDYixrQkFBbUIsQUFDbkIsTUFBTyxBQUNQLE9BQVEsQUFDUixtQ0FBNkMsQ0FDOUMsQUFDRCx5Q0FDRSxtQkFBcUIsQ0FDdEIsQUFDRCw0Q0FDRSxxQkFBdUIsQ0FDeEIsQUFVRCxhQUNFLE1BRUUsbUJBQW9CLEFBQ3BCLDBCQUE0QixDQUM3QixBQUNELElBQ0UsbUJBQW9CLEFBQ3BCLDBCQUE0QixDQUM3QixDQUNGIiwiZmlsZSI6ImVra28tbGlnaHRib3guY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmVra28tbGlnaHRib3gge1xuICBkaXNwbGF5OiBmbGV4ICFpbXBvcnRhbnQ7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwYWRkaW5nLXJpZ2h0OiAwcHghaW1wb3J0YW50O1xufVxuLmVra28tbGlnaHRib3gtY29udGFpbmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuLmVra28tbGlnaHRib3gtY29udGFpbmVyID4gZGl2LmVra28tbGlnaHRib3gtaXRlbSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICBib3R0b206IDA7XG4gIHJpZ2h0OiAwO1xuICB3aWR0aDogMTAwJTtcbn1cbi5la2tvLWxpZ2h0Ym94IGlmcmFtZSB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSB7XG4gIHotaW5kZXg6IDEwMDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhIHtcbiAgZmxleDogMTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAwLjVzO1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAzMHB4O1xuICB6LWluZGV4OiAxMDA7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhID4gKiB7XG4gIGZsZXgtZ3JvdzogMTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1vdmVybGF5IGEgPiAqOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1vdmVybGF5IGEgc3BhbiB7XG4gIHBhZGRpbmc6IDAgMzBweDtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1vdmVybGF5IGE6bGFzdC1jaGlsZCBzcGFuIHtcbiAgdGV4dC1hbGlnbjogcmlnaHQ7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhOmhvdmVyIHtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuLmVra28tbGlnaHRib3gtbmF2LW92ZXJsYXkgYTpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG59XG4uZWtrby1saWdodGJveC1uYXYtb3ZlcmxheSBhLmRpc2FibGVkIHtcbiAgY3Vyc29yOiBkZWZhdWx0O1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG4uZWtrby1saWdodGJveCBhOmhvdmVyIHtcbiAgb3BhY2l0eTogMTtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuLmVra28tbGlnaHRib3ggLm1vZGFsLWRpYWxvZyB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG4uZWtrby1saWdodGJveCAubW9kYWwtZm9vdGVyIHtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbn1cbi5la2tvLWxpZ2h0Ym94LWxvYWRlciB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICBib3R0b206IDA7XG4gIHJpZ2h0OiAwO1xuICB3aWR0aDogMTAwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgLyogZXN0YWJsaXNoIGZsZXggY29udGFpbmVyICovXG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIC8qIG1ha2UgbWFpbiBheGlzIHZlcnRpY2FsICovXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAvKiBjZW50ZXIgaXRlbXMgdmVydGljYWxseSwgaW4gdGhpcyBjYXNlICovXG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYge1xuICB3aWR0aDogNDBweDtcbiAgaGVpZ2h0OiA0MHB4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5la2tvLWxpZ2h0Ym94LWxvYWRlciA+IGRpdiA+IGRpdiB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgb3BhY2l0eTogMC42O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgYW5pbWF0aW9uOiBzay1ib3VuY2UgMnMgaW5maW5pdGUgZWFzZS1pbi1vdXQ7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYgPiBkaXY6bGFzdC1jaGlsZCB7XG4gIGFuaW1hdGlvbi1kZWxheTogLTFzO1xufVxuLm1vZGFsLWRpYWxvZyAuZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYgPiBkaXYge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzO1xufVxuQC13ZWJraXQta2V5ZnJhbWVzIHNrLWJvdW5jZSB7XG4gIDAlLFxuICAxMDAlIHtcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGUoMCk7XG4gIH1cbiAgNTAlIHtcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGUoMSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2stYm91bmNlIHtcbiAgMCUsXG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMCk7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDApO1xuICB9XG4gIDUwJSB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGUoMSk7XG4gIH1cbn1cbiJdfQ== */
\ No newline at end of file
+.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{height:100%;width:60px;text-align:center;position:relative}.ekko-lightbox-nav a{opacity:0;transition:opacity .5s;color:#fff;font-size:30px;z-index:1;position:absolute;top:calc(50% - 25px);border-radius:100%;height:50px;width:50px;text-align:center;background-color:hsla(0,0%,39%,.6)}.ekko-lightbox-nav a:focus{outline:none}.ekko-lightbox-nav a:hover{text-decoration:none}.ekko-lightbox-nav a.disabled{cursor:default;visibility:hidden}.ekko-lightbox-nav-left{float:left}.ekko-lightbox-nav-left a{left:5px}.ekko-lightbox-nav-right{float:right}.ekko-lightbox-nav-right a{right:5px}.ekko-lightbox-nav:hover a{opacity:1}.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)}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVra28tbGlnaHRib3guY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGVBQ0UsOEJBQXlCLEFBQXpCLHVCQUF5QixBQUN6QixzQkFBb0IsQUFBcEIsbUJBQW9CLEFBQ3BCLHFCQUF3QixBQUF4Qix1QkFBd0IsQUFDeEIseUJBQTZCLENBQzlCLEFBQ0QseUJBQ0UsaUJBQW1CLENBQ3BCLEFBQ0QsZ0RBQ0Usa0JBQW1CLEFBQ25CLE1BQU8sQUFDUCxPQUFRLEFBQ1IsU0FBVSxBQUNWLFFBQVMsQUFDVCxVQUFZLENBQ2IsQUFDRCxzQkFDRSxXQUFZLEFBQ1osV0FBYSxDQUNkLEFBQ0QsbUJBQ0UsWUFBYSxBQUNiLFdBQVksQUFDWixrQkFBbUIsQUFDbkIsaUJBQW1CLENBQ3BCLEFBQ0QscUJBQ0UsVUFBVyxBQUNYLHVCQUF3QixBQUN4QixXQUFZLEFBQ1osZUFBZ0IsQUFDaEIsVUFBVyxBQUNYLGtCQUFtQixBQUNuQixxQkFBc0IsQUFDdEIsbUJBQW9CLEFBQ3BCLFlBQWEsQUFDYixXQUFZLEFBQ1osa0JBQW1CLEFBQ25CLGtDQUEyQyxDQUM1QyxBQUNELDJCQUNFLFlBQWMsQ0FDZixBQUNELDJCQUNFLG9CQUFzQixDQUN2QixBQUNELDhCQUNFLGVBQWdCLEFBQ2hCLGlCQUFtQixDQUNwQixBQUNELHdCQUNFLFVBQVksQ0FDYixBQUNELDBCQUNFLFFBQVUsQ0FDWCxBQUNELHlCQUNFLFdBQWEsQ0FDZCxBQUNELDJCQUNFLFNBQVcsQ0FDWixBQUNELDJCQUNFLFNBQVcsQ0FDWixBQUNELHVCQUNFLFVBQVcsQUFDWCxvQkFBc0IsQ0FDdkIsQUFDRCw2QkFDRSxZQUFjLENBQ2YsQUFDRCw2QkFDRSxlQUFpQixDQUNsQixBQUNELHNCQUNFLGtCQUFtQixBQUNuQixNQUFPLEFBQ1AsT0FBUSxBQUNSLFNBQVUsQUFDVixRQUFTLEFBQ1QsV0FBWSxBQUNaLG9CQUFjLEFBQWQsYUFBYyxBQUVkLDBCQUF1QixBQUF2QixzQkFBdUIsQUFFdkIscUJBQXdCLEFBQXhCLHVCQUF3QixBQUV4QixzQkFBb0IsQUFBcEIsa0JBQW9CLENBQ3JCLEFBQ0QsMEJBQ0UsV0FBWSxBQUNaLFlBQWEsQUFDYixrQkFBbUIsQUFDbkIsaUJBQW1CLENBQ3BCLEFBQ0QsOEJBQ0UsV0FBWSxBQUNaLFlBQWEsQUFDYixrQkFBbUIsQUFDbkIsc0JBQXVCLEFBQ3ZCLFdBQWEsQUFDYixrQkFBbUIsQUFDbkIsTUFBTyxBQUNQLE9BQVEsQUFDUixtQ0FBNkMsQ0FDOUMsQUFDRCx5Q0FDRSxtQkFBcUIsQ0FDdEIsQUFDRCw0Q0FDRSxxQkFBdUIsQ0FDeEIsQUFVRCxhQUNFLE1BRUUsbUJBQW9CLEFBQ3BCLDBCQUE0QixDQUM3QixBQUNELElBQ0UsbUJBQW9CLEFBQ3BCLDBCQUE0QixDQUM3QixDQUNGIiwiZmlsZSI6ImVra28tbGlnaHRib3guY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmVra28tbGlnaHRib3gge1xuICBkaXNwbGF5OiBmbGV4ICFpbXBvcnRhbnQ7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwYWRkaW5nLXJpZ2h0OiAwcHghaW1wb3J0YW50O1xufVxuLmVra28tbGlnaHRib3gtY29udGFpbmVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuLmVra28tbGlnaHRib3gtY29udGFpbmVyID4gZGl2LmVra28tbGlnaHRib3gtaXRlbSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICBib3R0b206IDA7XG4gIHJpZ2h0OiAwO1xuICB3aWR0aDogMTAwJTtcbn1cbi5la2tvLWxpZ2h0Ym94IGlmcmFtZSB7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG4uZWtrby1saWdodGJveC1uYXYge1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiA2MHB4O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdiBhIHtcbiAgb3BhY2l0eTogMDtcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAuNXM7XG4gIGNvbG9yOiAjZmZmO1xuICBmb250LXNpemU6IDMwcHg7XG4gIHotaW5kZXg6IDE7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiBjYWxjKDUwJSAtIDI1cHgpO1xuICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICBoZWlnaHQ6IDUwcHg7XG4gIHdpZHRoOiA1MHB4O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMTAwLCAxMDAsIDEwMCwgMC42KTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdiBhOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdiBhOmhvdmVyIHtcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xufVxuLmVra28tbGlnaHRib3gtbmF2IGEuZGlzYWJsZWQge1xuICBjdXJzb3I6IGRlZmF1bHQ7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cbi5la2tvLWxpZ2h0Ym94LW5hdi1sZWZ0IHtcbiAgZmxvYXQ6IGxlZnQ7XG59XG4uZWtrby1saWdodGJveC1uYXYtbGVmdCBhIHtcbiAgbGVmdDogNXB4O1xufVxuLmVra28tbGlnaHRib3gtbmF2LXJpZ2h0IHtcbiAgZmxvYXQ6IHJpZ2h0O1xufVxuLmVra28tbGlnaHRib3gtbmF2LXJpZ2h0IGEge1xuICByaWdodDogNXB4O1xufVxuLmVra28tbGlnaHRib3gtbmF2OmhvdmVyIGEge1xuICBvcGFjaXR5OiAxO1xufVxuLmVra28tbGlnaHRib3ggYTpob3ZlciB7XG4gIG9wYWNpdHk6IDE7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbn1cbi5la2tvLWxpZ2h0Ym94IC5tb2RhbC1kaWFsb2cge1xuICBkaXNwbGF5OiBub25lO1xufVxuLmVra28tbGlnaHRib3ggLm1vZGFsLWZvb3RlciB7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgbGVmdDogMDtcbiAgYm90dG9tOiAwO1xuICByaWdodDogMDtcbiAgd2lkdGg6IDEwMCU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIC8qIGVzdGFibGlzaCBmbGV4IGNvbnRhaW5lciAqL1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAvKiBtYWtlIG1haW4gYXhpcyB2ZXJ0aWNhbCAqL1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgLyogY2VudGVyIGl0ZW1zIHZlcnRpY2FsbHksIGluIHRoaXMgY2FzZSAqL1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuLmVra28tbGlnaHRib3gtbG9hZGVyID4gZGl2IHtcbiAgd2lkdGg6IDQwcHg7XG4gIGhlaWdodDogNDBweDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG4uZWtrby1saWdodGJveC1sb2FkZXIgPiBkaXYgPiBkaXYge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gIG9wYWNpdHk6IDAuNjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDA7XG4gIGxlZnQ6IDA7XG4gIGFuaW1hdGlvbjogc2stYm91bmNlIDJzIGluZmluaXRlIGVhc2UtaW4tb3V0O1xufVxuLmVra28tbGlnaHRib3gtbG9hZGVyID4gZGl2ID4gZGl2Omxhc3QtY2hpbGQge1xuICBhbmltYXRpb24tZGVsYXk6IC0xcztcbn1cbi5tb2RhbC1kaWFsb2cgLmVra28tbGlnaHRib3gtbG9hZGVyID4gZGl2ID4gZGl2IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzMzMztcbn1cbkAtd2Via2l0LWtleWZyYW1lcyBzay1ib3VuY2Uge1xuICAwJSxcbiAgMTAwJSB7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDApO1xuICB9XG4gIDUwJSB7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDEpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNrLWJvdW5jZSB7XG4gIDAlLFxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDApO1xuICAgIC13ZWJraXQtdHJhbnNmb3JtOiBzY2FsZSgwKTtcbiAgfVxuICA1MCUge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlKDEpO1xuICB9XG59XG4iXX0= */
\ No newline at end of file
diff --git a/dist/ekko-lightbox.js b/dist/ekko-lightbox.js
index f9c0574..20f8048 100644
--- a/dist/ekko-lightbox.js
+++ b/dist/ekko-lightbox.js
@@ -48,8 +48,8 @@ var Lightbox = (function ($) {
key: 'Default',
/**
- Class properties:
- _$element: null -> the element currently being displayed
+ Class properties:
+ _$element: null -> the element currently being displayed
_$modal: The bootstrap modal generated
_$modalDialog: The .modal-dialog
_$modalContent: The .modal-content
@@ -60,13 +60,13 @@ var Lightbox = (function ($) {
_$lightboxContainerTwo: Container of the second lightbox element
_$lightboxBody: First element in the container
_$modalArrows: The overlayed arrows container
- _$galleryItems: Other 's available for this gallery
+ _$galleryItems: Other 's available for this gallery
_galleryName: Name of the current data('gallery') showing
_galleryIndex: The current index of the _$galleryItems being shown
- _config: {} the options for the modal
+ _config: {} the options for the modal
_modalId: unique id for the current lightbox
_padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content
- */
+ */
get: function get() {
return Default;
@@ -74,7 +74,7 @@ var Lightbox = (function ($) {
}]);
function Lightbox($element, config) {
- var _this = this;
+ var _this2 = this;
_classCallCheck(this, Lightbox);
@@ -127,41 +127,40 @@ var Lightbox = (function ($) {
// add the directional arrows to the modal
if (this._config.showArrows && this._$galleryItems.length > 1) {
- this._$lightboxContainer.append('
`)\r\n\t\t\t\t\tthis._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav')\r\n\t\t\t\t\tthis._$modalArrows.each(function(index, el) {\r\n\t\t\t\t\t\t$(el).on('click', 'a', function(event) {\r\n\t\t\t\t\t\t\tevent.preventDefault()\r\n\t\t\t\t\t\t\treturn $(el).attr('class').match(/left/) ? _this.navigateLeft() : _this.navigateRight()\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t});\r\n\t\t\t\t\tthis.updateNavigation()\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tthis._$modal\r\n\t\t\t.on('show.bs.modal', this._config.onShow.bind(this))\r\n\t\t\t.on('shown.bs.modal', () => {\r\n\t\t\t\tthis._toggleLoading(true)\r\n\t\t\t\tthis._handle()\r\n\t\t\t\treturn this._config.onShown.call(this)\r\n\t\t\t})\r\n\t\t\t.on('hide.bs.modal', this._config.onHide.bind(this))\r\n\t\t\t.on('hidden.bs.modal', () => {\r\n\t\t\t\tif (this._galleryName) {\r\n\t\t\t\t\t$(document).off('keydown.ekkoLightbox')\r\n\t\t\t\t\t$(window).off('resize.ekkoLightbox')\r\n\t\t\t\t}\r\n\t\t\t\tthis._$modal.remove()\r\n\t\t\t\treturn this._config.onHidden.call(this)\r\n\t\t\t})\r\n\t\t\t.modal(this._config)\r\n\r\n\t\t\t$(window).on('resize.ekkoLightbox', () => {\r\n\t\t\t\tthis._resize(this._wantedWidth, this._wantedHeight)\r\n\t\t\t})\r\n\t\t\tthis._$lightboxContainer\r\n\t\t\t.on('touchstart', () => {\r\n\t\t\t\tthis._touchstartX = event.changedTouches[0].screenX;\r\n\r\n\t\t\t})\r\n\t\t\t.on('touchend', () => {\r\n\t\t\t\tthis._touchendX = event.changedTouches[0].screenX;\r\n\t\t\t this._swipeGesure();\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\telement() {\r\n\t\t\treturn this._$element;\r\n\t\t}\r\n\r\n\t\tmodal() {\r\n\t\t\treturn this._$modal;\r\n\t\t}\r\n\r\n\t\tnavigateTo(index) {\r\n\r\n\t\t\tif (index < 0 || index > this._$galleryItems.length-1)\r\n\t\t\t\treturn this\r\n\r\n\t\t\tthis._galleryIndex = index\r\n\r\n\t\t\tthis.updateNavigation()\r\n\r\n\t\t\tthis._$element = $(this._$galleryItems.get(this._galleryIndex))\r\n\t\t\tthis._handle();\r\n\t\t}\r\n\r\n\t\tnavigateLeft() {\r\n\r\n\t\t\tif(!this._$galleryItems)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tif (this._$galleryItems.length === 1)\r\n\t\t\t\treturn\r\n\r\n\t\t\tif (this._galleryIndex === 0) {\r\n\t\t\t\tif (this._config.wrapping)\r\n\t\t\t\t\tthis._galleryIndex = this._$galleryItems.length - 1\r\n\t\t\t\telse\r\n\t\t\t\t\treturn\r\n\t\t\t}\r\n\t\t\telse //circular\r\n\t\t\t\tthis._galleryIndex--\r\n\r\n\t\t\tthis._config.onNavigate.call(this, 'left', this._galleryIndex)\r\n\t\t\treturn this.navigateTo(this._galleryIndex)\r\n\t\t}\r\n\r\n\t\tnavigateRight() {\r\n\r\n\t\t\tif(!this._$galleryItems)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tif (this._$galleryItems.length === 1)\r\n\t\t\t\treturn\r\n\r\n\t\t\tif (this._galleryIndex === this._$galleryItems.length - 1) {\r\n\t\t\t\tif (this._config.wrapping)\r\n\t\t\t\t\tthis._galleryIndex = 0\r\n\t\t\t\telse\r\n\t\t\t\t\treturn\r\n\t\t\t}\r\n\t\t\telse //circular\r\n\t\t\t\tthis._galleryIndex++\r\n\r\n\t\t\tthis._config.onNavigate.call(this, 'right', this._galleryIndex)\r\n\t\t\treturn this.navigateTo(this._galleryIndex)\r\n\t\t}\r\n\r\n\t\tupdateNavigation() {\r\n\t\t\tif (!this._config.wrapping) {\r\n\t\t\t\tlet $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay')\r\n\t\t\t\tif (this._galleryIndex === 0)\r\n\t\t\t\t\t$nav.find('a:first-child').addClass('disabled')\r\n\t\t\t\telse\r\n\t\t\t\t\t$nav.find('a:first-child').removeClass('disabled')\r\n\r\n\t\t\t\tif (this._galleryIndex === this._$galleryItems.length - 1)\r\n\t\t\t\t\t$nav.find('a:last-child').addClass('disabled')\r\n\t\t\t\telse\r\n\t\t\t\t\t$nav.find('a:last-child').removeClass('disabled')\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tclose() {\r\n\t\t\treturn this._$modal.modal('hide');\r\n\t\t}\r\n\r\n\t\t// helper private methods\r\n\t\t_navigationalBinder(event) {\r\n\t\t\tevent = event || window.event;\r\n\t\t\tif (event.keyCode === 39)\r\n\t\t\t\treturn this.navigateRight()\r\n\t\t\tif (event.keyCode === 37)\r\n\t\t\t\treturn this.navigateLeft()\r\n\t\t}\r\n\r\n\t\t// type detection private methods\r\n\t\t_detectRemoteType(src, type) {\r\n\r\n\t\t\ttype = type || false;\r\n\r\n\t\t\tif(!type && this._isImage(src))\r\n\t\t\t\ttype = 'image';\r\n\t\t\tif(!type && this._getYoutubeId(src))\r\n\t\t\t\ttype = 'youtube';\r\n\t\t\tif(!type && this._getVimeoId(src))\r\n\t\t\t\ttype = 'vimeo';\r\n\t\t\tif(!type && this._getInstagramId(src))\r\n\t\t\t\ttype = 'instagram';\r\n\r\n\t\t\tif(!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0)\r\n\t\t\t\ttype = 'url';\r\n\r\n\t\t\treturn type;\r\n\t\t}\r\n\r\n\t\t_isImage(string) {\r\n\t\t\treturn string && string.match(/(^data:image\\/.*,)|(\\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\\?|#).*)?$)/i)\r\n\t\t}\r\n\r\n\t\t_containerToUse() {\r\n\t\t\t// if currently showing an image, fade it out and remove\r\n\t\t\tlet $toUse = this._$lightboxBodyTwo\r\n\t\t\tlet $current = this._$lightboxBodyOne\r\n\r\n\t\t\tif(this._$lightboxBodyTwo.hasClass('in')) {\r\n\t\t\t\t$toUse = this._$lightboxBodyOne\r\n\t\t\t\t$current = this._$lightboxBodyTwo\r\n\t\t\t}\r\n\r\n\t\t\t$current.removeClass('in show')\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tif(!this._$lightboxBodyTwo.hasClass('in'))\r\n\t\t\t\t\tthis._$lightboxBodyTwo.empty()\r\n\t\t\t\tif(!this._$lightboxBodyOne.hasClass('in'))\r\n\t\t\t\t\tthis._$lightboxBodyOne.empty()\r\n\t\t\t}, 500)\r\n\r\n\t\t\t$toUse.addClass('in show')\r\n\t\t\t$toUse.css('z-index', '1');\r\n\t\t\t$current.css('z-index', '0');\r\n\t\t\treturn $toUse\r\n\t\t}\r\n\r\n\t\t_handle() {\r\n\r\n\t\t\tlet $toUse = this._containerToUse()\r\n\t\t\tthis._updateTitleAndFooter()\r\n\r\n\t\t\tlet currentRemote = this._$element.attr('data-remote') || this._$element.attr('href')\r\n\t\t\tlet currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false)\r\n\r\n\t\t\tif(['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0)\r\n\t\t\t\treturn this._error(this._config.strings.type)\r\n\r\n\t\t\tswitch(currentType) {\r\n\t\t\t\tcase 'image':\r\n\t\t\t\t\tthis._preloadImage(currentRemote, $toUse)\r\n\t\t\t\t\tthis._preloadImageByIndex(this._galleryIndex, 3)\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'youtube':\r\n\t\t\t\t\tthis._showYoutubeVideo(currentRemote, $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'vimeo':\r\n\t\t\t\t\tthis._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'instagram':\r\n\t\t\t\t\tthis._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase 'video':\r\n\t\t\t\t\tthis._showHtml5Video(currentRemote, $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tdefault: // url\r\n\t\t\t\t\tthis._loadRemoteContent(currentRemote, $toUse);\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_getYoutubeId(string) {\r\n\t\t\tif(!string)\r\n\t\t\t\treturn false;\r\n\t\t\tlet matches = string.match(/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|\\&v=)([^#\\&\\?]*).*/)\r\n\t\t\treturn (matches && matches[2].length === 11) ? matches[2] : false\r\n\t\t}\r\n\r\n\t\t_getVimeoId(string) {\r\n\t\t\treturn string && string.indexOf('vimeo') > 0 ? string : false\r\n\t\t}\r\n\r\n\t\t_getInstagramId(string) {\r\n\t\t\treturn string && string.indexOf('instagram') > 0 ? string : false\r\n\t\t}\r\n\r\n\t\t// layout private methods\r\n\t\t_toggleLoading(show) {\r\n\t\t\tshow = show || false\r\n\t\t\tif(show) {\r\n\t\t\t\tthis._$modalDialog.css('display', 'none')\r\n\t\t\t\tthis._$modal.removeClass('in show')\r\n\t\t\t\t$('.modal-backdrop').append(this._config.loadingMessage)\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis._$modalDialog.css('display', 'block')\r\n\t\t\t\tthis._$modal.addClass('in show')\r\n\t\t\t\t$('.modal-backdrop').find('.ekko-lightbox-loader').remove()\r\n\t\t\t}\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_calculateBorders() {\r\n\t\t\treturn {\r\n\t\t\t\ttop: this._totalCssByAttribute('border-top-width'),\r\n\t\t\t\tright: this._totalCssByAttribute('border-right-width'),\r\n\t\t\t\tbottom: this._totalCssByAttribute('border-bottom-width'),\r\n\t\t\t\tleft: this._totalCssByAttribute('border-left-width'),\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t_calculatePadding() {\r\n\t\t\treturn {\r\n\t\t\t\ttop: this._totalCssByAttribute('padding-top'),\r\n\t\t\t\tright: this._totalCssByAttribute('padding-right'),\r\n\t\t\t\tbottom: this._totalCssByAttribute('padding-bottom'),\r\n\t\t\t\tleft: this._totalCssByAttribute('padding-left'),\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t_totalCssByAttribute(attribute) {\r\n\t\t\treturn parseInt(this._$modalDialog.css(attribute), 10) +\r\n\t\t\t\tparseInt(this._$modalContent.css(attribute), 10) +\r\n\t\t\t\tparseInt(this._$modalBody.css(attribute), 10)\r\n\t\t}\r\n\r\n\t\t_updateTitleAndFooter() {\r\n\t\t\tlet title = this._$element.data('title') || \"\"\r\n\t\t\tlet caption = this._$element.data('footer') || \"\"\r\n\r\n\t\t\tthis._titleIsShown = false\r\n\t\t\tif (title || this._config.alwaysShowClose) {\r\n\t\t\t\tthis._titleIsShown = true\r\n\t\t\t\tthis._$modalHeader.css('display', '').find('.modal-title').html(title || \" \")\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t\tthis._$modalHeader.css('display', 'none')\r\n\r\n\t\t\tthis._footerIsShown = false\r\n\t\t\tif (caption) {\r\n\t\t\t\tthis._footerIsShown = true\r\n\t\t\t\tthis._$modalFooter.css('display', '').html(caption)\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t\tthis._$modalFooter.css('display', 'none')\r\n\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_showYoutubeVideo(remote, $containerForElement) {\r\n\t\t\tlet id = this._getYoutubeId(remote)\r\n\t\t\tlet query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : ''\r\n\t\t\tlet width = this._$element.data('width') || 560\r\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\r\n\t\t\treturn this._showVideoIframe(\r\n\t\t\t\t`//www.youtube.com/embed/${id}?badge=0&autoplay=1&html5=1${query}`,\r\n\t\t\t\twidth,\r\n\t\t\t\theight,\r\n\t\t\t\t$containerForElement\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\t_showVimeoVideo(id, $containerForElement) {\r\n\t\t\tlet width = this._$element.data('width') || 500\r\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\r\n\t\t\treturn this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement)\r\n\t\t}\r\n\r\n\t\t_showInstagramVideo(id, $containerForElement) {\r\n\t\t\t// instagram load their content into iframe's so this can be put straight into the element\r\n\t\t\tlet width = this._$element.data('width') || 612\r\n\t\t\tlet height = width + 80;\r\n\t\t\tid = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash\r\n\t\t\t$containerForElement.html(``);\r\n\t\t\tthis._resize(width, height);\r\n\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\tif (this._$modalArrows) //hide the arrows when showing video\r\n\t\t\t\tthis._$modalArrows.css('display', 'none');\r\n\t\t\tthis._toggleLoading(false);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_showVideoIframe(url, width, height, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)\r\n\t\t\theight = height || width; // default to square\r\n\t\t\t$containerForElement.html(``);\r\n\t\t\tthis._resize(width, height);\r\n\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\tif (this._$modalArrows)\r\n\t\t\t\tthis._$modalArrows.css('display', 'none'); //hide the arrows when showing video\r\n\t\t\tthis._toggleLoading(false);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_showHtml5Video(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)\r\n\t\t\tlet width = this._$element.data('width') || 560\r\n\t\t\tlet height = this._$element.data('height') || width / ( 560/315 )\r\n\t\t\t$containerForElement.html(``);\r\n\t\t\tthis._resize(width, height);\r\n\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\tif (this._$modalArrows)\r\n\t\t\t\tthis._$modalArrows.css('display', 'none'); //hide the arrows when showing video\r\n\t\t\tthis._toggleLoading(false);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_loadRemoteContent(url, $containerForElement) {\r\n\t\t\tlet width = this._$element.data('width') || 560;\r\n\t\t\tlet height = this._$element.data('height') || 560;\r\n\r\n\t\t\tlet disableExternalCheck = this._$element.data('disableExternalCheck') || false;\r\n\t\t\tthis._toggleLoading(false);\r\n\r\n\t\t\t// external urls are loading into an iframe\r\n\t\t\t// local ajax can be loaded into the container itself\r\n\t\t\tif (!disableExternalCheck && !this._isExternal(url)) {\r\n\t\t\t\t$containerForElement.load(url, $.proxy(() => {\r\n\t\t\t\t\treturn this._$element.trigger('loaded.bs.modal');l\r\n\t\t\t\t}));\r\n\r\n\t\t\t} else {\r\n\t\t\t\t$containerForElement.html(``);\r\n\t\t\t\tthis._config.onContentLoaded.call(this);\r\n\t\t\t}\r\n\r\n\t\t\tif (this._$modalArrows) //hide the arrows when remote content\r\n\t\t\t\tthis._$modalArrows.css('display', 'none')\r\n\r\n\t\t\tthis._resize(width, height);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_isExternal(url) {\r\n\t\t\tlet match = url.match(/^([^:\\/?#]+:)?(?:\\/\\/([^\\/?#]*))?([^?#]+)?(\\?[^#]*)?(#.*)?/);\r\n\t\t\tif (typeof match[1] === \"string\" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol)\r\n\t\t\t\treturn true;\r\n\r\n\t\t\tif (typeof match[2] === \"string\" && match[2].length > 0 && match[2].replace(new RegExp(`:(${{\r\n\t\t\t\t\t\"http:\": 80,\r\n\t\t\t\t\t\"https:\": 443\r\n\t\t\t\t}[location.protocol]})?$`), \"\") !== location.host)\r\n\t\t\t\treturn true;\r\n\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\t_error( message ) {\r\n\t\t\tconsole.error(message);\r\n\t\t\tthis._containerToUse().html(message);\r\n\t\t\tthis._resize(300, 300);\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\t_preloadImageByIndex(startIndex, numberOfTimes) {\r\n\r\n\t\t\tif(!this._$galleryItems)\r\n\t\t\t\treturn;\r\n\r\n\t\t\tlet next = $(this._$galleryItems.get(startIndex), false)\r\n\t\t\tif(typeof next == 'undefined')\r\n\t\t\t\treturn\r\n\r\n\t\t\tlet src = next.attr('data-remote') || next.attr('href')\r\n\t\t\tif (next.attr('data-type') === 'image' || this._isImage(src))\r\n\t\t\t\tthis._preloadImage(src, false)\r\n\r\n\t\t\tif(numberOfTimes > 0)\r\n\t\t\t\treturn this._preloadImageByIndex(startIndex + 1, numberOfTimes-1);\r\n\t\t}\r\n\r\n\t\t_preloadImage( src, $containerForImage) {\r\n\r\n\t\t\t$containerForImage = $containerForImage || false\r\n\r\n\t\t\tlet img = new Image();\r\n\t\t\tif ($containerForImage) {\r\n\r\n\t\t\t\t// if loading takes > 200ms show a loader\r\n\t\t\t\tlet loadingTimeout = setTimeout(() => {\r\n\t\t\t\t\t$containerForImage.append(this._config.loadingMessage)\r\n\t\t\t\t}, 200)\r\n\r\n\t\t\t\timg.onload = () => {\r\n\t\t\t\t\tif(loadingTimeout)\r\n\t\t\t\t\t\tclearTimeout(loadingTimeout)\r\n\t\t\t\t\tloadingTimeout = null;\r\n\t\t\t\t\tlet image = $('');\r\n\t\t\t\t\timage.attr('src', img.src);\r\n\t\t\t\t\timage.addClass('img-fluid');\r\n\r\n\t\t\t\t\t// backward compatibility for bootstrap v3\r\n\t\t\t\t\timage.css('width', '100%');\r\n\r\n\t\t\t\t\t$containerForImage.html(image);\r\n\t\t\t\t\tif (this._$modalArrows)\r\n\t\t\t\t\t\tthis._$modalArrows.css('display', '') // remove display to default to css property\r\n\r\n\t\t\t\t\tthis._resize(img.width, img.height);\r\n\t\t\t\t\tthis._toggleLoading(false);\r\n\t\t\t\t\treturn this._config.onContentLoaded.call(this);\r\n\t\t\t\t};\r\n\t\t\t\timg.onerror = () => {\r\n\t\t\t\t\tthis._toggleLoading(false);\r\n\t\t\t\t\treturn this._error(this._config.strings.fail+` ${src}`);\r\n\t\t\t\t};\r\n\t\t\t}\r\n\r\n\t\t\timg.src = src;\r\n\t\t\treturn img;\r\n\t\t}\r\n\r\n\t\t_swipeGesure() {\r\n\t\t if (this._touchendX < this._touchstartX) {\r\n\t\t return this.navigateRight();\r\n\t\t }\r\n\t\t if (this._touchendX > this._touchstartX) {\r\n\t\t return this.navigateLeft();\r\n\t\t }\r\n\t\t}\r\n\r\n\t\t_resize( width, height ) {\r\n\r\n\t\t\theight = height || width\r\n\t\t\tthis._wantedWidth = width\r\n\t\t\tthis._wantedHeight = height\r\n\r\n\t\t\tlet imageAspecRatio = width / height;\r\n\r\n\t\t\t// if width > the available space, scale down the expected width and height\r\n\t\t\tlet widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right\r\n\r\n\t\t\t// force 10px margin if window size > 575px\r\n\t\t\tlet addMargin = this._config.doc.body.clientWidth > 575 ? 20 : 0\r\n\t\t\tlet discountMargin = this._config.doc.body.clientWidth > 575 ? 0 : 20\r\n\r\n\t\t\tlet maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth)\r\n\r\n\t\t\tif((width + widthBorderAndPadding) > maxWidth) {\r\n\t\t\t\theight = (maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio;\r\n\t\t\t\twidth = maxWidth\r\n\t\t\t} else\r\n\t\t\t\twidth = (width + widthBorderAndPadding)\r\n\r\n\t\t\tlet headerHeight = 0,\r\n\t\t\t footerHeight = 0\r\n\r\n\t\t\t// as the resize is performed the modal is show, the calculate might fail\r\n\t\t\t// if so, default to the default sizes\r\n\t\t\tif (this._footerIsShown)\r\n\t\t\t\tfooterHeight = this._$modalFooter.outerHeight(true) || 55\r\n\r\n\t\t\tif (this._titleIsShown)\r\n\t\t\t\theaderHeight = this._$modalHeader.outerHeight(true) || 67\r\n\r\n\t\t\tlet borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top\r\n\r\n\t\t\t//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins\r\n\t\t\tlet margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));\r\n\r\n\t\t\tlet maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight);\r\n\r\n\t\t\tif(height > maxHeight) {\r\n\t\t\t\t// if height > the available height, scale down the width\r\n\t\t\t\twidth = Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding;\r\n\t\t\t}\r\n\r\n\t\t\tthis._$lightboxContainer.css('height', maxHeight)\r\n\t\t\tthis._$modalDialog.css('flex', 1).css('maxWidth', width);\r\n\r\n\t\t\tlet modal = this._$modal.data('bs.modal');\r\n\t\t\tif (modal) {\r\n\t\t\t\t// v4 method is mistakenly protected\r\n\t\t\t\ttry {\r\n\t\t\t\t\tmodal._handleUpdate();\r\n\t\t\t\t} catch(Exception) {\r\n\t\t\t\t\tmodal.handleUpdate();\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\tstatic _jQueryInterface(config) {\r\n\t\t\tconfig = config || {}\r\n\t\t\treturn this.each(() => {\r\n\t\t\t\tlet $this = $(this)\r\n\t\t\t\tlet _config = $.extend(\r\n\t\t\t\t\t{},\r\n\t\t\t\t\tLightbox.Default,\r\n\t\t\t\t\t$this.data(),\r\n\t\t\t\t\ttypeof config === 'object' && config\r\n\t\t\t\t)\r\n\r\n\t\t\t\tnew Lightbox(this, _config)\r\n\t\t\t})\r\n\t\t}\r\n\t}\r\n\r\n\r\n\r\n\t$.fn[NAME] = Lightbox._jQueryInterface\r\n\t$.fn[NAME].Constructor = Lightbox\r\n\t$.fn[NAME].noConflict = () => {\r\n\t\t$.fn[NAME] = JQUERY_NO_CONFLICT\r\n\t\treturn Lightbox._jQueryInterface\r\n\t}\r\n\r\n\treturn Lightbox\r\n\r\n})(jQuery)\r\n\r\nexport default Lightbox\r\n"]}
\ No newline at end of file
diff --git a/dist/ekko-lightbox.min.js b/dist/ekko-lightbox.min.js
index 97bd7b6..d802d3e 100644
--- a/dist/ekko-lightbox.min.js
+++ b/dist/ekko-lightbox.min.js
@@ -1,2 +1,2 @@
-+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='
',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='