Skip to content
This repository was archived by the owner on May 22, 2020. It is now read-only.

Commit ecf52d8

Browse files
mltmlt
committed
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
1 parent 32485eb commit ecf52d8

File tree

3 files changed

+30
-16
lines changed

3 files changed

+30
-16
lines changed

‎dist/ekko-lightbox.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,11 @@ var Lightbox = (function ($) {
272272
var contentType = response.getResponseHeader('Content-Type');
273273
return contentType;
274274
}
275+
}, {
276+
key: '_getSource',
277+
value: function _getSource(element) {
278+
return element.attr('data-remote') || element.attr('href') || element.attr('data-src');
279+
}
275280
}, {
276281
key: '_isImage',
277282
value: function _isImage(string) {
@@ -312,7 +317,7 @@ var Lightbox = (function ($) {
312317
var $toUse = this._containerToUse();
313318
this._updateTitleAndFooter();
314319

315-
var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href');
320+
var currentRemote = this._getSource(this._$element);
316321
var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false);
317322

318323
if (['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
@@ -545,7 +550,7 @@ var Lightbox = (function ($) {
545550
var next = $(this._$galleryItems.get(startIndex), false);
546551
if (typeof next == 'undefined') return;
547552

548-
var src = next.attr('data-remote') || next.attr('href');
553+
var src = this._getSource(next);
549554
if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false);
550555

551556
if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);

‎ekko-lightbox.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,10 @@ const Lightbox = (($) => {
279279
return contentType;
280280
}
281281

282+
_getSource(element) {
283+
return element.attr('data-remote') || element.attr('href') || element.attr('data-src')
284+
}
285+
282286
_isImage(string) {
283287
return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)
284288
}
@@ -314,7 +318,7 @@ const Lightbox = (($) => {
314318
let $toUse = this._containerToUse()
315319
this._updateTitleAndFooter()
316320

317-
let currentRemote = this._$element.attr('data-remote') || this._$element.attr('href')
321+
let currentRemote = this._getSource(this._$element)
318322
let currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false)
319323

320324
if(['image', 'youtube', 'vimeo', 'instagram', 'media', 'url'].indexOf(currentType) < 0)
@@ -466,7 +470,7 @@ const Lightbox = (($) => {
466470
this._toggleLoading(false);
467471
return this;
468472
}
469-
473+
470474
_showHtml5Media(url, $containerForElement) { // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
471475
let contentType = this._getRemoteContentType(url);
472476
if(!contentType){
@@ -545,7 +549,7 @@ const Lightbox = (($) => {
545549
if(typeof next == 'undefined')
546550
return
547551

548-
let src = next.attr('data-remote') || next.attr('href')
552+
let src = this._getSource(next)
549553
if (next.attr('data-type') === 'image' || this._isImage(src))
550554
this._preloadImage(src, false)
551555

‎examples/bs3.html

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,11 @@ <h2>Options</h2>
247247
<td>If you can't/don't want to set the href property of an element</td>
248248
<td><code>data-remote="http://www...."</code></td>
249249
</tr>
250+
<tr>
251+
<td>src</td>
252+
<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>
253+
<td><code>data-src="http://www...."</code></td>
254+
</tr>
250255
<tr>
251256
<td>gallery</td>
252257
<td>For grouping elements</td>
@@ -300,7 +305,7 @@ <h2>Examples</h2>
300305
<li><a href="#videos-gallery">Gallery of Videos</a></li>
301306
<li><a href="#mixed-gallery">Mixed gallery</a></li>
302307
<li><a href="#programatically-call">Programmatically call</a></li>
303-
<li><a href="#data-remote">Via <code>data-remote</code></a></li>
308+
<li><a href="#data-remote">Via <code>data-remote</code> (or <code>data-src</code>)</a></li>
304309
<li><a href="#force-type">Force type</a></li>
305310
<li><a href="#hidden-elements">Hidden elements</a></li>
306311
<li><a href="#remote-content">Remote content</a></li>
@@ -362,7 +367,7 @@ <h4>Vimeo</h4>
362367
<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>
363368
<div data-code="example-3-b">
364369
<p><a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich (using embed link)</a></p>
365-
<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>
370+
<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>
366371
</div>
367372
<code data-code="example-3-b" data-trim="all"></code>
368373
<h4>Instagram</h4>
@@ -411,7 +416,7 @@ <h3 id="mixed-gallery">Mixed gallery</h3>
411416
<a href="https://unsplash.it/1200/768.jpg?image=257" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
412417
<img src="https://unsplash.it/600.jpg?image=257" class="img-fluid">
413418
</a>
414-
<a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
419+
<a href="http://vimeo.com/80629469" data-src="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
415420
<img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-fluid">
416421
</a>
417422
</div>
@@ -444,12 +449,12 @@ <h3 id="programatically-call">Programmatically call</h3>
444449
});</code>
445450

446451
<h3 id="data-remote">Via <code>data-remote</code></h3>
447-
<p>Neither of these are <code>&lt;a /&gt;</code> tags, so both rely on the <code>data-remote</code> attribute.</p>
452+
<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>
448453
<div class="row">
449454
<div class="offset-md-1 col-md-10">
450455
<div class="row" data-code="example-7">
451-
<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">
452-
<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">
456+
<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">
457+
<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">
453458
</div>
454459
</div>
455460
</div>
@@ -480,11 +485,11 @@ <h3 id="hidden-elements">Hidden elements</h3>
480485
<img src="https://unsplash.it/600.jpg?image=265" class="img-fluid">
481486
</a>
482487
<!-- elements not showing, use data-remote -->
483-
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=264" data-title="Hidden item 1"></div>
484-
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>
485-
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=265" data-title="Hidden item 3"></div>
486-
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=266" data-title="Hidden item 4"></div>
487-
<div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=267" data-title="Hidden item 5"></div>
488+
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=264" data-title="Hidden item 1"></div>
489+
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>
490+
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=265" data-title="Hidden item 3"></div>
491+
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=266" data-title="Hidden item 4"></div>
492+
<div data-toggle="lightbox" data-gallery="hidden-images" data-src="https://unsplash.it/1200/768.jpg?image=267" data-title="Hidden item 5"></div>
488493
</div>
489494
</div>
490495
</div>

0 commit comments

Comments
 (0)