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

Commit

Permalink
Add alt-tag support
Browse files Browse the repository at this point in the history 
fixes #307
  • Loading branch information
@ashleydw
ashleydw committed Aug 8, 2018
1 parent 3391104 commit 5217502
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 21 deletions.
2 changes: 1 addition & 1 deletion dist/ekko-lightbox.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/ekko-lightbox.js.map
View file

Large diffs are not rendered by default.

39 changes: 23 additions & 16 deletions ekko-lightbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,8 @@ const Lightbox = (($) => {

switch(currentType) {
case 'image':
this._preloadImage(currentRemote, $toUse)
let altTag = this._$element.attr('data-alt') || '';
this._preloadImage(currentRemote, altTag, $toUse)
this._preloadImageByIndex(this._galleryIndex, 3)
break;
case 'youtube':
Expand Down Expand Up @@ -552,43 +553,49 @@ const Lightbox = (($) => {

let src = next.attr('data-remote') || next.attr('href')
if (next.attr('data-type') === 'image' || this._isImage(src))
this._preloadImage(src, false)
this._preloadImage(src, '', false)

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

_preloadImage( src, $containerForImage) {
_preloadImage(src, altTag, $containerForImage) {

$containerForImage = $containerForImage || false

let img = new Image();
let loadingTimeout = null;
if ($containerForImage) {

// if loading takes > 200ms show a loader
let loadingTimeout = setTimeout(() => {
loadingTimeout = setTimeout(() => {
$containerForImage.append(this._config.loadingMessage)
}, 200)
}, 200);
}

img.onload = () => {
if(loadingTimeout)
clearTimeout(loadingTimeout)
loadingTimeout = null;
let image = $('<img />');
image.attr('src', img.src);
image.addClass('img-fluid');
img.onload = () => {
if(loadingTimeout)
clearTimeout(loadingTimeout)
loadingTimeout = null;
let image = $('<img />');
image.attr('src', img.src);
image.attr('alt', altTag);
image.addClass('img-fluid');

// backward compatibility for bootstrap v3
image.css('width', '100%');
// backward compatibility for bootstrap v3
image.css('width', '100%');

if ($containerForImage) {
$containerForImage.html(image);
if (this._$modalArrows)
this._$modalArrows.css('display', '') // remove display to default to css property

this._resize(img.width, img.height);
this._toggleLoading(false);
return this._config.onContentLoaded.call(this);
};
}
};

if ($containerForImage) {
img.onerror = () => {
this._toggleLoading(false);
return this._error(this._config.strings.fail+` ${src}`);
Expand Down
28 changes: 25 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,7 @@ <h2>Examples</h2>
<li><a href="#no-wrapping">Disable wrapping</a></li>
<li><a href="#disable-fade">Disable fade</a></li>
<li><a href="#center-vertically">Center vertically</a></li>
<li><a href="#alt-attr">"alt" attribute</a></li>
</ul>

<h3 id="single-image">Single Image</h3>
Expand All @@ -356,13 +357,13 @@ <h3 id="image-gallery">Image Gallery</h3>
<div class="col-md-8">
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
<img src="https://unsplash.it/600.jpg?image=251" alt="Image 1" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
<img src="https://unsplash.it/600.jpg?image=252" alt="Image 3" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
<img src="https://unsplash.it/600.jpg?image=253" alt="Image 3" class="img-fluid">
</a>
</div>
<div class="row">
Expand Down Expand Up @@ -610,6 +611,27 @@ <h3 id="center-vertically">Center vertically</h3>
</div>
<code class="html" data-code>$(this).ekkoLightbox({ verticalAlignCenter: true });</code>

<h3 id="alt-attr">Image "alt" attribute</h3>
<p>Add <code>data-alt</code> to provide the enlarged image an alt tag.</p>
<div data-code="example-2">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-alt="Image 1 Large Alt" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=251" alt="Image 1 Thumbnail" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-alt="Image 2 Large Alt" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=252" alt="Image 2 Thumbnail" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-alt="Image 3 Large Alt" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=253" alt="Image 3 Thumbnail" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
<code class="html" data-code="example-14"></code>

<p class="footer"><span>Built by me, <a href="https://ashleyd.ws">ashleydw</a></span></p>
</div>
</div>
Expand Down

0 comments on commit 5217502

Please sign in to comment.