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

Commit 5217502

Browse files
ashleydwashleydw
committed
Add alt-tag support
fixes #307
1 parent 3391104 commit 5217502

File tree

4 files changed

+50
-21
lines changed

4 files changed

+50
-21
lines changed

‎dist/ekko-lightbox.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ekko-lightbox.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ekko-lightbox.js

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,8 @@ const Lightbox = (($) => {
327327

328328
switch(currentType) {
329329
case 'image':
330-
this._preloadImage(currentRemote, $toUse)
330+
let altTag = this._$element.attr('data-alt') || '';
331+
this._preloadImage(currentRemote, altTag, $toUse)
331332
this._preloadImageByIndex(this._galleryIndex, 3)
332333
break;
333334
case 'youtube':
@@ -552,43 +553,49 @@ const Lightbox = (($) => {
552553

553554
let src = next.attr('data-remote') || next.attr('href')
554555
if (next.attr('data-type') === 'image' || this._isImage(src))
555-
this._preloadImage(src, false)
556+
this._preloadImage(src, '', false)
556557

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

561-
_preloadImage( src, $containerForImage) {
562+
_preloadImage(src, altTag, $containerForImage) {
562563

563564
$containerForImage = $containerForImage || false
564565

565566
let img = new Image();
567+
let loadingTimeout = null;
566568
if ($containerForImage) {
567-
568569
// if loading takes > 200ms show a loader
569-
let loadingTimeout = setTimeout(() => {
570+
loadingTimeout = setTimeout(() => {
570571
$containerForImage.append(this._config.loadingMessage)
571-
}, 200)
572+
}, 200);
573+
}
572574

573-
img.onload = () => {
574-
if(loadingTimeout)
575-
clearTimeout(loadingTimeout)
576-
loadingTimeout = null;
577-
let image = $('<img />');
578-
image.attr('src', img.src);
579-
image.addClass('img-fluid');
575+
img.onload = () => {
576+
if(loadingTimeout)
577+
clearTimeout(loadingTimeout)
578+
loadingTimeout = null;
579+
let image = $('<img />');
580+
image.attr('src', img.src);
581+
image.attr('alt', altTag);
582+
image.addClass('img-fluid');
580583

581-
// backward compatibility for bootstrap v3
582-
image.css('width', '100%');
584+
// backward compatibility for bootstrap v3
585+
image.css('width', '100%');
583586

587+
if ($containerForImage) {
584588
$containerForImage.html(image);
585589
if (this._$modalArrows)
586590
this._$modalArrows.css('display', '') // remove display to default to css property
587591

588592
this._resize(img.width, img.height);
589593
this._toggleLoading(false);
590594
return this._config.onContentLoaded.call(this);
591-
};
595+
}
596+
};
597+
598+
if ($containerForImage) {
592599
img.onerror = () => {
593600
this._toggleLoading(false);
594601
return this._error(this._config.strings.fail+` ${src}`);

‎index.html

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,7 @@ <h2>Examples</h2>
336336
<li><a href="#no-wrapping">Disable wrapping</a></li>
337337
<li><a href="#disable-fade">Disable fade</a></li>
338338
<li><a href="#center-vertically">Center vertically</a></li>
339+
<li><a href="#alt-attr">"alt" attribute</a></li>
339340
</ul>
340341

341342
<h3 id="single-image">Single Image</h3>
@@ -356,13 +357,13 @@ <h3 id="image-gallery">Image Gallery</h3>
356357
<div class="col-md-8">
357358
<div class="row">
358359
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
359-
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
360+
<img src="https://unsplash.it/600.jpg?image=251" alt="Image 1" class="img-fluid">
360361
</a>
361362
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
362-
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
363+
<img src="https://unsplash.it/600.jpg?image=252" alt="Image 3" class="img-fluid">
363364
</a>
364365
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
365-
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
366+
<img src="https://unsplash.it/600.jpg?image=253" alt="Image 3" class="img-fluid">
366367
</a>
367368
</div>
368369
<div class="row">
@@ -610,6 +611,27 @@ <h3 id="center-vertically">Center vertically</h3>
610611
</div>
611612
<code class="html" data-code>$(this).ekkoLightbox({ verticalAlignCenter: true });</code>
612613

614+
<h3 id="alt-attr">Image "alt" attribute</h3>
615+
<p>Add <code>data-alt</code> to provide the enlarged image an alt tag.</p>
616+
<div data-code="example-2">
617+
<div class="row justify-content-center">
618+
<div class="col-md-8">
619+
<div class="row">
620+
<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">
621+
<img src="https://unsplash.it/600.jpg?image=251" alt="Image 1 Thumbnail" class="img-fluid">
622+
</a>
623+
<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">
624+
<img src="https://unsplash.it/600.jpg?image=252" alt="Image 2 Thumbnail" class="img-fluid">
625+
</a>
626+
<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">
627+
<img src="https://unsplash.it/600.jpg?image=253" alt="Image 3 Thumbnail" class="img-fluid">
628+
</a>
629+
</div>
630+
</div>
631+
</div>
632+
</div>
633+
<code class="html" data-code="example-14"></code>
634+
613635
<p class="footer"><span>Built by me, <a href="https://ashleyd.ws">ashleydw</a></span></p>
614636
</div>
615637
</div>

0 commit comments

Comments
 (0)