' + (this._config.title || " ") + '
'; - var btn = ''; + var h4 = "" + (this._config.title || " ") + "
"; + var btn = ""; - var header = ''; - var footer = ''; - var body = '';
- $(this._config.doc.body).append('');
+ var header = "
" + (this._isBootstrap3 ? btn + h4 : h4 + btn) + "
";
+ var footer = "";
+ var body = "";
+ $(this._config.doc.body).append("
" + dialog + "
");
- 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._$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._$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._$element.data("gallery");
if (this._galleryName) {
- this._$galleryItems = $(document.body).find('*[data-gallery="' + 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));
+ $(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) {
+ 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) {
+ this._$lightboxContainer.on("click", "a:last-child", function (event) {
event.preventDefault();
return _this.navigateRight();
});
@@ -141,541 +113,596 @@ var Lightbox = (function ($) {
}
}
- this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () {
+ 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 () {
+ }).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');
+ $(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 () {
+ $(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();
+ if (this._config.swipeGesture) {
+ this._$lightboxContainer.on("touchstart", function () {
+ _this._touchstartX = event.changedTouches[0].screenX;
+ }).on("touchend", function () {
+ _this._touchendX = event.changedTouches[0].screenX;
+ _this._swipeGesture();
+ });
}
- }, {
- 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() {
+ _createClass(Lightbox, {
+ element: {
+ value: function element() {
+ return this._$element;
+ }
+ },
+ modal: {
+ value: function modal() {
+ return this._$modal;
+ }
+ },
+ navigateTo: {
+ value: function navigateTo(index) {
- if (!this._$galleryItems) return;
+ if (index < 0 || index > this._$galleryItems.length - 1) {
+ return this;
+ }this._galleryIndex = index;
- if (this._$galleryItems.length === 1) return;
+ this.updateNavigation();
- if (this._galleryIndex === this._$galleryItems.length - 1) {
- if (this._config.wrapping) this._galleryIndex = 0;else return;
- } else //circular
- this._galleryIndex++;
+ this._$element = $(this._$galleryItems.get(this._galleryIndex));
+ this._handle();
+ }
+ },
+ 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);
+ }
+ },
+ 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);
+ }
+ },
+ 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");
+ }
+ }
+ },
+ close: {
+ value: function close() {
+ return this._$modal.modal("hide");
+ }
+ },
+ updateGallery: {
- 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');
+ // update lightbox gallery items
- if (this._galleryIndex === this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled');else $nav.find('a:last-child').removeClass('disabled');
+ value: function updateGallery() {
+ this._galleryName = this._$element.data("gallery");
+ if (this._galleryName) {
+ this._$galleryItems = $(document.body).find("*[data-gallery=\"" + this._galleryName + "\"]");
+ this.updateNavigation();
+ }
}
- }
- }, {
- key: 'close',
- value: function close() {
- return this._$modal.modal('hide');
- }
+ },
+ _navigationalBinder: {
- // 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();
- }
+ // helper private methods
- // type detection private methods
- }, {
- key: '_detectRemoteType',
- value: function _detectRemoteType(src, type) {
+ value: function _navigationalBinder(event) {
+ event = event || window.event;
+ if (event.keyCode === 39) {
+ return this.navigateRight();
+ }if (event.keyCode === 37) {
+ return this.navigateLeft();
+ }
+ }
+ },
+ _detectRemoteType: {
- type = type || false;
+ // type detection private methods
- 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 == 'audio' || type == 'video' || !type && this._isMedia(src)) type = 'media';
- if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(type) < 0) type = 'url';
+ value: function _detectRemoteType(src, type) {
- return type;
- }
- }, {
- key: '_getRemoteContentType',
- value: function _getRemoteContentType(src) {
- var response = $.ajax({
- type: 'HEAD',
- url: src,
- async: false
- });
- var contentType = response.getResponseHeader('Content-Type');
- return contentType;
- }
- }, {
- key: '_isImage',
- value: function _isImage(string) {
- return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
- }
- }, {
- key: '_isMedia',
- value: function _isMedia(string) {
- return string && string.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i);
- }
- }, {
- key: '_containerToUse',
- value: function _containerToUse() {
- var _this2 = this;
+ type = type || false;
- // if currently showing an image, fade it out and remove
- var $toUse = this._$lightboxBodyTwo;
- var $current = this._$lightboxBodyOne;
+ 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 == "audio" || type == "video" || !type && this._isMedia(src)) type = "media";
+ if (!type || ["image", "youtube", "vimeo", "instagram", "media", "url"].indexOf(type) < 0) type = "url";
- if (this._$lightboxBodyTwo.hasClass('in')) {
- $toUse = this._$lightboxBodyOne;
- $current = this._$lightboxBodyTwo;
+ return type;
+ }
+ },
+ _getRemoteContentType: {
+ value: function _getRemoteContentType(src) {
+ var response = $.ajax({
+ type: "HEAD",
+ url: src,
+ async: false
+ });
+ var contentType = response.getResponseHeader("Content-Type");
+ return contentType;
+ }
+ },
+ _isImage: {
+ value: function _isImage(string) {
+ return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
+ }
+ },
+ _isMedia: {
+ value: function _isMedia(string) {
+ return string && string.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i);
}
+ },
+ _containerToUse: {
+ value: function _containerToUse() {
+ var _this = 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);
+ $current.removeClass("in show");
+ setTimeout(function () {
+ if (!_this._$lightboxBodyTwo.hasClass("in")) _this._$lightboxBodyTwo.empty();
+ if (!_this._$lightboxBodyOne.hasClass("in")) _this._$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', 'media', '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 'media':
- this._showHtml5Media(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;
- }
+ $toUse.addClass("in show");
+ return $toUse;
+ }
+ },
+ _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", "media", "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 "media":
+ this._showHtml5Media(currentRemote, $toUse);
+ break;
+ default:
+ // url
+ this._loadRemoteContent(currentRemote, $toUse);
+ break;
+ }
- // 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: '_showHtml5Media',
- value: function _showHtml5Media(url, $containerForElement) {
- // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
- var contentType = this._getRemoteContentType(url);
- if (!contentType) {
- return this._error(this._config.strings.type);
- }
- var mediaType = '';
- if (contentType.indexOf('audio') > 0) {
- mediaType = 'audio';
- } else {
- mediaType = 'video';
- }
- 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('');
+ return this;
+ }
+ },
+ _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;
+ }
+ },
+ _getVimeoId: {
+ value: function _getVimeoId(string) {
+ return string && string.indexOf("vimeo") > 0 ? string : false;
+ }
+ },
+ _getInstagramId: {
+ value: function _getInstagramId(string) {
+ return string && string.indexOf("instagram") > 0 ? string : false;
+ }
+ },
+ _toggleLoading: {
+
+ // layout private methods
+
+ 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;
+ }
+ },
+ _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") };
+ }
+ },
+ _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") };
+ }
+ },
+ _totalCssByAttribute: {
+ value: function _totalCssByAttribute(attribute) {
+ return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10);
+ }
+ },
+ _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;
+ }
+ },
+ _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);
+ }
+ },
+ _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);
+ }
+ },
+ _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;
}
+ },
+ _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;
+ }
+ },
+ _showHtml5Media: {
+ value: function _showHtml5Media(url, $containerForElement) {
+ // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
+ var contentType = this._getRemoteContentType(url);
+ if (!contentType) {
+ return this._error(this._config.strings.type);
+ }
+ var mediaType = "";
+ if (contentType.indexOf("audio") > 0) {
+ mediaType = "audio";
+ } else {
+ mediaType = "video";
+ }
+ 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;
+ }
+ },
+ _loadRemoteContent: {
+ value: function _loadRemoteContent(url, $containerForElement) {
+ var _this = 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 _this._$element.trigger("loaded.bs.modal");
+ }));
+ } 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 (this._$modalArrows) //hide the arrows when remote content
+ this._$modalArrows.css("display", "none");
- 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 = $('