From ecf52d826f6f83adea54bea68dd262fd2d1bb6ff Mon Sep 17 00:00:00 2001 From: Mikhail Titov Date: Fri, 1 May 2020 15:54:03 -0500 Subject: [PATCH] data-src alias for data-remote Bootstrap 3 uses data-remote for modals. https://getbootstrap.com/docs/3.4/javascript/#modals-options This closes #309 --- dist/ekko-lightbox.js | 9 +++++++-- ekko-lightbox.js | 10 +++++++--- examples/bs3.html | 27 ++++++++++++++++----------- 3 files changed, 30 insertions(+), 16 deletions(-) diff --git a/dist/ekko-lightbox.js b/dist/ekko-lightbox.js index b7be6e1..091a4f5 100644 --- a/dist/ekko-lightbox.js +++ b/dist/ekko-lightbox.js @@ -272,6 +272,11 @@ var Lightbox = (function ($) { var contentType = response.getResponseHeader('Content-Type'); return contentType; } + }, { + key: '_getSource', + value: function _getSource(element) { + return element.attr('data-remote') || element.attr('href') || element.attr('data-src'); + } }, { key: '_isImage', value: function _isImage(string) { @@ -312,7 +317,7 @@ var Lightbox = (function ($) { var $toUse = this._containerToUse(); this._updateTitleAndFooter(); - var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href'); + var currentRemote = this._getSource(this._$element); 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); @@ -545,7 +550,7 @@ var Lightbox = (function ($) { var next = $(this._$galleryItems.get(startIndex), false); if (typeof next == 'undefined') return; - var src = next.attr('data-remote') || next.attr('href'); + var src = this._getSource(next); if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false); if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1); diff --git a/ekko-lightbox.js b/ekko-lightbox.js index fa759b3..302e8e4 100644 --- a/ekko-lightbox.js +++ b/ekko-lightbox.js @@ -279,6 +279,10 @@ const Lightbox = (($) => { return contentType; } + _getSource(element) { + return element.attr('data-remote') || element.attr('href') || element.attr('data-src') + } + _isImage(string) { return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i) } @@ -314,7 +318,7 @@ const Lightbox = (($) => { let $toUse = this._containerToUse() this._updateTitleAndFooter() - let currentRemote = this._$element.attr('data-remote') || this._$element.attr('href') + let currentRemote = this._getSource(this._$element) let currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false) if(['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0) @@ -466,7 +470,7 @@ const Lightbox = (($) => { this._toggleLoading(false); return this; } - + _showHtml5Media(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url) let contentType = this._getRemoteContentType(url); if(!contentType){ @@ -545,7 +549,7 @@ const Lightbox = (($) => { if(typeof next == 'undefined') return - let src = next.attr('data-remote') || next.attr('href') + let src = this._getSource(next) if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false) diff --git a/examples/bs3.html b/examples/bs3.html index 70489ce..506fa07 100644 --- a/examples/bs3.html +++ b/examples/bs3.html @@ -247,6 +247,11 @@

Options

If you can't/don't want to set the href property of an element data-remote="http://www...." + + src + Alias for remote for those using Bootstrap 3. See GitHub issue + data-src="http://www...." + gallery For grouping elements @@ -300,7 +305,7 @@

Examples

  • Gallery of Videos
  • Mixed gallery
  • Programmatically call
    • -
  • Via data-remote
    • +
  • Via data-remote (or data-src)
  • Force type
  • Hidden elements
  • Remote content
    • @@ -362,7 +367,7 @@

    Vimeo

    You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.

    City Lights - from Colin Rich (using embed link)

    -

    City Lights - from Colin Rich (with reccommended data-remote setting)

    +

    City Lights - from Colin Rich (with recommended data-src setting)

    Instagram

    @@ -411,7 +416,7 @@ - + @@ -444,12 +449,12 @@

    Programmatically call

    });

    Via data-remote

    -

    Neither of these are <a /> tags, so both rely on the data-remote attribute.

    +

    Neither of these are <a /> tags, so both rely on the data-remote attribute. Note Bootstrap 3 uses data-remote for modals. Use data-src instead.

    - - + +
    @@ -480,11 +485,11 @@

    Hidden elements

    -
    -
    -
    -
    -
    +
    +
    +
    +
    +