lightbox-bootstrap-rails 4.alpha5.0 → 5.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3a15924f622ddf6d740e1b12315878ca5ad4316a
-  data.tar.gz: 672171730c444d1327c3a69909f19ad9f9f02b0e
+  metadata.gz: 2b486085e5a08b5e755c05d4a1f2f80da6e8534b
+  data.tar.gz: 2ffcd305f0a8b36069fd00177aa86714f7b49247
 SHA512:
-  metadata.gz: 8c129717657d806a8aece7aa6e9cc5856b609f829006b4c40645fd6980ff41e83b20e0ba456912622556dfca8525de9a2a2d53eddee2b5c65d7960973db5b4ef
-  data.tar.gz: 26006da48ecf12d9f916d4a51d70914a292e4bb15d229467095e1f73e76c76a41784506cc223f65fee9a885d7e1f8a42e04927c1aaed1ee78163722d4a26cd28
+  metadata.gz: 45dca40428ef2458e609ce791010e2e39ca378faf452b40a4fad921885de5a10b23a6d07b64b05ed6c868bceed85b031573eec97b049ce4e2be077ddcb1bdf5a
+  data.tar.gz: 2f1597ca8cdb6f63a85e36f76c9a0d2f9afba2f80f6005f6b711640794dc0975b0f6f5878247501e71e413637f5e1721f27d7ea732b22684138b7d72babdef36

data/README.md

@@ -1,6 +1,6 @@
-# Lightbox for Bootstrap 3 and 4
+# Lightbox for Bootstrap 4
 
