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
|
@@ -28,7 +28,7 @@ function __rest(s, e) {
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
/*!
|
|
31
|
-
* lightgallery | 2.3.0
|
|
31
|
+
* lightgallery | 2.3.0 | October 28th 2021
|
|
32
32
|
* http://www.lightgalleryjs.com/
|
|
33
33
|
* Copyright (c) 2020 Sachin Neravath;
|
|
34
34
|
* @license GPLv3
|
|
@@ -68,24 +68,30 @@ function __spreadArrays() {
|
|
|
68
68
|
return r;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
71
|
+
function initLgPolyfills() {
|
|
72
|
+
(function () {
|
|
73
|
+
if (typeof window.CustomEvent === 'function')
|
|
74
|
+
return false;
|
|
75
|
+
function CustomEvent(event, params) {
|
|
76
|
+
params = params || {
|
|
77
|
+
bubbles: false,
|
|
78
|
+
cancelable: false,
|
|
79
|
+
detail: null,
|
|
80
|
+
};
|
|
81
|
+
var evt = document.createEvent('CustomEvent');
|
|
82
|
+
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
|
|
83
|
+
return evt;
|
|
84
|
+
}
|
|
85
|
+
window.CustomEvent = CustomEvent;
|
|
86
|
+
})();
|
|
87
|
+
(function () {
|
|
88
|
+
if (!Element.prototype.matches) {
|
|
89
|
+
Element.prototype.matches =
|
|
90
|
+
Element.prototype.msMatchesSelector ||
|
|
91
|
+
Element.prototype.webkitMatchesSelector;
|
|
92
|
+
}
|
|
93
|
+
})();
|
|
94
|
+
}
|
|
89
95
|
var lgQuery = /** @class */ (function () {
|
|
90
96
|
function lgQuery(selector) {
|
|
91
97
|
this.cssVenderPrefixes = [
|
|
@@ -218,7 +224,9 @@ var lgQuery = /** @class */ (function () {
|
|
|
218
224
|
this._each(function (el) {
|
|
219
225
|
// IE doesn't support multiple arguments
|
|
220
226
|
classNames.split(' ').forEach(function (className) {
|
|
221
|
-
|
|
227
|
+
if (className) {
|
|
228
|
+
el.classList.add(className);
|
|
229
|
+
}
|
|
222
230
|
});
|
|
223
231
|
});
|
|
224
232
|
return this;
|
|
@@ -227,7 +235,9 @@ var lgQuery = /** @class */ (function () {
|
|
|
227
235
|
this._each(function (el) {
|
|
228
236
|
// IE doesn't support multiple arguments
|
|
229
237
|
classNames.split(' ').forEach(function (className) {
|
|
230
|
-
|
|
238
|
+
if (className) {
|
|
239
|
+
el.classList.remove(className);
|
|
240
|
+
}
|
|
231
241
|
});
|
|
232
242
|
});
|
|
233
243
|
return this;
|
|
@@ -427,6 +437,7 @@ var lgQuery = /** @class */ (function () {
|
|
|
427
437
|
return lgQuery;
|
|
428
438
|
}());
|
|
429
439
|
function $LG(selector) {
|
|
440
|
+
initLgPolyfills();
|
|
430
441
|
return new lgQuery(selector);
|
|
431
442
|
}
|
|
432
443
|
|
|
@@ -471,12 +482,11 @@ var utils = {
|
|
|
471
482
|
/**
|
|
472
483
|
* get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
|
|
473
484
|
*/
|
|
474
|
-
|
|
475
|
-
getSize: function (el, container, spacing, isDisabled, defaultLgSize) {
|
|
485
|
+
getSize: function (el, container, spacing, defaultLgSize) {
|
|
476
486
|
if (spacing === void 0) { spacing = 0; }
|
|
477
487
|
var LGel = $LG(el);
|
|
478
488
|
var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
|
|
479
|
-
if (!lgSize
|
|
489
|
+
if (!lgSize) {
|
|
480
490
|
return;
|
|
481
491
|
}
|
|
482
492
|
var isResponsiveSizes = lgSize.split(',');
|
|
@@ -551,9 +561,9 @@ var utils = {
|
|
|
551
561
|
', 1)';
|
|
552
562
|
return transform;
|
|
553
563
|
},
|
|
554
|
-
getIframeMarkup: function (iframeWidth, iframeHeight, src, iframeTitle) {
|
|
564
|
+
getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
|
|
555
565
|
var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
|
|
556
|
-
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>";
|
|
566
|
+
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>";
|
|
557
567
|
},
|
|
558
568
|
getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
|
|
559
569
|
var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
|
|
@@ -670,6 +680,47 @@ var utils = {
|
|
|
670
680
|
isMobile: function () {
|
|
671
681
|
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
|
672
682
|
},
|
|
683
|
+
/**
|
|
684
|
+
* @desc Check the given src is video
|
|
685
|
+
* @param {String} src
|
|
686
|
+
* @return {Object} video type
|
|
687
|
+
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
|
|
688
|
+
*
|
|
689
|
+
* @todo - this information can be moved to dynamicEl to avoid frequent calls
|
|
690
|
+
*/
|
|
691
|
+
isVideo: function (src, isHTML5VIdeo, index) {
|
|
692
|
+
if (!src) {
|
|
693
|
+
if (isHTML5VIdeo) {
|
|
694
|
+
return {
|
|
695
|
+
html5: true,
|
|
696
|
+
};
|
|
697
|
+
}
|
|
698
|
+
else {
|
|
699
|
+
console.error('lightGallery :- data-src is not provided on slide item ' +
|
|
700
|
+
(index + 1) +
|
|
701
|
+
'. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
|
|
702
|
+
return;
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
|
|
706
|
+
var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
|
|
707
|
+
var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
|
|
708
|
+
if (youtube) {
|
|
709
|
+
return {
|
|
710
|
+
youtube: youtube,
|
|
711
|
+
};
|
|
712
|
+
}
|
|
713
|
+
else if (vimeo) {
|
|
714
|
+
return {
|
|
715
|
+
vimeo: vimeo,
|
|
716
|
+
};
|
|
717
|
+
}
|
|
718
|
+
else if (wistia) {
|
|
719
|
+
return {
|
|
720
|
+
wistia: wistia,
|
|
721
|
+
};
|
|
722
|
+
}
|
|
723
|
+
},
|
|
673
724
|
};
|
|
674
725
|
|
|
675
726
|
var lightGalleryCoreSettings = {
|
|
@@ -682,7 +733,7 @@ var lightGalleryCoreSettings = {
|
|
|
682
733
|
addClass: '',
|
|
683
734
|
startClass: 'lg-start-zoom',
|
|
684
735
|
backdropDuration: 300,
|
|
685
|
-
container:
|
|
736
|
+
container: '',
|
|
686
737
|
startAnimationDuration: 400,
|
|
687
738
|
zoomFromOrigin: true,
|
|
688
739
|
hideBarsDelay: 0,
|
|
@@ -691,6 +742,7 @@ var lightGalleryCoreSettings = {
|
|
|
691
742
|
supportLegacyBrowser: true,
|
|
692
743
|
allowMediaOverlap: false,
|
|
693
744
|
videoMaxSize: '1280-720',
|
|
745
|
+
loadYouTubePoster: true,
|
|
694
746
|
defaultCaptionHeight: 0,
|
|
695
747
|
ariaLabelledby: '',
|
|
696
748
|
ariaDescribedby: '',
|
|
@@ -711,7 +763,6 @@ var lightGalleryCoreSettings = {
|
|
|
711
763
|
subHtmlSelectorRelative: false,
|
|
712
764
|
preload: 2,
|
|
713
765
|
numberOfSlideItemsInDom: 10,
|
|
714
|
-
showAfterLoad: true,
|
|
715
766
|
selector: '',
|
|
716
767
|
selectWithin: '',
|
|
717
768
|
nextHtml: '',
|
|
@@ -719,6 +770,8 @@ var lightGalleryCoreSettings = {
|
|
|
719
770
|
index: 0,
|
|
720
771
|
iframeWidth: '100%',
|
|
721
772
|
iframeHeight: '100%',
|
|
773
|
+
iframeMaxWidth: '100%',
|
|
774
|
+
iframeMaxHeight: '100%',
|
|
722
775
|
download: true,
|
|
723
776
|
counter: true,
|
|
724
777
|
appendCounterTo: '.lg-toolbar',
|
|
@@ -985,9 +1038,6 @@ var LightGallery = /** @class */ (function () {
|
|
|
985
1038
|
if (this.settings.enableDrag) {
|
|
986
1039
|
outerClassNames += 'lg-grab ';
|
|
987
1040
|
}
|
|
988
|
-
if (this.settings.showAfterLoad) {
|
|
989
|
-
outerClassNames += 'lg-show-after-load';
|
|
990
|
-
}
|
|
991
1041
|
this.outer.addClass(outerClassNames);
|
|
992
1042
|
this.$inner.css('transition-timing-function', this.settings.easing);
|
|
993
1043
|
this.$inner.css('transition-duration', this.settings.speed + 'ms');
|
|
@@ -1006,10 +1056,10 @@ var LightGallery = /** @class */ (function () {
|
|
|
1006
1056
|
LightGallery.prototype.refreshOnResize = function () {
|
|
1007
1057
|
if (this.lgOpened) {
|
|
1008
1058
|
var currentGalleryItem = this.galleryItems[this.index];
|
|
1009
|
-
var __slideVideoInfo = currentGalleryItem.__slideVideoInfo
|
|
1059
|
+
var __slideVideoInfo = currentGalleryItem.__slideVideoInfo;
|
|
1010
1060
|
this.mediaContainerPosition = this.getMediaContainerPosition();
|
|
1011
1061
|
var _a = this.mediaContainerPosition, top_1 = _a.top, bottom = _a.bottom;
|
|
1012
|
-
this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo &&
|
|
1062
|
+
this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo && this.settings.videoMaxSize);
|
|
1013
1063
|
if (__slideVideoInfo) {
|
|
1014
1064
|
this.resizeVideoSlide(this.index, this.currentImageSize);
|
|
1015
1065
|
}
|
|
@@ -1188,9 +1238,9 @@ var LightGallery = /** @class */ (function () {
|
|
|
1188
1238
|
if (!this.settings.allowMediaOverlap) {
|
|
1189
1239
|
this.setMediaContainerPosition(top, bottom);
|
|
1190
1240
|
}
|
|
1191
|
-
var
|
|
1241
|
+
var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
|
|
1192
1242
|
if (this.zoomFromOrigin && element) {
|
|
1193
|
-
this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo &&
|
|
1243
|
+
this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);
|
|
1194
1244
|
transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize);
|
|
1195
1245
|
}
|
|
1196
1246
|
if (!this.zoomFromOrigin || !transform) {
|
|
@@ -1444,7 +1494,7 @@ var LightGallery = /** @class */ (function () {
|
|
|
1444
1494
|
// displayed on top of actual image
|
|
1445
1495
|
var imgContent = '';
|
|
1446
1496
|
var altAttr = alt ? 'alt="' + alt + '"' : '';
|
|
1447
|
-
if (
|
|
1497
|
+
if (this.isFirstSlideWithZoomAnimation()) {
|
|
1448
1498
|
imgContent = this.getDummyImageContent($currentSlide, index, altAttr);
|
|
1449
1499
|
}
|
|
1450
1500
|
else {
|
|
@@ -1453,88 +1503,73 @@ var LightGallery = /** @class */ (function () {
|
|
|
1453
1503
|
var imgMarkup = "<picture class=\"lg-img-wrap\"> " + imgContent + "</picture>";
|
|
1454
1504
|
$currentSlide.prepend(imgMarkup);
|
|
1455
1505
|
};
|
|
1456
|
-
LightGallery.prototype.
|
|
1457
|
-
var
|
|
1458
|
-
if (
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1506
|
+
LightGallery.prototype.onSlideObjectLoad = function ($slide, isHTML5VideoWithoutPoster, onLoad, onError) {
|
|
1507
|
+
var mediaObject = $slide.find('.lg-object').first();
|
|
1508
|
+
if (utils.isImageLoaded(mediaObject.get()) ||
|
|
1509
|
+
isHTML5VideoWithoutPoster) {
|
|
1510
|
+
onLoad();
|
|
1511
|
+
}
|
|
1512
|
+
else {
|
|
1513
|
+
mediaObject.on('load.lg error.lg', function () {
|
|
1514
|
+
onLoad && onLoad();
|
|
1515
|
+
});
|
|
1516
|
+
mediaObject.on('error.lg', function () {
|
|
1517
|
+
onError && onError();
|
|
1463
1518
|
});
|
|
1464
1519
|
}
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1520
|
+
};
|
|
1521
|
+
/**
|
|
1522
|
+
*
|
|
1523
|
+
* @param $el Current slide item
|
|
1524
|
+
* @param index
|
|
1525
|
+
* @param delay Delay is 0 except first time
|
|
1526
|
+
* @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin
|
|
1527
|
+
* @param isFirstSlide
|
|
1528
|
+
*/
|
|
1529
|
+
LightGallery.prototype.onLgObjectLoad = function (currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) {
|
|
1530
|
+
var _this = this;
|
|
1531
|
+
this.onSlideObjectLoad(currentSlide, isHTML5VideoWithoutPoster, function () {
|
|
1532
|
+
_this.triggerSlideItemLoad(currentSlide, index, delay, speed, isFirstSlide);
|
|
1533
|
+
}, function () {
|
|
1534
|
+
currentSlide.addClass('lg-complete lg-complete_');
|
|
1535
|
+
currentSlide.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
|
|
1469
1536
|
});
|
|
1470
|
-
setTimeout(function () {
|
|
1471
|
-
$el.find('.lg-object')
|
|
1472
|
-
.first()
|
|
1473
|
-
.on('error.lg', function () {
|
|
1474
|
-
$el.addClass('lg-complete lg-complete_');
|
|
1475
|
-
$el.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
|
|
1476
|
-
});
|
|
1477
|
-
}, speed);
|
|
1478
1537
|
};
|
|
1479
|
-
LightGallery.prototype.
|
|
1538
|
+
LightGallery.prototype.triggerSlideItemLoad = function ($currentSlide, index, delay, speed, isFirstSlide) {
|
|
1480
1539
|
var _this = this;
|
|
1540
|
+
var currentGalleryItem = this.galleryItems[index];
|
|
1541
|
+
// Adding delay for video slides without poster for better performance and user experience
|
|
1542
|
+
// Videos should start playing once once the gallery is completely loaded
|
|
1543
|
+
var _speed = isFirstSlide &&
|
|
1544
|
+
this.getSlideType(currentGalleryItem) === 'video' &&
|
|
1545
|
+
!currentGalleryItem.poster
|
|
1546
|
+
? speed
|
|
1547
|
+
: 0;
|
|
1481
1548
|
setTimeout(function () {
|
|
1482
|
-
$
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
}
|
|
1490
|
-
}, speed);
|
|
1549
|
+
$currentSlide.addClass('lg-complete lg-complete_');
|
|
1550
|
+
_this.LGel.trigger(lGEvents.slideItemLoad, {
|
|
1551
|
+
index: index,
|
|
1552
|
+
delay: delay || 0,
|
|
1553
|
+
isFirstSlide: isFirstSlide,
|
|
1554
|
+
});
|
|
1555
|
+
}, _speed);
|
|
1491
1556
|
};
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
|
|
1497
|
-
*
|
|
1498
|
-
* @todo - this information can be moved to dynamicEl to avoid frequent calls
|
|
1499
|
-
*/
|
|
1500
|
-
LightGallery.prototype.isVideo = function (src, index) {
|
|
1501
|
-
if (!src) {
|
|
1502
|
-
if (this.galleryItems[index].video) {
|
|
1503
|
-
return {
|
|
1504
|
-
html5: true,
|
|
1505
|
-
};
|
|
1506
|
-
}
|
|
1507
|
-
else {
|
|
1508
|
-
console.error('lightGallery :- data-src is not provided on slide item ' +
|
|
1509
|
-
(index + 1) +
|
|
1510
|
-
'. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
|
|
1511
|
-
return;
|
|
1512
|
-
}
|
|
1513
|
-
}
|
|
1514
|
-
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
|
|
1515
|
-
var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)/i);
|
|
1516
|
-
var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
|
|
1517
|
-
if (youtube) {
|
|
1518
|
-
return {
|
|
1519
|
-
youtube: youtube,
|
|
1520
|
-
};
|
|
1521
|
-
}
|
|
1522
|
-
else if (vimeo) {
|
|
1523
|
-
return {
|
|
1524
|
-
vimeo: vimeo,
|
|
1525
|
-
};
|
|
1526
|
-
}
|
|
1527
|
-
else if (wistia) {
|
|
1528
|
-
return {
|
|
1529
|
-
wistia: wistia,
|
|
1530
|
-
};
|
|
1531
|
-
}
|
|
1557
|
+
LightGallery.prototype.isFirstSlideWithZoomAnimation = function () {
|
|
1558
|
+
return !!(!this.lGalleryOn &&
|
|
1559
|
+
this.zoomFromOrigin &&
|
|
1560
|
+
this.currentImageSize);
|
|
1532
1561
|
};
|
|
1533
1562
|
// Add video slideInfo
|
|
1534
1563
|
LightGallery.prototype.addSlideVideoInfo = function (items) {
|
|
1535
1564
|
var _this = this;
|
|
1536
1565
|
items.forEach(function (element, index) {
|
|
1537
|
-
element.__slideVideoInfo =
|
|
1566
|
+
element.__slideVideoInfo = utils.isVideo(element.src, !!element.video, index);
|
|
1567
|
+
if (element.__slideVideoInfo &&
|
|
1568
|
+
_this.settings.loadYouTubePoster &&
|
|
1569
|
+
!element.poster &&
|
|
1570
|
+
element.__slideVideoInfo.youtube) {
|
|
1571
|
+
element.poster = "//img.youtube.com/vi/" + element.__slideVideoInfo.youtube[1] + "/maxresdefault.jpg";
|
|
1572
|
+
}
|
|
1538
1573
|
});
|
|
1539
1574
|
};
|
|
1540
1575
|
/**
|
|
@@ -1572,11 +1607,11 @@ var LightGallery = /** @class */ (function () {
|
|
|
1572
1607
|
if (!$currentSlide.hasClass('lg-loaded')) {
|
|
1573
1608
|
if (videoInfo) {
|
|
1574
1609
|
var _a = this.mediaContainerPosition, top_2 = _a.top, bottom = _a.bottom;
|
|
1575
|
-
var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom,
|
|
1610
|
+
var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom, videoInfo && this.settings.videoMaxSize);
|
|
1576
1611
|
lgVideoStyle = this.getVideoContStyle(videoSize);
|
|
1577
1612
|
}
|
|
1578
1613
|
if (iframe) {
|
|
1579
|
-
var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, src, currentGalleryItem.iframeTitle);
|
|
1614
|
+
var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle);
|
|
1580
1615
|
$currentSlide.prepend(markup);
|
|
1581
1616
|
}
|
|
1582
1617
|
else if (poster) {
|
|
@@ -1607,7 +1642,6 @@ var LightGallery = /** @class */ (function () {
|
|
|
1607
1642
|
src: src,
|
|
1608
1643
|
html5Video: _html5Video,
|
|
1609
1644
|
hasPoster: !!poster,
|
|
1610
|
-
isFirstSlide: isFirstSlide,
|
|
1611
1645
|
});
|
|
1612
1646
|
}
|
|
1613
1647
|
this.LGel.trigger(lGEvents.afterAppendSlide, { index: index });
|
|
@@ -1623,8 +1657,8 @@ var LightGallery = /** @class */ (function () {
|
|
|
1623
1657
|
if (delay && !$LG(document.body).hasClass('lg-from-hash')) {
|
|
1624
1658
|
_speed = delay;
|
|
1625
1659
|
}
|
|
1626
|
-
// Only for first slide
|
|
1627
|
-
if (
|
|
1660
|
+
// Only for first slide and zoomFromOrigin is enabled
|
|
1661
|
+
if (this.isFirstSlideWithZoomAnimation()) {
|
|
1628
1662
|
setTimeout(function () {
|
|
1629
1663
|
$currentSlide
|
|
1630
1664
|
.removeClass('lg-start-end-progress lg-start-progress')
|
|
@@ -1632,23 +1666,24 @@ var LightGallery = /** @class */ (function () {
|
|
|
1632
1666
|
}, this.settings.startAnimationDuration + 100);
|
|
1633
1667
|
if (!$currentSlide.hasClass('lg-loaded')) {
|
|
1634
1668
|
setTimeout(function () {
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
var mediaObject = $currentSlide
|
|
1644
|
-
.find('.lg-object')
|
|
1645
|
-
.first();
|
|
1646
|
-
if (utils.isImageLoaded(mediaObject.get())) {
|
|
1647
|
-
_this.loadContentOnLoad(index, $currentSlide, _speed);
|
|
1669
|
+
if (_this.getSlideType(currentGalleryItem) === 'image') {
|
|
1670
|
+
$currentSlide
|
|
1671
|
+
.find('.lg-img-wrap')
|
|
1672
|
+
.append(utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
|
|
1673
|
+
if (srcset || sources) {
|
|
1674
|
+
var $img = $currentSlide.find('.lg-object');
|
|
1675
|
+
_this.initPictureFill($img);
|
|
1676
|
+
}
|
|
1648
1677
|
}
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1678
|
+
if (_this.getSlideType(currentGalleryItem) === 'image' ||
|
|
1679
|
+
(_this.getSlideType(currentGalleryItem) === 'video' &&
|
|
1680
|
+
poster)) {
|
|
1681
|
+
_this.onLgObjectLoad($currentSlide, index, delay, _speed, true, false);
|
|
1682
|
+
// load remaining slides once the slide is completely loaded
|
|
1683
|
+
_this.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () {
|
|
1684
|
+
_this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
|
|
1685
|
+
}, function () {
|
|
1686
|
+
_this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
|
|
1652
1687
|
});
|
|
1653
1688
|
}
|
|
1654
1689
|
}, this.settings.startAnimationDuration + 100);
|
|
@@ -1656,10 +1691,9 @@ var LightGallery = /** @class */ (function () {
|
|
|
1656
1691
|
}
|
|
1657
1692
|
// SLide content has been added to dom
|
|
1658
1693
|
$currentSlide.addClass('lg-loaded');
|
|
1659
|
-
this.
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
$currentSlide.addClass('lg-complete lg-complete_');
|
|
1694
|
+
if (!this.isFirstSlideWithZoomAnimation() ||
|
|
1695
|
+
(this.getSlideType(currentGalleryItem) === 'video' && !poster)) {
|
|
1696
|
+
this.onLgObjectLoad($currentSlide, index, delay, _speed, isFirstSlide, !!(videoInfo && videoInfo.html5 && !poster));
|
|
1663
1697
|
}
|
|
1664
1698
|
// When gallery is opened once content is loaded (second time) need to add lg-complete class for css styling
|
|
1665
1699
|
if ((!this.zoomFromOrigin || !this.currentImageSize) &&
|
|
@@ -1686,7 +1720,14 @@ var LightGallery = /** @class */ (function () {
|
|
|
1686
1720
|
}
|
|
1687
1721
|
}
|
|
1688
1722
|
};
|
|
1689
|
-
|
|
1723
|
+
/**
|
|
1724
|
+
* @desc Remove dummy image content and load next slides
|
|
1725
|
+
* Called only for the first time if zoomFromOrigin animation is enabled
|
|
1726
|
+
* @param index
|
|
1727
|
+
* @param $currentSlide
|
|
1728
|
+
* @param speed
|
|
1729
|
+
*/
|
|
1730
|
+
LightGallery.prototype.loadContentOnFirstSlideLoad = function (index, $currentSlide, speed) {
|
|
1690
1731
|
var _this = this;
|
|
1691
1732
|
setTimeout(function () {
|
|
1692
1733
|
$currentSlide.find('.lg-dummy-img').remove();
|
|
@@ -1857,7 +1898,7 @@ var LightGallery = /** @class */ (function () {
|
|
|
1857
1898
|
this.setDownloadValue(index);
|
|
1858
1899
|
if (videoInfo) {
|
|
1859
1900
|
var _a = this.mediaContainerPosition, top_3 = _a.top, bottom = _a.bottom;
|
|
1860
|
-
var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom,
|
|
1901
|
+
var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom, videoInfo && this.settings.videoMaxSize);
|
|
1861
1902
|
this.resizeVideoSlide(index, videoSize);
|
|
1862
1903
|
}
|
|
1863
1904
|
this.LGel.trigger(lGEvents.beforeSlide, {
|
|
@@ -1917,15 +1958,15 @@ var LightGallery = /** @class */ (function () {
|
|
|
1917
1958
|
if (!this.lGalleryOn) {
|
|
1918
1959
|
this.loadContent(index, true);
|
|
1919
1960
|
}
|
|
1920
|
-
|
|
1921
|
-
|
|
1961
|
+
else {
|
|
1962
|
+
setTimeout(function () {
|
|
1922
1963
|
_this.loadContent(index, true);
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
}
|
|
1928
|
-
}
|
|
1964
|
+
// Add title if this.settings.appendSubHtmlTo === lg-sub-html
|
|
1965
|
+
if (_this.settings.appendSubHtmlTo !== '.lg-item') {
|
|
1966
|
+
_this.addHtml(index);
|
|
1967
|
+
}
|
|
1968
|
+
}, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay));
|
|
1969
|
+
}
|
|
1929
1970
|
setTimeout(function () {
|
|
1930
1971
|
_this.lgBusy = false;
|
|
1931
1972
|
previousSlideItem_1.removeClass('lg-slide-progress');
|
|
@@ -2364,17 +2405,23 @@ var LightGallery = /** @class */ (function () {
|
|
|
2364
2405
|
};
|
|
2365
2406
|
LightGallery.prototype.mousewheel = function () {
|
|
2366
2407
|
var _this = this;
|
|
2367
|
-
|
|
2408
|
+
var lastCall = 0;
|
|
2409
|
+
this.outer.on('wheel.lg', function (e) {
|
|
2368
2410
|
if (!e.deltaY || _this.galleryItems.length < 2) {
|
|
2369
2411
|
return;
|
|
2370
2412
|
}
|
|
2371
|
-
|
|
2372
|
-
|
|
2413
|
+
e.preventDefault();
|
|
2414
|
+
var now = new Date().getTime();
|
|
2415
|
+
if (now - lastCall < 1000) {
|
|
2416
|
+
return;
|
|
2373
2417
|
}
|
|
2374
|
-
|
|
2418
|
+
lastCall = now;
|
|
2419
|
+
if (e.deltaY > 0) {
|
|
2375
2420
|
_this.goToNextSlide();
|
|
2376
2421
|
}
|
|
2377
|
-
e.
|
|
2422
|
+
else if (e.deltaY < 0) {
|
|
2423
|
+
_this.goToPrevSlide();
|
|
2424
|
+
}
|
|
2378
2425
|
});
|
|
2379
2426
|
};
|
|
2380
2427
|
LightGallery.prototype.isSlideElement = function (target) {
|
|
@@ -2464,7 +2511,7 @@ var LightGallery = /** @class */ (function () {
|
|
|
2464
2511
|
if (this.zoomFromOrigin && currentItem) {
|
|
2465
2512
|
var _a = this.mediaContainerPosition, top_4 = _a.top, bottom = _a.bottom;
|
|
2466
2513
|
var _b = this.galleryItems[this.index], __slideVideoInfo = _b.__slideVideoInfo, poster = _b.poster;
|
|
2467
|
-
var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo &&
|
|
2514
|
+
var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo && poster && this.settings.videoMaxSize);
|
|
2468
2515
|
transform = utils.getTransform(currentItem, this.outer, top_4, bottom, imageSize);
|
|
2469
2516
|
}
|
|
2470
2517
|
if (this.zoomFromOrigin && transform) {
|