' + (this._config.title || " ") + '
'; + var btn = ''; + + var header = ''; + var footer = ''; + var body = '';
+ $(this._config.doc.body).append('');
+
+ this._$modal = $('#' + 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');
+ if (this._galleryName) {
+ this._$galleryItems = $(document.body).find('*[data-gallery="' + this._galleryName + '"]');
+ this._galleryIndex = this._$galleryItems.index(this._$element);
+ $(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this));
+
+ // add the directional arrows to the modal
+ if (this._config.showArrows && this._$galleryItems.length > 1) {
+ this._$lightboxContainer.append('');
+ this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first();
+ this._$lightboxContainer.on('click', 'a:first-child', function (event) {
+ event.preventDefault();
+ return _this.navigateLeft();
+ });
+ this._$lightboxContainer.on('click', 'a:last-child', function (event) {
+ event.preventDefault();
+ return _this.navigateRight();
+ });
+ this.updateNavigation();
+ }
+ }
+
+ this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () {
+ _this._toggleLoading(true);
+ _this._handle();
+ return _this._config.onShown.call(_this);
+ }).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function () {
+ if (_this._galleryName) {
+ $(document).off('keydown.ekkoLightbox');
+ $(window).off('resize.ekkoLightbox');
+ }
+ _this._$modal.remove();
+ return _this._config.onHidden.call(_this);
+ }).modal(this._config);
+
+ $(window).on('resize.ekkoLightbox', function () {
+ _this._resize(_this._wantedWidth, _this._wantedHeight);
+ });
+ this._$lightboxContainer.on('touchstart', function () {
+ _this._touchstartX = event.changedTouches[0].screenX;
+ }).on('touchend', function () {
+ _this._touchendX = event.changedTouches[0].screenX;
+ _this._swipeGesure();
+ });
+ }
+
+ _createClass(Lightbox, [{
+ key: 'element',
+ value: function element() {
+ return this._$element;
+ }
+ }, {
+ key: 'modal',
+ value: function modal() {
+ return this._$modal;
+ }
+ }, {
+ key: 'navigateTo',
+ value: function navigateTo(index) {
+
+ if (index < 0 || index > this._$galleryItems.length - 1) return this;
+
+ this._galleryIndex = index;
+
+ this.updateNavigation();
+
+ this._$element = $(this._$galleryItems.get(this._galleryIndex));
+ this._handle();
+ }
+ }, {
+ key: 'navigateLeft',
+ value: function navigateLeft() {
+
+ if (!this._$galleryItems) return;
+
+ if (this._$galleryItems.length === 1) return;
+
+ if (this._galleryIndex === 0) {
+ if (this._config.wrapping) this._galleryIndex = this._$galleryItems.length - 1;else return;
+ } else //circular
+ this._galleryIndex--;
+
+ this._config.onNavigate.call(this, 'left', this._galleryIndex);
+ return this.navigateTo(this._galleryIndex);
+ }
+ }, {
+ key: 'navigateRight',
+ value: function navigateRight() {
+
+ if (!this._$galleryItems) return;
+
+ if (this._$galleryItems.length === 1) return;
+
+ if (this._galleryIndex === this._$galleryItems.length - 1) {
+ if (this._config.wrapping) this._galleryIndex = 0;else return;
+ } else //circular
+ this._galleryIndex++;
+
+ this._config.onNavigate.call(this, 'right', this._galleryIndex);
+ return this.navigateTo(this._galleryIndex);
+ }
+ }, {
+ key: 'updateNavigation',
+ value: function updateNavigation() {
+ if (!this._config.wrapping) {
+ var $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay');
+ if (this._galleryIndex === 0) $nav.find('a:first-child').addClass('disabled');else $nav.find('a:first-child').removeClass('disabled');
+
+ if (this._galleryIndex === this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled');else $nav.find('a:last-child').removeClass('disabled');
+ }
+ }
+ }, {
+ key: 'close',
+ value: function close() {
+ return this._$modal.modal('hide');
+ }
+
+ // helper private methods
+ }, {
+ key: '_navigationalBinder',
+ value: function _navigationalBinder(event) {
+ event = event || window.event;
+ if (event.keyCode === 39) return this.navigateRight();
+ if (event.keyCode === 37) return this.navigateLeft();
+ }
+
+ // type detection private methods
+ }, {
+ key: '_detectRemoteType',
+ value: function _detectRemoteType(src, type) {
+
+ type = type || false;
+
+ if (!type && this._isImage(src)) type = 'image';
+ if (!type && this._getYoutubeId(src)) type = 'youtube';
+ if (!type && this._getVimeoId(src)) type = 'vimeo';
+ if (!type && this._getInstagramId(src)) type = 'instagram';
+
+ if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0) type = 'url';
+
+ return type;
+ }
+ }, {
+ key: '_isImage',
+ value: function _isImage(string) {
+ return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
+ }
+ }, {
+ key: '_containerToUse',
+ value: function _containerToUse() {
+ var _this2 = this;
+
+ // if currently showing an image, fade it out and remove
+ var $toUse = this._$lightboxBodyTwo;
+ var $current = this._$lightboxBodyOne;
+
+ if (this._$lightboxBodyTwo.hasClass('in')) {
+ $toUse = this._$lightboxBodyOne;
+ $current = this._$lightboxBodyTwo;
+ }
+
+ $current.removeClass('in show');
+ setTimeout(function () {
+ if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
+ if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
+ }, 500);
+
+ $toUse.addClass('in show');
+ return $toUse;
+ }
+ }, {
+ key: '_handle',
+ value: function _handle() {
+
+ var $toUse = this._containerToUse();
+ this._updateTitleAndFooter();
+
+ var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href');
+ var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false);
+
+ if (['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
+
+ switch (currentType) {
+ case 'image':
+ this._preloadImage(currentRemote, $toUse);
+ this._preloadImageByIndex(this._galleryIndex, 3);
+ break;
+ case 'youtube':
+ this._showYoutubeVideo(currentRemote, $toUse);
+ break;
+ case 'vimeo':
+ this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);
+ break;
+ case 'instagram':
+ this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
+ break;
+ case 'video':
+ this._showHtml5Video(currentRemote, $toUse);
+ break;
+ default:
+ // url
+ this._loadRemoteContent(currentRemote, $toUse);
+ break;
+ }
+
+ return this;
+ }
+ }, {
+ key: '_getYoutubeId',
+ value: function _getYoutubeId(string) {
+ if (!string) return false;
+ var matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
+ return matches && matches[2].length === 11 ? matches[2] : false;
+ }
+ }, {
+ key: '_getVimeoId',
+ value: function _getVimeoId(string) {
+ return string && string.indexOf('vimeo') > 0 ? string : false;
+ }
+ }, {
+ key: '_getInstagramId',
+ value: function _getInstagramId(string) {
+ return string && string.indexOf('instagram') > 0 ? string : false;
+ }
+
+ // layout private methods
+ }, {
+ key: '_toggleLoading',
+ value: function _toggleLoading(show) {
+ show = show || false;
+ if (show) {
+ this._$modalDialog.css('display', 'none');
+ this._$modal.removeClass('in show');
+ $('.modal-backdrop').append(this._config.loadingMessage);
+ } else {
+ this._$modalDialog.css('display', 'block');
+ this._$modal.addClass('in show');
+ $('.modal-backdrop').find('.ekko-lightbox-loader').remove();
+ }
+ return this;
+ }
+ }, {
+ key: '_calculateBorders',
+ value: function _calculateBorders() {
+ 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 _calculatePadding() {
+ 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 _totalCssByAttribute(attribute) {
+ return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10);
+ }
+ }, {
+ key: '_updateTitleAndFooter',
+ value: function _updateTitleAndFooter() {
+ var title = this._$element.data('title') || "";
+ var caption = this._$element.data('footer') || "";
+
+ this._titleIsShown = false;
+ if (title || this._config.alwaysShowClose) {
+ this._titleIsShown = true;
+ this._$modalHeader.css('display', '').find('.modal-title').html(title || " ");
+ } else this._$modalHeader.css('display', 'none');
+
+ this._footerIsShown = false;
+ if (caption) {
+ this._footerIsShown = true;
+ this._$modalFooter.css('display', '').html(caption);
+ } else this._$modalFooter.css('display', 'none');
+
+ return this;
+ }
+ }, {
+ key: '_showYoutubeVideo',
+ value: function _showYoutubeVideo(remote, $containerForElement) {
+ var id = this._getYoutubeId(remote);
+ var query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '';
+ var width = this._$element.data('width') || 560;
+ var height = this._$element.data('height') || width / (560 / 315);
+ return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement);
+ }
+ }, {
+ key: '_showVimeoVideo',
+ value: function _showVimeoVideo(id, $containerForElement) {
+ var width = this._$element.data('width') || 500;
+ var height = this._$element.data('height') || width / (560 / 315);
+ return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
+ }
+ }, {
+ key: '_showInstagramVideo',
+ value: function _showInstagramVideo(id, $containerForElement) {
+ // instagram load their content into iframe's so this can be put straight into the element
+ var width = this._$element.data('width') || 612;
+ var height = width + 80;
+ id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash
+ $containerForElement.html('');
+ this._resize(width, height);
+ this._config.onContentLoaded.call(this);
+ if (this._$modalArrows) //hide the arrows when showing video
+ this._$modalArrows.css('display', 'none');
+ this._toggleLoading(false);
+ return this;
+ }
+ }, {
+ key: '_showVideoIframe',
+ value: function _showVideoIframe(url, width, height, $containerForElement) {
+ // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
+ height = height || width; // default to square
+ $containerForElement.html('');
+ this._resize(width, height);
+ this._config.onContentLoaded.call(this);
+ if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
+ this._toggleLoading(false);
+ return this;
+ }
+ }, {
+ key: '_showHtml5Video',
+ value: function _showHtml5Video(url, $containerForElement) {
+ // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
+ var width = this._$element.data('width') || 560;
+ var height = this._$element.data('height') || width / (560 / 315);
+ $containerForElement.html('');
+ this._resize(width, height);
+ this._config.onContentLoaded.call(this);
+ if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
+ this._toggleLoading(false);
+ return this;
+ }
+ }, {
+ key: '_loadRemoteContent',
+ value: function _loadRemoteContent(url, $containerForElement) {
+ var _this3 = this;
+
+ var width = this._$element.data('width') || 560;
+ var height = this._$element.data('height') || 560;
+
+ var disableExternalCheck = this._$element.data('disableExternalCheck') || false;
+ this._toggleLoading(false);
+
+ // external urls are loading into an iframe
+ // local ajax can be loaded into the container itself
+ if (!disableExternalCheck && !this._isExternal(url)) {
+ $containerForElement.load(url, $.proxy(function () {
+ return _this3._$element.trigger('loaded.bs.modal');l;
+ }));
+ } else {
+ $containerForElement.html('');
+ this._config.onContentLoaded.call(this);
+ }
+
+ if (this._$modalArrows) //hide the arrows when remote content
+ this._$modalArrows.css('display', 'none');
+
+ this._resize(width, height);
+ return this;
+ }
+ }, {
+ key: '_isExternal',
+ value: function _isExternal(url) {
+ var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
+ if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
+
+ if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(':(' + ({
+ "http:": 80,
+ "https:": 443
+ })[location.protocol] + ')?$'), "") !== location.host) return true;
+
+ return false;
+ }
+ }, {
+ key: '_error',
+ value: function _error(message) {
+ console.error(message);
+ this._containerToUse().html(message);
+ this._resize(300, 300);
+ return this;
+ }
+ }, {
+ key: '_preloadImageByIndex',
+ value: function _preloadImageByIndex(startIndex, numberOfTimes) {
+
+ if (!this._$galleryItems) return;
+
+ var next = $(this._$galleryItems.get(startIndex), false);
+ if (typeof next == 'undefined') return;
+
+ var src = next.attr('data-remote') || next.attr('href');
+ if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false);
+
+ if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);
+ }
+ }, {
+ key: '_preloadImage',
+ value: function _preloadImage(src, $containerForImage) {
+ var _this4 = this;
+
+ $containerForImage = $containerForImage || false;
+
+ var img = new Image();
+ if ($containerForImage) {
+ (function () {
+
+ // if loading takes > 200ms show a loader
+ var loadingTimeout = setTimeout(function () {
+ $containerForImage.append(_this4._config.loadingMessage);
+ }, 200);
+
+ img.onload = function () {
+ if (loadingTimeout) clearTimeout(loadingTimeout);
+ loadingTimeout = null;
+ var image = $('