lightgallery 2.3.0-beta.1 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/lightgallery-bundle.css +19 -26
- package/css/lightgallery-bundle.min.css +1 -1
- package/css/lightgallery-core.css +0 -19
- package/css/lightgallery.css +19 -26
- package/lg-events.d.ts +0 -4
- package/lg-settings.d.ts +17 -8
- package/lg-utils.d.ts +25 -4
- package/lib/lg-settings.js +4 -2
- package/lib/lg-settings.js.map +1 -1
- package/lib/lg-utils.js +45 -5
- package/lib/lg-utils.js.map +1 -1
- package/lib/lgQuery.js +31 -20
- package/lib/lgQuery.js.map +1 -1
- package/lib/lightgallery.js +113 -119
- package/lib/lightgallery.js.map +1 -1
- package/lib/plugins/video/lg-video-settings.js.map +1 -1
- package/lib/plugins/video/lg-video-utils.js +24 -0
- package/lib/plugins/video/lg-video-utils.js.map +1 -0
- package/lib/plugins/video/lg-video.js +37 -31
- package/lib/plugins/video/lg-video.js.map +1 -1
- package/lib/plugins/zoom/lg-zoom.js +7 -8
- package/lib/plugins/zoom/lg-zoom.js.map +1 -1
- package/lightgallery.d.ts +18 -10
- package/lightgallery.es5.js +194 -147
- package/lightgallery.es5.js.map +1 -1
- package/lightgallery.min.js +2 -2
- package/lightgallery.umd.js +194 -147
- package/lightgallery.umd.js.map +1 -1
- package/lit/lightgallery.esm.js +7 -7
- package/lit/lightgallery.umd.js +3 -3
- package/package.json +1 -1
- package/plugins/autoplay/lg-autoplay.es5.js +1 -1
- package/plugins/autoplay/lg-autoplay.es5.js.map +1 -1
- package/plugins/autoplay/lg-autoplay.min.js +1 -1
- package/plugins/autoplay/lg-autoplay.umd.js +1 -1
- package/plugins/autoplay/lg-autoplay.umd.js.map +1 -1
- package/plugins/comment/lg-comment.es5.js +1 -1
- package/plugins/comment/lg-comment.es5.js.map +1 -1
- package/plugins/comment/lg-comment.min.js +1 -1
- package/plugins/comment/lg-comment.umd.js +1 -1
- package/plugins/comment/lg-comment.umd.js.map +1 -1
- package/plugins/fullscreen/lg-fullscreen.es5.js +1 -1
- package/plugins/fullscreen/lg-fullscreen.min.js +1 -1
- package/plugins/fullscreen/lg-fullscreen.umd.js +1 -1
- package/plugins/hash/lg-hash.es5.js +1 -1
- package/plugins/hash/lg-hash.es5.js.map +1 -1
- package/plugins/hash/lg-hash.min.js +1 -1
- package/plugins/hash/lg-hash.umd.js +1 -1
- package/plugins/hash/lg-hash.umd.js.map +1 -1
- package/plugins/mediumZoom/lg-medium-zoom.es5.js +1 -1
- package/plugins/mediumZoom/lg-medium-zoom.es5.js.map +1 -1
- package/plugins/mediumZoom/lg-medium-zoom.min.js +1 -1
- package/plugins/mediumZoom/lg-medium-zoom.umd.js +1 -1
- package/plugins/mediumZoom/lg-medium-zoom.umd.js.map +1 -1
- package/plugins/pager/lg-pager.es5.js +1 -1
- package/plugins/pager/lg-pager.es5.js.map +1 -1
- package/plugins/pager/lg-pager.min.js +1 -1
- package/plugins/pager/lg-pager.umd.js +1 -1
- package/plugins/pager/lg-pager.umd.js.map +1 -1
- package/plugins/relativeCaption/lg-relative-caption.es5.js +1 -1
- package/plugins/relativeCaption/lg-relative-caption.es5.js.map +1 -1
- package/plugins/relativeCaption/lg-relative-caption.min.js +1 -1
- package/plugins/relativeCaption/lg-relative-caption.umd.js +1 -1
- package/plugins/relativeCaption/lg-relative-caption.umd.js.map +1 -1
- package/plugins/rotate/lg-rotate.es5.js +1 -1
- package/plugins/rotate/lg-rotate.es5.js.map +1 -1
- package/plugins/rotate/lg-rotate.min.js +1 -1
- package/plugins/rotate/lg-rotate.umd.js +1 -1
- package/plugins/rotate/lg-rotate.umd.js.map +1 -1
- package/plugins/share/lg-share.es5.js +1 -1
- package/plugins/share/lg-share.es5.js.map +1 -1
- package/plugins/share/lg-share.min.js +1 -1
- package/plugins/share/lg-share.umd.js +1 -1
- package/plugins/share/lg-share.umd.js.map +1 -1
- package/plugins/thumbnail/lg-thumbnail.es5.js +1 -1
- package/plugins/thumbnail/lg-thumbnail.es5.js.map +1 -1
- package/plugins/thumbnail/lg-thumbnail.min.js +1 -1
- package/plugins/thumbnail/lg-thumbnail.umd.js +1 -1
- package/plugins/thumbnail/lg-thumbnail.umd.js.map +1 -1
- package/plugins/video/lg-video-settings.d.ts +2 -1
- package/plugins/video/lg-video-utils.d.ts +6 -0
- package/plugins/video/lg-video.d.ts +6 -1
- package/plugins/video/lg-video.es5.js +56 -30
- package/plugins/video/lg-video.es5.js.map +1 -1
- package/plugins/video/lg-video.min.js +2 -2
- package/plugins/video/lg-video.umd.js +56 -30
- package/plugins/video/lg-video.umd.js.map +1 -1
- package/plugins/zoom/lg-zoom.es5.js +8 -9
- package/plugins/zoom/lg-zoom.es5.js.map +1 -1
- package/plugins/zoom/lg-zoom.min.js +2 -2
- package/plugins/zoom/lg-zoom.umd.js +8 -9
- package/plugins/zoom/lg-zoom.umd.js.map +1 -1
- package/react/Lightgallery.es5.js +194 -147
- package/react/Lightgallery.es5.js.map +1 -1
- package/react/Lightgallery.umd.js +194 -147
- package/react/Lightgallery.umd.js.map +1 -1
- package/scss/_lg-theme-default.scss +17 -10
- package/scss/lightgallery-core.scss +0 -24
- package/vue/LightGalleryVue.common.js +188 -150
- package/vue/LightGalleryVue.common.js.map +1 -1
- package/vue/LightGalleryVue.umd.js +188 -150
- package/vue/LightGalleryVue.umd.js.map +1 -1
- package/vue/LightGalleryVue.umd.min.js +2 -2
- package/vue/LightGalleryVue.umd.min.js.map +1 -1
package/lightgallery.es5.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* lightgallery | 2.3.0
|
|
2
|
+
* lightgallery | 2.3.0 | October 28th 2021
|
|
3
3
|
* http://www.lightgalleryjs.com/
|
|
4
4
|
* Copyright (c) 2020 Sachin Neravath;
|
|
5
5
|
* @license GPLv3
|
|
@@ -39,24 +39,30 @@ function __spreadArrays() {
|
|
|
39
39
|
return r;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
42
|
+
function initLgPolyfills() {
|
|
43
|
+
(function () {
|
|
44
|
+
if (typeof window.CustomEvent === 'function')
|
|
45
|
+
return false;
|
|
46
|
+
function CustomEvent(event, params) {
|
|
47
|
+
params = params || {
|
|
48
|
+
bubbles: false,
|
|
49
|
+
cancelable: false,
|
|
50
|
+
detail: null,
|
|
51
|
+
};
|
|
52
|
+
var evt = document.createEvent('CustomEvent');
|
|
53
|
+
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
|
|
54
|
+
return evt;
|
|
55
|
+
}
|
|
56
|
+
window.CustomEvent = CustomEvent;
|
|
57
|
+
})();
|
|
58
|
+
(function () {
|
|
59
|
+
if (!Element.prototype.matches) {
|
|
60
|
+
Element.prototype.matches =
|
|
61
|
+
Element.prototype.msMatchesSelector ||
|
|
62
|
+
Element.prototype.webkitMatchesSelector;
|
|
63
|
+
}
|
|
64
|
+
})();
|
|
65
|
+
}
|
|
60
66
|
var lgQuery = /** @class */ (function () {
|
|
61
67
|
function lgQuery(selector) {
|
|
62
68
|
this.cssVenderPrefixes = [
|
|
@@ -189,7 +195,9 @@ var lgQuery = /** @class */ (function () {
|
|
|
189
195
|
this._each(function (el) {
|
|
190
196
|
// IE doesn't support multiple arguments
|
|
191
197
|
classNames.split(' ').forEach(function (className) {
|
|
192
|
-
|
|
198
|
+
if (className) {
|
|
199
|
+
el.classList.add(className);
|
|
200
|
+
}
|
|
193
201
|
});
|
|
194
202
|
});
|
|
195
203
|
return this;
|
|
@@ -198,7 +206,9 @@ var lgQuery = /** @class */ (function () {
|
|
|
198
206
|
this._each(function (el) {
|
|
199
207
|
// IE doesn't support multiple arguments
|
|
200
208
|
classNames.split(' ').forEach(function (className) {
|
|
201
|
-
|
|
209
|
+
if (className) {
|
|
210
|
+
el.classList.remove(className);
|
|
211
|
+
}
|
|
202
212
|
});
|
|
203
213
|
});
|
|
204
214
|
return this;
|
|
@@ -398,6 +408,7 @@ var lgQuery = /** @class */ (function () {
|
|
|
398
408
|
return lgQuery;
|
|
399
409
|
}());
|
|
400
410
|
function $LG(selector) {
|
|
411
|
+
initLgPolyfills();
|
|
401
412
|
return new lgQuery(selector);
|
|
402
413
|
}
|
|
403
414
|
|
|
@@ -442,12 +453,11 @@ var utils = {
|
|
|
442
453
|
/**
|
|
443
454
|
* get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
|
|
444
455
|
*/
|
|
445
|
-
|
|
446
|
-
getSize: function (el, container, spacing, isDisabled, defaultLgSize) {
|
|
456
|
+
getSize: function (el, container, spacing, defaultLgSize) {
|
|
447
457
|
if (spacing === void 0) { spacing = 0; }
|
|
448
458
|
var LGel = $LG(el);
|
|
449
459
|
var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
|
|
450
|
-
if (!lgSize
|
|
460
|
+
if (!lgSize) {
|
|
451
461
|
return;
|
|
452
462
|
}
|
|
453
463
|
var isResponsiveSizes = lgSize.split(',');
|
|
@@ -522,9 +532,9 @@ var utils = {
|
|
|
522
532
|
', 1)';
|
|
523
533
|
return transform;
|
|
524
534
|
},
|
|
525
|
-
getIframeMarkup: function (iframeWidth, iframeHeight, src, iframeTitle) {
|
|
535
|
+
getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
|
|
526
536
|
var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
|
|
527
|
-
return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; height: " + iframeHeight + "\">\n <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\" allowfullscreen=\"true\"></iframe>\n </div>";
|
|
537
|
+
return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; max-width:" + iframeMaxWidth + "; height: " + iframeHeight + "; max-height:" + iframeMaxHeight + "\">\n <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\" allowfullscreen=\"true\"></iframe>\n </div>";
|
|
528
538
|
},
|
|
529
539
|
getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
|
|
530
540
|
var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
|
|
@@ -641,6 +651,47 @@ var utils = {
|
|
|
641
651
|
isMobile: function () {
|
|
642
652
|
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
|
643
653
|
},
|
|
654
|
+
/**
|
|
655
|
+
* @desc Check the given src is video
|
|
656
|
+
* @param {String} src
|
|
657
|
+
* @return {Object} video type
|
|
658
|
+
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
|
|
659
|
+
*
|
|
660
|
+
* @todo - this information can be moved to dynamicEl to avoid frequent calls
|
|
661
|
+
*/
|
|
662
|
+
isVideo: function (src, isHTML5VIdeo, index) {
|
|
663
|
+
if (!src) {
|
|
664
|
+
if (isHTML5VIdeo) {
|
|
665
|
+
return {
|
|
666
|
+
html5: true,
|
|
667
|
+
};
|
|
668
|
+
}
|
|
669
|
+
else {
|
|
670
|
+
console.error('lightGallery :- data-src is not provided on slide item ' +
|
|
671
|
+
(index + 1) +
|
|
672
|
+
'. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
|
|
673
|
+
return;
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
|
|
677
|
+
var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
|
|
678
|
+
var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
|
|
679
|
+
if (youtube) {
|
|
680
|
+
return {
|
|
681
|
+
youtube: youtube,
|
|
682
|
+
};
|
|
683
|
+
}
|
|
684
|
+
else if (vimeo) {
|
|
685
|
+
return {
|
|
686
|
+
vimeo: vimeo,
|
|
687
|
+
};
|
|
688
|
+
}
|
|
689
|
+
else if (wistia) {
|
|
690
|
+
return {
|
|
691
|
+
wistia: wistia,
|
|
692
|
+
};
|
|
693
|
+
}
|
|
694
|
+
},
|
|
644
695
|
};
|
|
645
696
|
|
|
646
697
|
var lightGalleryCoreSettings = {
|
|
@@ -653,7 +704,7 @@ var lightGalleryCoreSettings = {
|
|
|
653
704
|
addClass: '',
|
|
654
705
|
startClass: 'lg-start-zoom',
|
|
655
706
|
backdropDuration: 300,
|
|
656
|
-
container:
|
|
707
|
+
container: '',
|
|
657
708
|
startAnimationDuration: 400,
|
|
658
709
|
zoomFromOrigin: true,
|
|
659
710
|
hideBarsDelay: 0,
|
|
@@ -662,6 +713,7 @@ var lightGalleryCoreSettings = {
|
|
|
662
713
|
supportLegacyBrowser: true,
|
|
663
714
|
allowMediaOverlap: false,
|
|
664
715
|
videoMaxSize: '1280-720',
|
|
716
|
+
loadYouTubePoster: true,
|
|
665
717
|
defaultCaptionHeight: 0,
|
|
666
718
|
ariaLabelledby: '',
|
|
667
719
|
ariaDescribedby: '',
|
|
@@ -682,7 +734,6 @@ var lightGalleryCoreSettings = {
|
|
|
682
734
|
subHtmlSelectorRelative: false,
|
|
683
735
|
preload: 2,
|
|
684
736
|
numberOfSlideItemsInDom: 10,
|
|
685
|
-
showAfterLoad: true,
|
|
686
737
|
selector: '',
|
|
687
738
|
selectWithin: '',
|
|
688
739
|
nextHtml: '',
|
|
@@ -690,6 +741,8 @@ var lightGalleryCoreSettings = {
|
|
|
690
741
|
index: 0,
|
|
691
742
|
iframeWidth: '100%',
|
|
692
743
|
iframeHeight: '100%',
|
|
744
|
+
iframeMaxWidth: '100%',
|
|
745
|
+
iframeMaxHeight: '100%',
|
|
693
746
|
download: true,
|
|
694
747
|
counter: true,
|
|
695
748
|
appendCounterTo: '.lg-toolbar',
|
|
@@ -956,9 +1009,6 @@ var LightGallery = /** @class */ (function () {
|
|
|
956
1009
|
if (this.settings.enableDrag) {
|
|
957
1010
|
outerClassNames += 'lg-grab ';
|
|
958
1011
|
}
|
|
959
|
-
if (this.settings.showAfterLoad) {
|
|
960
|
-
outerClassNames += 'lg-show-after-load';
|
|
961
|
-
}
|
|
962
1012
|
this.outer.addClass(outerClassNames);
|
|
963
1013
|
this.$inner.css('transition-timing-function', this.settings.easing);
|
|
964
1014
|
this.$inner.css('transition-duration', this.settings.speed + 'ms');
|
|
@@ -977,10 +1027,10 @@ var LightGallery = /** @class */ (function () {
|
|
|
977
1027
|
LightGallery.prototype.refreshOnResize = function () {
|
|
978
1028
|
if (this.lgOpened) {
|
|
979
1029
|
var currentGalleryItem = this.galleryItems[this.index];
|
|
980
|
-
var __slideVideoInfo = currentGalleryItem.__slideVideoInfo
|
|
1030
|
+
var __slideVideoInfo = currentGalleryItem.__slideVideoInfo;
|
|
981
1031
|
this.mediaContainerPosition = this.getMediaContainerPosition();
|
|
982
1032
|
var _a = this.mediaContainerPosition, top_1 = _a.top, bottom = _a.bottom;
|
|
983
|
-
this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo &&
|
|
1033
|
+
this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo && this.settings.videoMaxSize);
|
|
984
1034
|
if (__slideVideoInfo) {
|
|
985
1035
|
this.resizeVideoSlide(this.index, this.currentImageSize);
|
|
986
1036
|
}
|
|
@@ -1159,9 +1209,9 @@ var LightGallery = /** @class */ (function () {
|
|
|
1159
1209
|
if (!this.settings.allowMediaOverlap) {
|
|
1160
1210
|
this.setMediaContainerPosition(top, bottom);
|
|
1161
1211
|
}
|
|
1162
|
-
var
|
|
1212
|
+
var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
|
|
1163
1213
|
if (this.zoomFromOrigin && element) {
|
|
1164
|
-
this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo &&
|
|
1214
|
+
this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);
|
|
1165
1215
|
transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize);
|
|
1166
1216
|
}
|
|
1167
1217
|
if (!this.zoomFromOrigin || !transform) {
|
|
@@ -1415,7 +1465,7 @@ var LightGallery = /** @class */ (function () {
|
|
|
1415
1465
|
// displayed on top of actual image
|
|
1416
1466
|
var imgContent = '';
|
|
1417
1467
|
var altAttr = alt ? 'alt="' + alt + '"' : '';
|
|
1418
|
-
if (
|
|
1468
|
+
if (this.isFirstSlideWithZoomAnimation()) {
|
|
1419
1469
|
imgContent = this.getDummyImageContent($currentSlide, index, altAttr);
|
|
1420
1470
|
}
|
|
1421
1471
|
else {
|
|
@@ -1424,88 +1474,73 @@ var LightGallery = /** @class */ (function () {
|
|
|
1424
1474
|
var imgMarkup = "<picture class=\"lg-img-wrap\"> " + imgContent + "</picture>";
|
|
1425
1475
|
$currentSlide.prepend(imgMarkup);
|
|
1426
1476
|
};
|
|
1427
|
-
LightGallery.prototype.
|
|
1428
|
-
var
|
|
1429
|
-
if (
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1477
|
+
LightGallery.prototype.onSlideObjectLoad = function ($slide, isHTML5VideoWithoutPoster, onLoad, onError) {
|
|
1478
|
+
var mediaObject = $slide.find('.lg-object').first();
|
|
1479
|
+
if (utils.isImageLoaded(mediaObject.get()) ||
|
|
1480
|
+
isHTML5VideoWithoutPoster) {
|
|
1481
|
+
onLoad();
|
|
1482
|
+
}
|
|
1483
|
+
else {
|
|
1484
|
+
mediaObject.on('load.lg error.lg', function () {
|
|
1485
|
+
onLoad && onLoad();
|
|
1486
|
+
});
|
|
1487
|
+
mediaObject.on('error.lg', function () {
|
|
1488
|
+
onError && onError();
|
|
1434
1489
|
});
|
|
1435
1490
|
}
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1491
|
+
};
|
|
1492
|
+
/**
|
|
1493
|
+
*
|
|
1494
|
+
* @param $el Current slide item
|
|
1495
|
+
* @param index
|
|
1496
|
+
* @param delay Delay is 0 except first time
|
|
1497
|
+
* @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin
|
|
1498
|
+
* @param isFirstSlide
|
|
1499
|
+
*/
|
|
1500
|
+
LightGallery.prototype.onLgObjectLoad = function (currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) {
|
|
1501
|
+
var _this = this;
|
|
1502
|
+
this.onSlideObjectLoad(currentSlide, isHTML5VideoWithoutPoster, function () {
|
|
1503
|
+
_this.triggerSlideItemLoad(currentSlide, index, delay, speed, isFirstSlide);
|
|
1504
|
+
}, function () {
|
|
1505
|
+
currentSlide.addClass('lg-complete lg-complete_');
|
|
1506
|
+
currentSlide.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
|
|
1440
1507
|
});
|
|
1441
|
-
setTimeout(function () {
|
|
1442
|
-
$el.find('.lg-object')
|
|
1443
|
-
.first()
|
|
1444
|
-
.on('error.lg', function () {
|
|
1445
|
-
$el.addClass('lg-complete lg-complete_');
|
|
1446
|
-
$el.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
|
|
1447
|
-
});
|
|
1448
|
-
}, speed);
|
|
1449
1508
|
};
|
|
1450
|
-
LightGallery.prototype.
|
|
1509
|
+
LightGallery.prototype.triggerSlideItemLoad = function ($currentSlide, index, delay, speed, isFirstSlide) {
|
|
1451
1510
|
var _this = this;
|
|
1511
|
+
var currentGalleryItem = this.galleryItems[index];
|
|
1512
|
+
// Adding delay for video slides without poster for better performance and user experience
|
|
1513
|
+
// Videos should start playing once once the gallery is completely loaded
|
|
1514
|
+
var _speed = isFirstSlide &&
|
|
1515
|
+
this.getSlideType(currentGalleryItem) === 'video' &&
|
|
1516
|
+
!currentGalleryItem.poster
|
|
1517
|
+
? speed
|
|
1518
|
+
: 0;
|
|
1452
1519
|
setTimeout(function () {
|
|
1453
|
-
$
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
}
|
|
1461
|
-
}, speed);
|
|
1520
|
+
$currentSlide.addClass('lg-complete lg-complete_');
|
|
1521
|
+
_this.LGel.trigger(lGEvents.slideItemLoad, {
|
|
1522
|
+
index: index,
|
|
1523
|
+
delay: delay || 0,
|
|
1524
|
+
isFirstSlide: isFirstSlide,
|
|
1525
|
+
});
|
|
1526
|
+
}, _speed);
|
|
1462
1527
|
};
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
|
|
1468
|
-
*
|
|
1469
|
-
* @todo - this information can be moved to dynamicEl to avoid frequent calls
|
|
1470
|
-
*/
|
|
1471
|
-
LightGallery.prototype.isVideo = function (src, index) {
|
|
1472
|
-
if (!src) {
|
|
1473
|
-
if (this.galleryItems[index].video) {
|
|
1474
|
-
return {
|
|
1475
|
-
html5: true,
|
|
1476
|
-
};
|
|
1477
|
-
}
|
|
1478
|
-
else {
|
|
1479
|
-
console.error('lightGallery :- data-src is not provided on slide item ' +
|
|
1480
|
-
(index + 1) +
|
|
1481
|
-
'. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
|
|
1482
|
-
return;
|
|
1483
|
-
}
|
|
1484
|
-
}
|
|
1485
|
-
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
|
|
1486
|
-
var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)/i);
|
|
1487
|
-
var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
|
|
1488
|
-
if (youtube) {
|
|
1489
|
-
return {
|
|
1490
|
-
youtube: youtube,
|
|
1491
|
-
};
|
|
1492
|
-
}
|
|
1493
|
-
else if (vimeo) {
|
|
1494
|
-
return {
|
|
1495
|
-
vimeo: vimeo,
|
|
1496
|
-
};
|
|
1497
|
-
}
|
|
1498
|
-
else if (wistia) {
|
|
1499
|
-
return {
|
|
1500
|
-
wistia: wistia,
|
|
1501
|
-
};
|
|
1502
|
-
}
|
|
1528
|
+
LightGallery.prototype.isFirstSlideWithZoomAnimation = function () {
|
|
1529
|
+
return !!(!this.lGalleryOn &&
|
|
1530
|
+
this.zoomFromOrigin &&
|
|
1531
|
+
this.currentImageSize);
|
|
1503
1532
|
};
|
|
1504
1533
|
// Add video slideInfo
|
|
1505
1534
|
LightGallery.prototype.addSlideVideoInfo = function (items) {
|
|
1506
1535
|
var _this = this;
|
|
1507
1536
|
items.forEach(function (element, index) {
|
|
1508
|
-
element.__slideVideoInfo =
|
|
1537
|
+
element.__slideVideoInfo = utils.isVideo(element.src, !!element.video, index);
|
|
1538
|
+
if (element.__slideVideoInfo &&
|
|
1539
|
+
_this.settings.loadYouTubePoster &&
|
|
1540
|
+
!element.poster &&
|
|
1541
|
+
element.__slideVideoInfo.youtube) {
|
|
1542
|
+
element.poster = "//img.youtube.com/vi/" + element.__slideVideoInfo.youtube[1] + "/maxresdefault.jpg";
|
|
1543
|
+
}
|
|
1509
1544
|
});
|
|
1510
1545
|
};
|
|
1511
1546
|
/**
|
|
@@ -1543,11 +1578,11 @@ var LightGallery = /** @class */ (function () {
|
|
|
1543
1578
|
if (!$currentSlide.hasClass('lg-loaded')) {
|
|
1544
1579
|
if (videoInfo) {
|
|
1545
1580
|
var _a = this.mediaContainerPosition, top_2 = _a.top, bottom = _a.bottom;
|
|
1546
|
-
var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom,
|
|
1581
|
+
var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom, videoInfo && this.settings.videoMaxSize);
|
|
1547
1582
|
lgVideoStyle = this.getVideoContStyle(videoSize);
|
|
1548
1583
|
}
|
|
1549
1584
|
if (iframe) {
|
|
1550
|
-
var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, src, currentGalleryItem.iframeTitle);
|
|
1585
|
+
var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle);
|
|
1551
1586
|
$currentSlide.prepend(markup);
|
|
1552
1587
|
}
|
|
1553
1588
|
else if (poster) {
|
|
@@ -1578,7 +1613,6 @@ var LightGallery = /** @class */ (function () {
|
|
|
1578
1613
|
src: src,
|
|
1579
1614
|
html5Video: _html5Video,
|
|
1580
1615
|
hasPoster: !!poster,
|
|
1581
|
-
isFirstSlide: isFirstSlide,
|
|
1582
1616
|
});
|
|
1583
1617
|
}
|
|
1584
1618
|
this.LGel.trigger(lGEvents.afterAppendSlide, { index: index });
|
|
@@ -1594,8 +1628,8 @@ var LightGallery = /** @class */ (function () {
|
|
|
1594
1628
|
if (delay && !$LG(document.body).hasClass('lg-from-hash')) {
|
|
1595
1629
|
_speed = delay;
|
|
1596
1630
|
}
|
|
1597
|
-
// Only for first slide
|
|
1598
|
-
if (
|
|
1631
|
+
// Only for first slide and zoomFromOrigin is enabled
|
|
1632
|
+
if (this.isFirstSlideWithZoomAnimation()) {
|
|
1599
1633
|
setTimeout(function () {
|
|
1600
1634
|
$currentSlide
|
|
1601
1635
|
.removeClass('lg-start-end-progress lg-start-progress')
|
|
@@ -1603,23 +1637,24 @@ var LightGallery = /** @class */ (function () {
|
|
|
1603
1637
|
}, this.settings.startAnimationDuration + 100);
|
|
1604
1638
|
if (!$currentSlide.hasClass('lg-loaded')) {
|
|
1605
1639
|
setTimeout(function () {
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
var mediaObject = $currentSlide
|
|
1615
|
-
.find('.lg-object')
|
|
1616
|
-
.first();
|
|
1617
|
-
if (utils.isImageLoaded(mediaObject.get())) {
|
|
1618
|
-
_this.loadContentOnLoad(index, $currentSlide, _speed);
|
|
1640
|
+
if (_this.getSlideType(currentGalleryItem) === 'image') {
|
|
1641
|
+
$currentSlide
|
|
1642
|
+
.find('.lg-img-wrap')
|
|
1643
|
+
.append(utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
|
|
1644
|
+
if (srcset || sources) {
|
|
1645
|
+
var $img = $currentSlide.find('.lg-object');
|
|
1646
|
+
_this.initPictureFill($img);
|
|
1647
|
+
}
|
|
1619
1648
|
}
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1649
|
+
if (_this.getSlideType(currentGalleryItem) === 'image' ||
|
|
1650
|
+
(_this.getSlideType(currentGalleryItem) === 'video' &&
|
|
1651
|
+
poster)) {
|
|
1652
|
+
_this.onLgObjectLoad($currentSlide, index, delay, _speed, true, false);
|
|
1653
|
+
// load remaining slides once the slide is completely loaded
|
|
1654
|
+
_this.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () {
|
|
1655
|
+
_this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
|
|
1656
|
+
}, function () {
|
|
1657
|
+
_this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
|
|
1623
1658
|
});
|
|
1624
1659
|
}
|
|
1625
1660
|
}, this.settings.startAnimationDuration + 100);
|
|
@@ -1627,10 +1662,9 @@ var LightGallery = /** @class */ (function () {
|
|
|
1627
1662
|
}
|
|
1628
1663
|
// SLide content has been added to dom
|
|
1629
1664
|
$currentSlide.addClass('lg-loaded');
|
|
1630
|
-
this.
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
$currentSlide.addClass('lg-complete lg-complete_');
|
|
1665
|
+
if (!this.isFirstSlideWithZoomAnimation() ||
|
|
1666
|
+
(this.getSlideType(currentGalleryItem) === 'video' && !poster)) {
|
|
1667
|
+
this.onLgObjectLoad($currentSlide, index, delay, _speed, isFirstSlide, !!(videoInfo && videoInfo.html5 && !poster));
|
|
1634
1668
|
}
|
|
1635
1669
|
// When gallery is opened once content is loaded (second time) need to add lg-complete class for css styling
|
|
1636
1670
|
if ((!this.zoomFromOrigin || !this.currentImageSize) &&
|
|
@@ -1657,7 +1691,14 @@ var LightGallery = /** @class */ (function () {
|
|
|
1657
1691
|
}
|
|
1658
1692
|
}
|
|
1659
1693
|
};
|
|
1660
|
-
|
|
1694
|
+
/**
|
|
1695
|
+
* @desc Remove dummy image content and load next slides
|
|
1696
|
+
* Called only for the first time if zoomFromOrigin animation is enabled
|
|
1697
|
+
* @param index
|
|
1698
|
+
* @param $currentSlide
|
|
1699
|
+
* @param speed
|
|
1700
|
+
*/
|
|
1701
|
+
LightGallery.prototype.loadContentOnFirstSlideLoad = function (index, $currentSlide, speed) {
|
|
1661
1702
|
var _this = this;
|
|
1662
1703
|
setTimeout(function () {
|
|
1663
1704
|
$currentSlide.find('.lg-dummy-img').remove();
|
|
@@ -1828,7 +1869,7 @@ var LightGallery = /** @class */ (function () {
|
|
|
1828
1869
|
this.setDownloadValue(index);
|
|
1829
1870
|
if (videoInfo) {
|
|
1830
1871
|
var _a = this.mediaContainerPosition, top_3 = _a.top, bottom = _a.bottom;
|
|
1831
|
-
var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom,
|
|
1872
|
+
var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom, videoInfo && this.settings.videoMaxSize);
|
|
1832
1873
|
this.resizeVideoSlide(index, videoSize);
|
|
1833
1874
|
}
|
|
1834
1875
|
this.LGel.trigger(lGEvents.beforeSlide, {
|
|
@@ -1888,15 +1929,15 @@ var LightGallery = /** @class */ (function () {
|
|
|
1888
1929
|
if (!this.lGalleryOn) {
|
|
1889
1930
|
this.loadContent(index, true);
|
|
1890
1931
|
}
|
|
1891
|
-
|
|
1892
|
-
|
|
1932
|
+
else {
|
|
1933
|
+
setTimeout(function () {
|
|
1893
1934
|
_this.loadContent(index, true);
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
}
|
|
1899
|
-
}
|
|
1935
|
+
// Add title if this.settings.appendSubHtmlTo === lg-sub-html
|
|
1936
|
+
if (_this.settings.appendSubHtmlTo !== '.lg-item') {
|
|
1937
|
+
_this.addHtml(index);
|
|
1938
|
+
}
|
|
1939
|
+
}, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay));
|
|
1940
|
+
}
|
|
1900
1941
|
setTimeout(function () {
|
|
1901
1942
|
_this.lgBusy = false;
|
|
1902
1943
|
previousSlideItem_1.removeClass('lg-slide-progress');
|
|
@@ -2335,17 +2376,23 @@ var LightGallery = /** @class */ (function () {
|
|
|
2335
2376
|
};
|
|
2336
2377
|
LightGallery.prototype.mousewheel = function () {
|
|
2337
2378
|
var _this = this;
|
|
2338
|
-
|
|
2379
|
+
var lastCall = 0;
|
|
2380
|
+
this.outer.on('wheel.lg', function (e) {
|
|
2339
2381
|
if (!e.deltaY || _this.galleryItems.length < 2) {
|
|
2340
2382
|
return;
|
|
2341
2383
|
}
|
|
2342
|
-
|
|
2343
|
-
|
|
2384
|
+
e.preventDefault();
|
|
2385
|
+
var now = new Date().getTime();
|
|
2386
|
+
if (now - lastCall < 1000) {
|
|
2387
|
+
return;
|
|
2344
2388
|
}
|
|
2345
|
-
|
|
2389
|
+
lastCall = now;
|
|
2390
|
+
if (e.deltaY > 0) {
|
|
2346
2391
|
_this.goToNextSlide();
|
|
2347
2392
|
}
|
|
2348
|
-
e.
|
|
2393
|
+
else if (e.deltaY < 0) {
|
|
2394
|
+
_this.goToPrevSlide();
|
|
2395
|
+
}
|
|
2349
2396
|
});
|
|
2350
2397
|
};
|
|
2351
2398
|
LightGallery.prototype.isSlideElement = function (target) {
|
|
@@ -2435,7 +2482,7 @@ var LightGallery = /** @class */ (function () {
|
|
|
2435
2482
|
if (this.zoomFromOrigin && currentItem) {
|
|
2436
2483
|
var _a = this.mediaContainerPosition, top_4 = _a.top, bottom = _a.bottom;
|
|
2437
2484
|
var _b = this.galleryItems[this.index], __slideVideoInfo = _b.__slideVideoInfo, poster = _b.poster;
|
|
2438
|
-
var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo &&
|
|
2485
|
+
var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo && poster && this.settings.videoMaxSize);
|
|
2439
2486
|
transform = utils.getTransform(currentItem, this.outer, top_4, bottom, imageSize);
|
|
2440
2487
|
}
|
|
2441
2488
|
if (this.zoomFromOrigin && transform) {
|