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.
Files changed (104) hide show
  1. package/css/lightgallery-bundle.css +19 -26
  2. package/css/lightgallery-bundle.min.css +1 -1
  3. package/css/lightgallery-core.css +0 -19
  4. package/css/lightgallery.css +19 -26
  5. package/lg-events.d.ts +0 -4
  6. package/lg-settings.d.ts +17 -8
  7. package/lg-utils.d.ts +25 -4
  8. package/lib/lg-settings.js +4 -2
  9. package/lib/lg-settings.js.map +1 -1
  10. package/lib/lg-utils.js +45 -5
  11. package/lib/lg-utils.js.map +1 -1
  12. package/lib/lgQuery.js +31 -20
  13. package/lib/lgQuery.js.map +1 -1
  14. package/lib/lightgallery.js +113 -119
  15. package/lib/lightgallery.js.map +1 -1
  16. package/lib/plugins/video/lg-video-settings.js.map +1 -1
  17. package/lib/plugins/video/lg-video-utils.js +24 -0
  18. package/lib/plugins/video/lg-video-utils.js.map +1 -0
  19. package/lib/plugins/video/lg-video.js +37 -31
  20. package/lib/plugins/video/lg-video.js.map +1 -1
  21. package/lib/plugins/zoom/lg-zoom.js +7 -8
  22. package/lib/plugins/zoom/lg-zoom.js.map +1 -1
  23. package/lightgallery.d.ts +18 -10
  24. package/lightgallery.es5.js +194 -147
  25. package/lightgallery.es5.js.map +1 -1
  26. package/lightgallery.min.js +2 -2
  27. package/lightgallery.umd.js +194 -147
  28. package/lightgallery.umd.js.map +1 -1
  29. package/lit/lightgallery.esm.js +7 -7
  30. package/lit/lightgallery.umd.js +3 -3
  31. package/package.json +1 -1
  32. package/plugins/autoplay/lg-autoplay.es5.js +1 -1
  33. package/plugins/autoplay/lg-autoplay.es5.js.map +1 -1
  34. package/plugins/autoplay/lg-autoplay.min.js +1 -1
  35. package/plugins/autoplay/lg-autoplay.umd.js +1 -1
  36. package/plugins/autoplay/lg-autoplay.umd.js.map +1 -1
  37. package/plugins/comment/lg-comment.es5.js +1 -1
  38. package/plugins/comment/lg-comment.es5.js.map +1 -1
  39. package/plugins/comment/lg-comment.min.js +1 -1
  40. package/plugins/comment/lg-comment.umd.js +1 -1
  41. package/plugins/comment/lg-comment.umd.js.map +1 -1
  42. package/plugins/fullscreen/lg-fullscreen.es5.js +1 -1
  43. package/plugins/fullscreen/lg-fullscreen.min.js +1 -1
  44. package/plugins/fullscreen/lg-fullscreen.umd.js +1 -1
  45. package/plugins/hash/lg-hash.es5.js +1 -1
  46. package/plugins/hash/lg-hash.es5.js.map +1 -1
  47. package/plugins/hash/lg-hash.min.js +1 -1
  48. package/plugins/hash/lg-hash.umd.js +1 -1
  49. package/plugins/hash/lg-hash.umd.js.map +1 -1
  50. package/plugins/mediumZoom/lg-medium-zoom.es5.js +1 -1
  51. package/plugins/mediumZoom/lg-medium-zoom.es5.js.map +1 -1
  52. package/plugins/mediumZoom/lg-medium-zoom.min.js +1 -1
  53. package/plugins/mediumZoom/lg-medium-zoom.umd.js +1 -1
  54. package/plugins/mediumZoom/lg-medium-zoom.umd.js.map +1 -1
  55. package/plugins/pager/lg-pager.es5.js +1 -1
  56. package/plugins/pager/lg-pager.es5.js.map +1 -1
  57. package/plugins/pager/lg-pager.min.js +1 -1
  58. package/plugins/pager/lg-pager.umd.js +1 -1
  59. package/plugins/pager/lg-pager.umd.js.map +1 -1
  60. package/plugins/relativeCaption/lg-relative-caption.es5.js +1 -1
  61. package/plugins/relativeCaption/lg-relative-caption.es5.js.map +1 -1
  62. package/plugins/relativeCaption/lg-relative-caption.min.js +1 -1
  63. package/plugins/relativeCaption/lg-relative-caption.umd.js +1 -1
  64. package/plugins/relativeCaption/lg-relative-caption.umd.js.map +1 -1
  65. package/plugins/rotate/lg-rotate.es5.js +1 -1
  66. package/plugins/rotate/lg-rotate.es5.js.map +1 -1
  67. package/plugins/rotate/lg-rotate.min.js +1 -1
  68. package/plugins/rotate/lg-rotate.umd.js +1 -1
  69. package/plugins/rotate/lg-rotate.umd.js.map +1 -1
  70. package/plugins/share/lg-share.es5.js +1 -1
  71. package/plugins/share/lg-share.es5.js.map +1 -1
  72. package/plugins/share/lg-share.min.js +1 -1
  73. package/plugins/share/lg-share.umd.js +1 -1
  74. package/plugins/share/lg-share.umd.js.map +1 -1
  75. package/plugins/thumbnail/lg-thumbnail.es5.js +1 -1
  76. package/plugins/thumbnail/lg-thumbnail.es5.js.map +1 -1
  77. package/plugins/thumbnail/lg-thumbnail.min.js +1 -1
  78. package/plugins/thumbnail/lg-thumbnail.umd.js +1 -1
  79. package/plugins/thumbnail/lg-thumbnail.umd.js.map +1 -1
  80. package/plugins/video/lg-video-settings.d.ts +2 -1
  81. package/plugins/video/lg-video-utils.d.ts +6 -0
  82. package/plugins/video/lg-video.d.ts +6 -1
  83. package/plugins/video/lg-video.es5.js +56 -30
  84. package/plugins/video/lg-video.es5.js.map +1 -1
  85. package/plugins/video/lg-video.min.js +2 -2
  86. package/plugins/video/lg-video.umd.js +56 -30
  87. package/plugins/video/lg-video.umd.js.map +1 -1
  88. package/plugins/zoom/lg-zoom.es5.js +8 -9
  89. package/plugins/zoom/lg-zoom.es5.js.map +1 -1
  90. package/plugins/zoom/lg-zoom.min.js +2 -2
  91. package/plugins/zoom/lg-zoom.umd.js +8 -9
  92. package/plugins/zoom/lg-zoom.umd.js.map +1 -1
  93. package/react/Lightgallery.es5.js +194 -147
  94. package/react/Lightgallery.es5.js.map +1 -1
  95. package/react/Lightgallery.umd.js +194 -147
  96. package/react/Lightgallery.umd.js.map +1 -1
  97. package/scss/_lg-theme-default.scss +17 -10
  98. package/scss/lightgallery-core.scss +0 -24
  99. package/vue/LightGalleryVue.common.js +188 -150
  100. package/vue/LightGalleryVue.common.js.map +1 -1
  101. package/vue/LightGalleryVue.umd.js +188 -150
  102. package/vue/LightGalleryVue.umd.js.map +1 -1
  103. package/vue/LightGalleryVue.umd.min.js +2 -2
  104. package/vue/LightGalleryVue.umd.min.js.map +1 -1
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * lightgallery | 2.3.0-beta.1 | August 31st 2021
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
- (function () {
43
- if (typeof window.CustomEvent === 'function')
44
- return false;
45
- function CustomEvent(event, params) {
46
- params = params || { bubbles: false, cancelable: false, detail: null };
47
- var evt = document.createEvent('CustomEvent');
48
- evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
49
- return evt;
50
- }
51
- window.CustomEvent = CustomEvent;
52
- })();
53
- (function () {
54
- if (!Element.prototype.matches) {
55
- Element.prototype.matches =
56
- Element.prototype.msMatchesSelector ||
57
- Element.prototype.webkitMatchesSelector;
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
- el.classList.add(className);
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
- el.classList.remove(className);
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
- // @todo improive this
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 || isDisabled) {
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: document.body,
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, poster = currentGalleryItem.poster;
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 && !poster, __slideVideoInfo && this.settings.videoMaxSize);
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 _b = this.galleryItems[index], __slideVideoInfo = _b.__slideVideoInfo, poster = _b.poster;
1212
+ var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
1163
1213
  if (this.zoomFromOrigin && element) {
1164
- this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && !poster, __slideVideoInfo && this.settings.videoMaxSize);
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 (!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize) {
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.onLgObjectLoad = function ($el, index, delay, speed, dummyImageLoaded, isFirstSlide) {
1428
- var _this = this;
1429
- if (dummyImageLoaded) {
1430
- this.LGel.trigger(lGEvents.slideItemLoad, {
1431
- index: index,
1432
- delay: delay || 0,
1433
- isFirstSlide: isFirstSlide,
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
- $el.find('.lg-object')
1437
- .first()
1438
- .on('load.lg', function () {
1439
- _this.handleLgObjectLoad($el, index, delay, speed, dummyImageLoaded, isFirstSlide);
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.handleLgObjectLoad = function ($el, index, delay, speed, dummyImageLoaded, isFirstSlide) {
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
- $el.addClass('lg-complete lg-complete_');
1454
- if (!dummyImageLoaded) {
1455
- _this.LGel.trigger(lGEvents.slideItemLoad, {
1456
- index: index,
1457
- delay: delay || 0,
1458
- isFirstSlide: isFirstSlide,
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
- * @desc Check the given src is video
1465
- * @param {String} src
1466
- * @return {Object} video type
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 = _this.isVideo(element.src, index);
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, false, videoInfo && this.settings.videoMaxSize);
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 (!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize) {
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
- $currentSlide
1607
- .find('.lg-img-wrap')
1608
- .append(utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
1609
- if (srcset || sources) {
1610
- var $img = $currentSlide.find('.lg-object');
1611
- _this.initPictureFill($img);
1612
- }
1613
- _this.onLgObjectLoad($currentSlide, index, delay, _speed, true, true);
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
- else {
1621
- mediaObject.on('load.lg error.lg', function () {
1622
- _this.loadContentOnLoad(index, $currentSlide, _speed);
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.onLgObjectLoad($currentSlide, index, delay, _speed, false, isFirstSlide);
1631
- // @todo check load state for html5 videos
1632
- if (videoInfo && videoInfo.html5 && !poster) {
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
- LightGallery.prototype.loadContentOnLoad = function (index, $currentSlide, speed) {
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, false, videoInfo && this.settings.videoMaxSize);
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
- setTimeout(function () {
1892
- if (_this.lGalleryOn) {
1932
+ else {
1933
+ setTimeout(function () {
1893
1934
  _this.loadContent(index, true);
1894
- }
1895
- // Add title if this.settings.appendSubHtmlTo === lg-sub-html
1896
- if (_this.settings.appendSubHtmlTo !== '.lg-item') {
1897
- _this.addHtml(index);
1898
- }
1899
- }, (this.lGalleryOn ? this.settings.speed + 50 : 50) + (fromTouch ? 0 : this.settings.slideDelay));
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
- this.outer.on('mousewheel.lg', function (e) {
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
- if (e.deltaY > 0) {
2343
- _this.goToPrevSlide();
2384
+ e.preventDefault();
2385
+ var now = new Date().getTime();
2386
+ if (now - lastCall < 1000) {
2387
+ return;
2344
2388
  }
2345
- else {
2389
+ lastCall = now;
2390
+ if (e.deltaY > 0) {
2346
2391
  _this.goToNextSlide();
2347
2392
  }
2348
- e.preventDefault();
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 && !poster, __slideVideoInfo && poster && this.settings.videoMaxSize);
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) {