Added new configuration options that allow specifying which attribute…

…s are used for the data source, footer, and title.

Options can be the name of attributes or callbacks.

Added a method called _getAttr which will use the .data method if the attribute starts with data-, otherwise the .attr method.

dist/ekko-lightbox.js

@@ -1,11 +1,11 @@
-/*!
- * Lightbox for Bootstrap by @ashleydw
- * https://github.com/ashleydw/lightbox
- *
- * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
- */
-+function ($) {
-
+/*!
+ * 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; }; })();
@@ -34,6 +34,9 @@ var Lightbox = (function ($) {
  fail: 'Failed to load image:',
  type: 'Could not detect remote target type. Force the type using data-type'
  },
+ dataSrc: 'data-remote',
+ titleSrc: 'data-title',
+ footerSrc: 'data-footer',
  doc: document, // if in an iframe can specify top.document
  onShow: function onShow() {},
  onShown: function onShown() {},
@@ -261,6 +264,17 @@ var Lightbox = (function ($) {
 
  return type;
  }
+ }, {
+ key: '_getAttr',
+ value: function _getAttr(element, attr) {
+ if (typeof attr === 'function') {
+ return attr.call(element);
+ } else if (0 === attr.toString().indexOf("data-")) {
+ return $(element).data(attr.replace("data-", ""));
+ } else {
+ return $(element).attr(attr);
+ }
+ }
  }, {
  key: '_isImage',
  value: function _isImage(string) {
@@ -296,8 +310,9 @@ var Lightbox = (function ($) {
  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);
+ var currentRemote = this._getAttr(this._$element, this._config.dataSrc) || this._getAttr(this._$element, 'href');
+ console.log(currentRemote);
+ var currentType = this._detectRemoteType(currentRemote, this._getAttr(this._$element, 'data-type') || false);
 
  if (['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
 
@@ -388,8 +403,8 @@ var Lightbox = (function ($) {
  }, {
  key: '_updateTitleAndFooter',
  value: function _updateTitleAndFooter() {
- var title = this._$element.data('title') || "";
- var caption = this._$element.data('footer') || "";
+ var title = this._getAttr(this._$element, this._config.titleSrc) || "";
+ var caption = this._getAttr(this._$element, this._config.footerSrc) || "";
 
  this._titleIsShown = false;
  if (title || this._config.alwaysShowClose) {
@@ -519,8 +534,8 @@ var Lightbox = (function ($) {
  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);
+ var src = this._getAttr(next, this._config.dataSrc) || this._getAttr(next, 'href');
+ if (this._getAttr(next, 'data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false);
 
  if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);
  }
@@ -663,6 +678,6 @@ var Lightbox = (function ($) {
 
  return Lightbox;
 })(jQuery);
-//# sourceMappingURL=ekko-lightbox.js.map
-
-}(jQuery);
+//# sourceMappingURL=ekko-lightbox.js.map
+
+}(jQuery);

ekko-lightbox.js

@@ -20,6 +20,9 @@ const Lightbox = (($) => {
  fail: 'Failed to load image:',
  type: 'Could not detect remote target type. Force the type using data-type',
  },
+ dataSrc: 'data-remote',
+ titleSrc: 'data-title',
+ footerSrc: 'data-footer',
  doc: document, // if in an iframe can specify top.document
  onShow() {},
  onShown() {},
@@ -268,6 +271,16 @@ const Lightbox = (($) => {
  return type;
  }
 
+ _getAttr(element,attr){
+ if(typeof attr === 'function') {
+ return attr.call(element);
+ } else if(0 === attr.toString().indexOf("data-")) {
+ return $(element).data(attr.replace("data-", ""));
+ } else {
+ return $(element).attr(attr);
+ }
+ }
+
  _isImage(string) {
  return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)
  }
@@ -299,8 +312,9 @@ const Lightbox = (($) => {
  let $toUse = this._containerToUse()
  this._updateTitleAndFooter()
 
- let currentRemote = this._$element.attr('data-remote') || this._$element.attr('href')
- let currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false)
+ let currentRemote = this._getAttr(this._$element,this._config.dataSrc) || this._getAttr(this._$element,'href')
+
+ let currentType = this._detectRemoteType(currentRemote, this._getAttr(this._$element,'data-type') || false)
 
  if(['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0)
  return this._error(this._config.strings.type)
@@ -386,8 +400,8 @@ const Lightbox = (($) => {
  }
 
  _updateTitleAndFooter() {
- let title = this._$element.data('title') || ""
- let caption = this._$element.data('footer') || ""
+ let title = this._getAttr(this._$element,this._config.titleSrc) || ""
+ let caption = this._getAttr(this._$element,this._config.footerSrc) || ""
 
  this._titleIsShown = false
  if (title || this._config.alwaysShowClose) {
@@ -520,8 +534,8 @@ const Lightbox = (($) => {
  if(typeof next == 'undefined')
  return
 
- let src = next.attr('data-remote') || next.attr('href')
- if (next.attr('data-type') === 'image' || this._isImage(src))
+ let src = this._getAttr(next,this._config.dataSrc) || this._getAttr(next,'href')
+ if (this._getAttr(next,'data-type') === 'image' || this._isImage(src))
  this._preloadImage(src, false)
 
  if(numberOfTimes > 0)