Skip to content

Commit

Permalink
data-src alias for data-remote
Browse files Browse the repository at this point in the history 
Bootstrap 3 uses data-remote for modals.
https://getbootstrap.com/docs/3.4/javascript/#modals-options

This closes ashleydw#309
  • Loading branch information
@mlt
mlt committed May 1, 2020
1 parent 32485eb commit ecf52d8
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 16 deletions.
9 changes: 7 additions & 2 deletions dist/ekko-lightbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
10 changes: 7 additions & 3 deletions ekko-lightbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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){
Expand Down Expand Up @@ -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)

Expand Down
27 changes: 16 additions & 11 deletions examples/bs3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,11 @@ <h2>Options</h2>
<td>If you can't/don't want to set the href property of an element</td>
<td><code>data-remote="http://www...."</code></td>
</tr>
<tr>
<td>src</td>
<td>Alias for <code>remote</code> for those using Bootstrap 3. See <a href="https://github.com/ashleydw/lightbox/issues/309">GitHub issue</a></td>
<td><code>data-src="http://www...."</code></td>
</tr>
<tr>
<td>gallery</td>
<td>For grouping elements</td>
Expand Down Expand Up @@ -300,7 +305,7 @@ <h2>Examples</h2>
<li><a href="#videos-gallery">Gallery of Videos</a></li>
<li><a href="#mixed-gallery">Mixed gallery</a></li>
<li><a href="#programatically-call">Programmatically call</a></li>
<li><a href="#data-remote">Via <code>data-remote</code></a></li>
<li><a href="#data-remote">Via <code>data-remote</code> (or <code>data-src</code>)</a></li>
<li><a href="#force-type">Force type</a></li>
<li><a href="#hidden-elements">Hidden elements</a></li>
<li><a href="#remote-content">Remote content</a></li>
Expand Down Expand Up @@ -362,7 +367,7 @@ <h4>Vimeo</h4>
<p>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.</p>
<div data-code="example-3-b">
<p><a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich (using embed link)</a></p>
<p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with reccommended <code>data-remote</code> setting)</p>
<p><a href="http://vimeo.com/80629469" data-src="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with recommended <code>data-src</code> setting)</p>
</div>
<code data-code="example-3-b" data-trim="all"></code>
<h4>Instagram</h4>
Expand Down Expand Up @@ -411,7 +416,7 @@ <h3 id="mixed-gallery">Mixed gallery</h3>
<a href="https://unsplash.it/1200/768.jpg?image=257" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=257" class="img-fluid">
</a>
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<a href="http://vimeo.com/80629469" data-src="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-fluid">
</a>
</div>
Expand Down Expand Up @@ -444,12 +449,12 @@ <h3 id="programatically-call">Programmatically call</h3>
});</code>

<h3 id="data-remote">Via <code>data-remote</code></h3>
<p>Neither of these are <code>&lt;a /&gt;</code> tags, so both rely on the <code>data-remote</code> attribute.</p>
<p>Neither of these are <code>&lt;a /&gt;</code> tags, so both rely on the <code>data-remote</code> attribute. Note Bootstrap 3 uses <code>data-remote</code> for modals. Use <code>data-src</code> instead.</p>
<div class="row">
<div class="offset-md-1 col-md-10">
<div class="row" data-code="example-7">
<img src="https://unsplash.it/600.jpg?image=259" data-toggle="lightbox" data-remote="https://unsplash.it/1200/768.jpg?image=259" class="img-fluid col-sm-4">
<img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" data-toggle="lightbox" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" class="img-fluid col-sm-4">
<img src="https://unsplash.it/600.jpg?image=259" data-toggle="lightbox" data-src="https://unsplash.it/1200/768.jpg?image=259" class="img-fluid col-sm-4">
<img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" data-toggle="lightbox" data-src="//www.youtube.com/embed/b0jqPvpn3sY" class="img-fluid col-sm-4">
</div>
</div>
</div>
Expand Down Expand Up @@ -480,11 +485,11 @@ <h3 id="hidden-elements">Hidden elements</h3>
<img src="https://unsplash.it/600.jpg?image=265" class="img-fluid">
</a>
<!-- elements not showing, use data-remote -->
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=264" data-title="Hidden item 1"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=265" data-title="Hidden item 3"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=266" data-title="Hidden item 4"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=267" data-title="Hidden item 5"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=264" data-title="Hidden item 1"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=265" data-title="Hidden item 3"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=266" data-title="Hidden item 4"></div>
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=267" data-title="Hidden item 5"></div>
</div>
</div>
</div>
Expand Down

0 comments on commit ecf52d8

Please sign in to comment.