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
@@ -28,7 +28,7 @@ function __rest(s, e) {
28
28
  }
29
29
 
30
30
  /*!
31
- * lightgallery | 2.3.0-beta.1 | August 31st 2021
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
- (function () {
72
- if (typeof window.CustomEvent === 'function')
73
- return false;
74
- function CustomEvent(event, params) {
75
- params = params || { bubbles: false, cancelable: false, detail: null };
76
- var evt = document.createEvent('CustomEvent');
77
- evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
78
- return evt;
79
- }
80
- window.CustomEvent = CustomEvent;
81
- })();
82
- (function () {
83
- if (!Element.prototype.matches) {
84
- Element.prototype.matches =
85
- Element.prototype.msMatchesSelector ||
86
- Element.prototype.webkitMatchesSelector;
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
- el.classList.add(className);
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
- el.classList.remove(className);
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
- // @todo improive this
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 || isDisabled) {
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: document.body,
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, poster = currentGalleryItem.poster;
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 && !poster, __slideVideoInfo && this.settings.videoMaxSize);
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 _b = this.galleryItems[index], __slideVideoInfo = _b.__slideVideoInfo, poster = _b.poster;
1241
+ var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
1192
1242
  if (this.zoomFromOrigin && element) {
1193
- this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && !poster, __slideVideoInfo && this.settings.videoMaxSize);
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 (!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize) {
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.onLgObjectLoad = function ($el, index, delay, speed, dummyImageLoaded, isFirstSlide) {
1457
- var _this = this;
1458
- if (dummyImageLoaded) {
1459
- this.LGel.trigger(lGEvents.slideItemLoad, {
1460
- index: index,
1461
- delay: delay || 0,
1462
- isFirstSlide: isFirstSlide,
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
- $el.find('.lg-object')
1466
- .first()
1467
- .on('load.lg', function () {
1468
- _this.handleLgObjectLoad($el, index, delay, speed, dummyImageLoaded, isFirstSlide);
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.handleLgObjectLoad = function ($el, index, delay, speed, dummyImageLoaded, isFirstSlide) {
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
- $el.addClass('lg-complete lg-complete_');
1483
- if (!dummyImageLoaded) {
1484
- _this.LGel.trigger(lGEvents.slideItemLoad, {
1485
- index: index,
1486
- delay: delay || 0,
1487
- isFirstSlide: isFirstSlide,
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
- * @desc Check the given src is video
1494
- * @param {String} src
1495
- * @return {Object} video type
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 = _this.isVideo(element.src, index);
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, false, videoInfo && this.settings.videoMaxSize);
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 (!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize) {
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
- $currentSlide
1636
- .find('.lg-img-wrap')
1637
- .append(utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
1638
- if (srcset || sources) {
1639
- var $img = $currentSlide.find('.lg-object');
1640
- _this.initPictureFill($img);
1641
- }
1642
- _this.onLgObjectLoad($currentSlide, index, delay, _speed, true, true);
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
- else {
1650
- mediaObject.on('load.lg error.lg', function () {
1651
- _this.loadContentOnLoad(index, $currentSlide, _speed);
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.onLgObjectLoad($currentSlide, index, delay, _speed, false, isFirstSlide);
1660
- // @todo check load state for html5 videos
1661
- if (videoInfo && videoInfo.html5 && !poster) {
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
- LightGallery.prototype.loadContentOnLoad = function (index, $currentSlide, speed) {
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, false, videoInfo && this.settings.videoMaxSize);
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
- setTimeout(function () {
1921
- if (_this.lGalleryOn) {
1961
+ else {
1962
+ setTimeout(function () {
1922
1963
  _this.loadContent(index, true);
1923
- }
1924
- // Add title if this.settings.appendSubHtmlTo === lg-sub-html
1925
- if (_this.settings.appendSubHtmlTo !== '.lg-item') {
1926
- _this.addHtml(index);
1927
- }
1928
- }, (this.lGalleryOn ? this.settings.speed + 50 : 50) + (fromTouch ? 0 : this.settings.slideDelay));
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
- this.outer.on('mousewheel.lg', function (e) {
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
- if (e.deltaY > 0) {
2372
- _this.goToPrevSlide();
2413
+ e.preventDefault();
2414
+ var now = new Date().getTime();
2415
+ if (now - lastCall < 1000) {
2416
+ return;
2373
2417
  }
2374
- else {
2418
+ lastCall = now;
2419
+ if (e.deltaY > 0) {
2375
2420
  _this.goToNextSlide();
2376
2421
  }
2377
- e.preventDefault();
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 && !poster, __slideVideoInfo && poster && this.settings.videoMaxSize);
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) {