Added new configuration options that allow specifying which attributes 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.

Author: Chase Peeler

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');
+
+				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);

dist/ekko-lightbox.js.map

@@ -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)