-This gem was built for the use of 'Lightbox for Bootstrap 3 and 4' as Rails assets pipeline and you can look for the detailed documents at http://ashleydw.github.io/lightbox/
+This gem was built for the use of 'Lightbox for Bootstrap 4' as Rails assets pipeline and you can look for the detailed documents at http://ashleydw.github.io/lightbox/
 
 [![Gem Version](https://badge.fury.io/rb/lightbox-bootstrap-rails.svg)](http://badge.fury.io/rb/lightbox-bootstrap-rails)
 
@@ -9,7 +9,7 @@ This gem was built for the use of 'Lightbox for Bootstrap 3 and 4' as Rails asse
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'lightbox-bootstrap-rails'
+gem 'lightbox-bootstrap-rails', '5.0.0'
 ```
 
 And then execute:
@@ -70,7 +70,8 @@ Among the gem sources, a test application is provided and there you can find how
   - v 3.3.0.0 : initially created.
   - v 3.3.0.1 : deployed to Rubygems.org
   - v 3.3.0.2 : modified @import stylesheet syntax
-  - v 3.3.0.3 : fixed typos in ekko-lightbox.min.js and ekko-lightbox.js
+  - v 3.3.0.3 : fixed typos in ekko-lightbox.min.js and ekko-lightbox.js ([lightbox v4.0.2](https://github.com/ashleydw/lightbox/tree/v4.0.2) for Boostrap 3).
+  - v 5.0.0.0 : updated with [lightbox v5.0.0](https://github.com/ashleydw/lightbox/tree/v5.0.0) for Boostrap 4.
 
 ## Contributing
 

data/lib/lightbox/bootstrap/rails/version.rb

@@ -1,7 +1,7 @@
 module Lightbox
   module Bootstrap
     module Rails
-      VERSION = "4.alpha5.0"
+      VERSION = "5.0.0"
     end
   end
 end

data/vendor/assets/javascripts/lightbox-bootstrap/ekko-lightbox.js

@@ -1,398 +1,602 @@
-/*
-Lightbox for Bootstrap 3 by @ashleydw
-https://github.com/ashleydw/lightbox
-
-License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
-*/
-
-
-(function() {
-  "use strict";
-  var $, EkkoLightbox;
-
-  $ = jQuery;
-
-  EkkoLightbox = function(element, options) {
-    var content, footer, header,
-      _this = this;
-    this.options = $.extend({
-      title: null,
-      footer: null,
-      remote: null
-    }, $.fn.ekkoLightbox.defaults, options || {});
-    this.$element = $(element);
-    content = '';
-    this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
-    header = '<div class="modal-header"' + (this.options.title || this.options.always_show_close ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">' + (this.options.title || "&nbsp;") + '</h4></div>';
-    footer = '<div class="modal-footer"' + (this.options.footer ? '' : ' style="display:none"') + '>' + this.options.footer + '</div>';
-    $(document.body).append('<div id="' + this.modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>');
-    this.modal = $('#' + this.modal_id);
-    this.modal_dialog = this.modal.find('.modal-dialog').first();
-    this.modal_content = this.modal.find('.modal-content').first();
-    this.modal_body = this.modal.find('.modal-body').first();
-    this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
-    this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
-    this.showLoading();
-    this.modal_arrows = null;
-    this.border = {
-      top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
-      right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
-      bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
-      left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
-    };
-    this.padding = {
-      top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
-      right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
-      bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
-      left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
-    };
-    this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', function() {
-      _this.modal_shown();
-      return _this.options.onShown.call(_this);
-    }).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', function() {
-      if (_this.gallery) {
-        $(document).off('keydown.ekkoLightbox');
-      }
-      _this.modal.remove();
-      return _this.options.onHidden.call(_this);
-    }).modal('show', options);
-    return this.modal;
-  };
-
-  EkkoLightbox.prototype = {
-    modal_shown: function() {
-      var video_id,
-        _this = this;
-      if (!this.options.remote) {
-        return this.error('No remote target given');
-      } else {
-        this.gallery = this.$element.data('gallery');
-        if (this.gallery) {
-          if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') {
-            this.gallery_items = $(document.body).find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
-          } else {
-            this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-toggle="lightbox"][data-gallery="' + this.gallery + '"]');
-          }
-          this.gallery_index = this.gallery_items.index(this.$element);
-          $(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
-          if (this.options.directional_arrows && this.gallery_items.length > 1) {
-            this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
-            this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
-            this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', function(event) {
-              event.preventDefault();
-              return _this.navigate_left();
-            });
-            this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', function(event) {
-              event.preventDefault();
-              return _this.navigate_right();
-            });
-          }
-        }
-        if (this.options.type) {
-          if (this.options.type === 'image') {
-            return this.preloadImage(this.options.remote, true);
-          } else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
-            return this.showYoutubeVideo(video_id);
-          } else if (this.options.type === 'vimeo') {
-            return this.showVimeoVideo(this.options.remote);
-          } else if (this.options.type === 'instagram') {
-            return this.showInstagramVideo(this.options.remote);
-          } else if (this.options.type === 'url') {
-            return this.loadRemoteContent(this.options.remote);
-          } else if (this.options.type === 'video') {
-            return this.showVideoIframe(this.options.remote);
-          } else {
-            return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo|instagram|url|video\"");
-          }
-        } else {
-          return this.detectRemoteType(this.options.remote);
-        }
-      }
-    },
-    strip_stops: function(str) {
-      return str.replace(/\./g, '');
-    },
-    strip_spaces: function(str) {
-      return str.replace(/\s/g, '');
-    },
-    isImage: function(str) {
-      return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
-    },
-    isSwf: function(str) {
-      return str.match(/\.(swf)((\?|#).*)?$/i);
-    },
-    getYoutubeId: function(str) {
-      var match;
-      match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
-      if (match && match[2].length === 11) {
-        return match[2];
-      } else {
-        return false;
-      }
-    },
-    getVimeoId: function(str) {
-      if (str.indexOf('vimeo') > 0) {
-        return str;
-      } else {
-        return false;
-      }
-    },
-    getInstagramId: function(str) {
-      if (str.indexOf('instagram') > 0) {
-        return str;
-      } else {
-        return false;
-      }
-    },
-    navigate: function(event) {
-      event = event || window.event;
-      if (event.keyCode === 39 || event.keyCode === 37) {
-        if (event.keyCode === 39) {
-          return this.navigate_right();
-        } else if (event.keyCode === 37) {
-          return this.navigate_left();
-        }
-      }
-    },
-    navigateTo: function(index) {
-      var next, src;
-      if (index < 0 || index > this.gallery_items.length - 1) {
-        return this;
-      }
-      this.showLoading();
-      this.gallery_index = index;
-      this.$element = $(this.gallery_items.get(this.gallery_index));
-      this.updateTitleAndFooter();
-      src = this.$element.attr('data-remote') || this.$element.attr('href');
-      this.detectRemoteType(src, this.$element.attr('data-type') || false);
-      if (this.gallery_index + 1 < this.gallery_items.length) {
-        next = $(this.gallery_items.get(this.gallery_index + 1), false);
-        src = next.attr('data-remote') || next.attr('href');
-        if (next.attr('data-type') === 'image' || this.isImage(src)) {
-          return this.preloadImage(src, false);
-        }
-      }
-    },
-    navigate_left: function() {
-      if (this.gallery_items.length === 1) {
-        return;
-      }
-      if (this.gallery_index === 0) {
-        this.gallery_index = this.gallery_items.length - 1;
-      } else {
-        this.gallery_index--;
-      }
-      this.options.onNavigate.call(this, 'left', this.gallery_index);
-      return this.navigateTo(this.gallery_index);
-    },
-    navigate_right: function() {
-      if (this.gallery_items.length === 1) {
-        return;
-      }
-      if (this.gallery_index === this.gallery_items.length - 1) {
-        this.gallery_index = 0;
-      } else {
-        this.gallery_index++;
-      }
-      this.options.onNavigate.call(this, 'right', this.gallery_index);
-      return this.navigateTo(this.gallery_index);
-    },
-    detectRemoteType: function(src, type) {
-      var video_id;
-      type = type || false;
-      if (type === 'image' || this.isImage(src)) {
-        this.options.type = 'image';
-        return this.preloadImage(src, true);
-      } else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
-        this.options.type = 'youtube';
-        return this.showYoutubeVideo(video_id);
-      } else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
-        this.options.type = 'vimeo';
-        return this.showVimeoVideo(video_id);
-      } else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
-        this.options.type = 'instagram';
-        return this.showInstagramVideo(video_id);
-      } else if (type === 'video') {
-        this.options.type = 'video';
-        return this.showVideoIframe(video_id);
-      } else {
-        this.options.type = 'url';
-        return this.loadRemoteContent(src);
-      }
-    },
-    updateTitleAndFooter: function() {
-      var caption, footer, header, title;
-      header = this.modal_content.find('.modal-header');
-      footer = this.modal_content.find('.modal-footer');
-      title = this.$element.data('title') || "";
-      caption = this.$element.data('footer') || "";
-      if (title || this.options.always_show_close) {
-        header.css('display', '').find('.modal-title').html(title || "&nbsp;");
-      } else {
-        header.css('display', 'none');
-      }
-      if (caption) {
-        footer.css('display', '').html(caption);
-      } else {
-        footer.css('display', 'none');
-      }
-      return this;
-    },
-    showLoading: function() {
-      this.lightbox_body.html('<div class="modal-loading">' + this.options.loadingMessage + '</div>');
-      return this;
-    },
-    showYoutubeVideo: function(id) {
-      var height, width;
-      width = this.checkDimensions(this.$element.data('width') || 560);
-      height = width / (560 / 315);
-      return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1', width, height);
-    },
-    showVimeoVideo: function(id) {
-      var height, width;
-      width = this.checkDimensions(this.$element.data('width') || 560);
-      height = width / (500 / 281);
-      return this.showVideoIframe(id + '?autoplay=1', width, height);
-    },
-    showInstagramVideo: function(id) {
-      var height, width;
-      width = this.checkDimensions(this.$element.data('width') || 612);
-      this.resize(width);
-      height = width + 80;
-      this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
-      this.options.onContentLoaded.call(this);
-      if (this.modal_arrows) {
-        return this.modal_arrows.css('display', 'none');
-      }
-    },
-    showVideoIframe: function(url, width, height) {
-      height = height || width;
-      this.resize(width);
-      this.lightbox_body.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
-      this.options.onContentLoaded.call(this);
-      if (this.modal_arrows) {
-        this.modal_arrows.css('display', 'none');
-      }
-      return this;
-    },
-    loadRemoteContent: function(url) {
-      var disableExternalCheck, width,
-        _this = this;
-      width = this.$element.data('width') || 560;
-      this.resize(width);
-      disableExternalCheck = this.$element.data('disableExternalCheck') || false;
-      if (!disableExternalCheck && !this.isExternal(url)) {
-        this.lightbox_body.load(url, $.proxy(function() {
-          return _this.$element.trigger('loaded.bs.modal');
-        }));
-      } else {
-        this.lightbox_body.html('<iframe width="' + width + '" height="' + width + '" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
-        this.options.onContentLoaded.call(this);
-      }
-      if (this.modal_arrows) {
-        this.modal_arrows.css('display', 'none');
-      }
-      return this;
-    },
-    isExternal: function(url) {
-      var match;
-      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;
-    },
-    error: function(message) {
-      this.lightbox_body.html(message);
-      return this;
-    },
-    preloadImage: function(src, onLoadShowImage) {
-      var img,
-        _this = this;
-      img = new Image();
-      if ((onLoadShowImage == null) || onLoadShowImage === true) {
-        img.onload = function() {
-          var image;
-          image = $('<img />');
-          image.attr('src', img.src);
-          image.addClass('img-responsive img-fluid');
-          _this.lightbox_body.html(image);
-          if (_this.modal_arrows) {
-            _this.modal_arrows.css('display', 'block');
-          }
-          _this.resize(img.width);
-          return _this.options.onContentLoaded.call(_this);
-        };
-        img.onerror = function() {
-          return _this.error('Failed to load image: ' + src);
-        };
-      }
-      img.src = src;
-      return img;
-    },
-    resize: function(width) {
-      var width_total;
-      width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
-      this.modal_dialog.css('width', 'auto').css('max-width', width_total);
-      this.lightbox_container.find('a').css('line-height', function() {
-        return $(this).parent().height() + 'px';
-      });
-      return this;
-    },
-    checkDimensions: function(width) {
-      var body_width, width_total;
-      width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
-      body_width = document.body.clientWidth;
-      if (width_total > body_width) {
-        width = this.modal_body.width();
-      }
-      return width;
-    },
-    close: function() {
-      return this.modal.modal('hide');
-    },
-    addTrailingSlash: function(url) {
-      if (url.substr(-1) !== '/') {
-        url += '/';
-      }
-      return url;
-    }
-  };
-
-  $.fn.ekkoLightbox = function(options) {
-    return this.each(function() {
-      var $this;
-      $this = $(this);
-      options = $.extend({
-        remote: $this.attr('data-remote') || $this.attr('href'),
-        gallery_parent_selector: $this.attr('data-parent'),
-        type: $this.attr('data-type')
-      }, options, $this.data());
-      new EkkoLightbox(this, options);
-      return this;
-    });
-  };
-
-  $.fn.ekkoLightbox.defaults = {
-    gallery_parent_selector: 'document.body',
-    left_arrow_class: '.glyphicon .glyphicon-chevron-left',
-    right_arrow_class: '.glyphicon .glyphicon-chevron-right',
-    directional_arrows: true,
-    type: null,
-    always_show_close: true,
-    loadingMessage: 'Loading...',
-    onShow: function() {},
-    onShown: function() {},
-    onHide: function() {},
-    onHidden: function() {},
-    onNavigate: function() {},
-    onContentLoaded: function() {}
-  };
-
-}).call(this);
+/*!
+ * Lightbox for Bootstrap by @ashleydw
+ * https://github.com/ashleydw/lightbox
+ *
+ * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
+ */
++function ($) {
+
+'use strict';
+
+var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+var Lightbox = (function ($) {
+
+	var NAME = 'ekkoLightbox';
+	var JQUERY_NO_CONFLICT = $.fn[NAME];
+
+	var Default = {
+		title: '',
+		footer: '',
+		showArrows: true, //display the left / right arrows or not
+		type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
+		alwaysShowClose: false, //always show the close button, even if there is no title
+		loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
+		leftArrow: '<span>&#10094;</span>',
+		rightArrow: '<span>&#10095;</span>',
+		strings: {
+			close: 'Close',
+			fail: 'Failed to load image:',
+			type: 'Could not detect remote target type. Force the type using data-type'
+		},
+		doc: document, // if in an iframe can specify top.document
+		onShow: function onShow() {},
+		onShown: function onShown() {},
+		onHide: function onHide() {},
+		onHidden: function onHidden() {},
+		onNavigate: function onNavigate() {},
+		onContentLoaded: function onContentLoaded() {}
+	};
+
+	var Lightbox = (function () {
+		_createClass(Lightbox, null, [{
+			key: 'Default',
+
+			/**
+    
+      Class properties:
+    
+    _$element: null -> the <a> element currently being displayed
+    _$modal: The bootstrap modal generated
+       _$modalDialog: The .modal-dialog
+       _$modalContent: The .modal-content
+       _$modalBody: The .modal-body
+       _$modalHeader: The .modal-header
+       _$modalFooter: The .modal-footer
+    _$lightboxContainerOne: Container of the first lightbox element
+    _$lightboxContainerTwo: Container of the second lightbox element
+    _$lightboxBody: First element in the container
+    _$modalArrows: The overlayed arrows container
+   	 _$galleryItems: Other <a>'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
+    _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;
+			}
+		}]);
+
+		function Lightbox($element, config) {
+			var _this = this;
+
+			_classCallCheck(this, Lightbox);
+
+			this._config = $.extend({}, Default, config);
+			this._$modalArrows = null;
+			this._galleryIndex = 0;
+			this._galleryName = null;
+			this._padding = null;
+			this._border = null;
+			this._titleIsShown = false;
+			this._footerIsShown = false;
+			this._wantedWidth = 0;
+			this._wantedHeight = 0;
+			this._modalId = 'ekkoLightbox-' + Math.floor(Math.random() * 1000 + 1);
+			this._$element = $element instanceof jQuery ? $element : $($element);
+
+			var header = '<div class="modal-header"' + (this._config.title || this._config.alwaysShowClose ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-label="' + this._config.strings.close + '"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">' + (this._config.title || "&nbsp;") + '</h4></div>';
+			var footer = '<div class="modal-footer"' + (this._config.footer ? '' : ' style="display:none"') + '>' + (this._config.footer || "&nbsp;") + '</div>';
+			var body = '<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in"></div><div class="ekko-lightbox-item fade"></div></div></div>';
+			var dialog = '<div class="modal-dialog" role="document"><div class="modal-content">' + header + body + footer + '</div></div>';
+			$(this._config.doc.body).append('<div id="' + this._modalId + '" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true">' + dialog + '</div>');
+
+			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('<div class="ekko-lightbox-nav-overlay"><a href="#">' + this._config.leftArrow + '</a><a href="#">' + this._config.rightArrow + '</a></div>');
+					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._$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);
+			});
+		}
+
+		_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._$element = $(this._$galleryItems.get(this._galleryIndex));
+				this._handle();
+			}
+		}, {
+			key: 'navigateLeft',
+			value: function navigateLeft() {
+
+				if (this._$galleryItems.length === 1) return;
+
+				if (this._galleryIndex === 0) this._galleryIndex = this._$galleryItems.length - 1;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.length === 1) return;
+
+				if (this._galleryIndex === this._$galleryItems.length - 1) this._galleryIndex = 0;else //circular
+					this._galleryIndex++;
+
+				this._config.onNavigate.call(this, 'right', this._galleryIndex);
+				return this.navigateTo(this._galleryIndex);
+			}
+		}, {
+			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');
+				setTimeout(function () {
+					if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
+					if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
+				}, 500);
+
+				$toUse.addClass('in');
+				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');
+					$('.modal-backdrop').append(this._config.loadingMessage);
+				} else {
+					this._$modalDialog.css('display', 'block');
+					this._$modal.addClass('in');
+					$('.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 || "&nbsp;");
+				} 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 = 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('<iframe width="' + width + '" height="' + height + '" src="' + id + 'embed/" frameborder="0" allowfullscreen></iframe>');
+				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('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
+				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('<div class="embed-responsive embed-responsive-16by9"><video width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>');
+				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('<iframe src="' + url + '" frameborder="0" allowfullscreen></iframe>');
+					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 = $('<img />');
+							image.attr('src', img.src);
+							image.addClass('img-fluid');
+							$containerForImage.html(image);
+							if (_this4._$modalArrows) _this4._$modalArrows.css('display', ''); // remove display to default to css property
+
+							_this4._resize(img.width, img.height);
+							_this4._toggleLoading(false);
+							return _this4._config.onContentLoaded.call(_this4);
+						};
+						img.onerror = function () {
+							_this4._toggleLoading(false);
+							return _this4._error(_this4._config.strings.fail + ('  ' + src));
+						};
+					})();
+				}
+
+				img.src = src;
+				return img;
+			}
+		}, {
+			key: '_resize',
+			value: function _resize(width, height) {
+
+				height = height || width;
+				this._wantedWidth = width;
+				this._wantedHeight = height;
+
+				// if width > the available space, scale down the expected width and height
+				var widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right;
+				var maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth);
+				if (width + widthBorderAndPadding > maxWidth) {
+					height = (maxWidth - widthBorderAndPadding) / width * height;
+					width = maxWidth;
+				} else width = width + widthBorderAndPadding;
+
+				var headerHeight = 0,
+				    footerHeight = 0;
+
+				// as the resize is performed the modal is show, the calculate might fail
+				// if so, default to the default sizes
+				if (this._footerIsShown) footerHeight = this._$modalFooter.outerHeight(true) || 55;
+
+				if (this._titleIsShown) headerHeight = this._$modalHeader.outerHeight(true) || 67;
+
+				var borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top;
+
+				//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins
+				var margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));
+
+				var maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight);
+				if (height > maxHeight) {
+					// if height > the available height, scale down the width
+					var factor = Math.min(maxHeight / height, 1);
+					width = Math.ceil(factor * width);
+				}
+
+				this._$lightboxContainer.css('height', maxHeight);
+				this._$modalDialog.css('width', 'auto').css('maxWidth', width);
+
+				this._$modal.modal('_handleUpdate');
+				return this;
+			}
+		}], [{
+			key: '_jQueryInterface',
+			value: function _jQueryInterface(config) {
+				var _this5 = this;
+
+				config = config || {};
+				return this.each(function () {
+					var $this = $(_this5);
+					var _config = $.extend({}, Lightbox.Default, $this.data(), typeof config === 'object' && config);
+
+					new Lightbox(_this5, _config);
+				});
+			}
+		}]);
+
+		return Lightbox;
+	})();
+
+	$.fn[NAME] = Lightbox._jQueryInterface;
+	$.fn[NAME].Constructor = Lightbox;
+	$.fn[NAME].noConflict = function () {
+		$.fn[NAME] = JQUERY_NO_CONFLICT;
+		return Lightbox._jQueryInterface;
+	};
+
+	return Lightbox;
+})(jQuery);
+//# sourceMappingURL=ekko-lightbox.js.map
+
+}(jQuery);