${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 = ``;\n\t\t\tlet body = '`\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(``)\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\n\t\t\tif(!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0)\n\t\t\t\ttype = 'url';\n\n\t\t\treturn type;\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_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', 'video', '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 'video':\n\t\t\t\t\tthis._showHtml5Video(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\t\t\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_showHtml5Video(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)\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(``);\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 = $('
- 
- 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
-