lightgallery 2.3.0-beta.1 → 2.3.0

package/scss/_lg-theme-default.scss

@@ -219,16 +219,23 @@
 body:not(.lg-from-hash) {
     .lg-outer {
         &.lg-start-zoom {
-            .lg-object {
-                opacity: 0;
-                will-change: opacity;
-                @include transitionCustom(
-                    opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important
-                );
-            }
-            .lg-item.lg-complete {
-                .lg-object {
-                    opacity: 1;
+            .lg-item:not(.lg-zoomable) {
+                .lg-img-wrap,
+                .lg-video-cont {
+                    opacity: 0;
+                    @include transform(scale3d(0.5, 0.5, 0.5));
+                    will-change: transform, opacity;
+                    @include transitionCustom(
+                        transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s,
+                        opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important
+                    );
+                }
+                &.lg-complete {
+                    .lg-img-wrap,
+                    .lg-video-cont {
+                        opacity: 1;
+                        @include transform(scale3d(1, 1, 1));
+                    }
                 }
             }
         }

package/scss/lightgallery-core.scss

@@ -221,30 +221,6 @@
         position: relative;
     }
 
-    &.lg-show-after-load {
-        .lg-item {
-            .lg-object,
-            .lg-video-play-button {
-                opacity: 0;
-                will-change: opacity;
-                @include transition(opacity 0.15s ease 0s);
-            }
-            &.lg-zoom-from-image {
-                .lg-object,
-                .lg-video-play-button {
-                    opacity: 1;
-                }
-            }
-
-            &.lg-complete {
-                .lg-object,
-                .lg-video-play-button {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
     // Hide title div if empty
     .lg-empty-html {
         &.lg-sub-html,

package/vue/LightGalleryVue.common.js

@@ -5805,9 +5805,6 @@ var es_array_concat = __webpack_require__("99af");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.find.js
 var es_array_find = __webpack_require__("7db0");
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.match.js
-var es_string_match = __webpack_require__("466d");
-
 // CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
 function arrayLikeToArray_arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -5895,6 +5892,9 @@ var es_array_map = __webpack_require__("d81d");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.splice.js
 var es_array_splice = __webpack_require__("a434");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.match.js
+var es_string_match = __webpack_require__("466d");
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.promise.js
 var es_promise = __webpack_require__("e6cf");
 
@@ -5915,28 +5915,30 @@ var es_regexp_to_string = __webpack_require__("25f0");
 
 
 
-(function () {
-  if (typeof window.CustomEvent === 'function') return false;
+function initLgPolyfills() {
+  (function () {
+    if (typeof window.CustomEvent === 'function') return false;
 
-  function CustomEvent(event, params) {
-    params = params || {
-      bubbles: false,
-      cancelable: false,
-      detail: null
-    };
-    var evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
+    function CustomEvent(event, params) {
+      params = params || {
+        bubbles: false,
+        cancelable: false,
+        detail: null
+      };
+      var evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+      return evt;
+    }
 
-  window.CustomEvent = CustomEvent;
-})();
+    window.CustomEvent = CustomEvent;
+  })();
 
-(function () {
-  if (!Element.prototype.matches) {
-    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-  }
-})();
+  (function () {
+    if (!Element.prototype.matches) {
+      Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    }
+  })();
+}
 
 var lgQuery_lgQuery = /*#__PURE__*/function () {
   function lgQuery(selector) {
@@ -6099,7 +6101,9 @@ var lgQuery_lgQuery = /*#__PURE__*/function () {
       this._each(function (el) {
         // IE doesn't support multiple arguments
         classNames.split(' ').forEach(function (className) {
-          el.classList.add(className);
+          if (className) {
+            el.classList.add(className);
+          }
         });
       });
 
@@ -6111,7 +6115,9 @@ var lgQuery_lgQuery = /*#__PURE__*/function () {
       this._each(function (el) {
         // IE doesn't support multiple arguments
         classNames.split(' ').forEach(function (className) {
-          el.classList.remove(className);
+          if (className) {
+            el.classList.remove(className);
+          }
         });
       });
 
@@ -6373,6 +6379,7 @@ var lgQuery_lgQuery = /*#__PURE__*/function () {
 }();
 lgQuery_lgQuery.eventListeners = {};
 function $LG(selector) {
+  initLgPolyfills();
   return new lgQuery_lgQuery(selector);
 }
 // CONCATENATED MODULE: ../src/lg-utils.ts
@@ -6389,6 +6396,7 @@ function $LG(selector) {
 
 
 
+
 var defaultDynamicOptions = ['src', 'sources', 'subHtml', 'subHtmlUrl', 'html', 'video', 'poster', 'slideName', 'responsive', 'srcset', 'sizes', 'iframe', 'downloadUrl', 'download', 'width', 'facebookShareUrl', 'tweetText', 'iframeTitle', 'twitterShareUrl', 'pinterestShareUrl', 'pinterestText', 'fbHtml', 'disqusIdentifier', 'disqusUrl']; // Convert html data-attribute to camalcase
 
 function convertToData(attr) {
@@ -6408,15 +6416,13 @@ var utils = {
   /**
    * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
    */
-  // @todo improive this
   getSize: function getSize(el, container) {
     var spacing = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    var isDisabled = arguments.length > 3 ? arguments[3] : undefined;
-    var defaultLgSize = arguments.length > 4 ? arguments[4] : undefined;
+    var defaultLgSize = arguments.length > 3 ? arguments[3] : undefined;
     var LGel = $LG(el);
     var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
 
-    if (!lgSize || isDisabled) {
+    if (!lgSize) {
       return;
     }
 
@@ -6485,9 +6491,9 @@ var utils = {
     var transform = 'translate3d(' + (x *= -1) + 'px, ' + (y *= -1) + 'px, 0) scale3d(' + scX + ', ' + scY + ', 1)';
     return transform;
   },
-  getIframeMarkup: function getIframeMarkup(iframeWidth, iframeHeight, src, iframeTitle) {
+  getIframeMarkup: function getIframeMarkup(iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
     var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
-    return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:".concat(iframeWidth, "; height: ").concat(iframeHeight, "\">\n                    <iframe class=\"lg-object\" frameborder=\"0\" ").concat(title, " src=\"").concat(src, "\"  allowfullscreen=\"true\"></iframe>\n                </div>");
+    return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:".concat(iframeWidth, "; max-width:").concat(iframeMaxWidth, "; height: ").concat(iframeHeight, "; max-height:").concat(iframeMaxHeight, "\">\n                    <iframe class=\"lg-object\" frameborder=\"0\" ").concat(title, " src=\"").concat(src, "\"  allowfullscreen=\"true\"></iframe>\n                </div>");
   },
   getImgMarkup: function getImgMarkup(index, src, altAttr, srcset, sizes, sources) {
     var srcsetAttr = srcset ? "srcset=\"".concat(srcset, "\"") : '';
@@ -6618,6 +6624,45 @@ var utils = {
   },
   isMobile: function isMobile() {
     return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  },
+
+  /**
+   * @desc Check the given src is video
+   * @param {String} src
+   * @return {Object} video type
+   * Ex:{ youtube  :  ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
+   *
+   * @todo - this information can be moved to dynamicEl to avoid frequent calls
+   */
+  isVideo: function isVideo(src, isHTML5VIdeo, index) {
+    if (!src) {
+      if (isHTML5VIdeo) {
+        return {
+          html5: true
+        };
+      } else {
+        console.error('lightGallery :- data-src is not provided on slide item ' + (index + 1) + '. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
+        return;
+      }
+    }
+
+    var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
+    var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
+    var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
+
+    if (youtube) {
+      return {
+        youtube: youtube
+      };
+    } else if (vimeo) {
+      return {
+        vimeo: vimeo
+      };
+    } else if (wistia) {
+      return {
+        wistia: wistia
+      };
+    }
   }
 };
 /* harmony default export */ var lg_utils = (utils);
@@ -6632,7 +6677,7 @@ var lightGalleryCoreSettings = {
   addClass: '',
   startClass: 'lg-start-zoom',
   backdropDuration: 300,
-  container: document.body,
+  container: '',
   startAnimationDuration: 400,
   zoomFromOrigin: true,
   hideBarsDelay: 0,
@@ -6641,6 +6686,7 @@ var lightGalleryCoreSettings = {
   supportLegacyBrowser: true,
   allowMediaOverlap: false,
   videoMaxSize: '1280-720',
+  loadYouTubePoster: true,
   defaultCaptionHeight: 0,
   ariaLabelledby: '',
   ariaDescribedby: '',
@@ -6661,7 +6707,6 @@ var lightGalleryCoreSettings = {
   subHtmlSelectorRelative: false,
   preload: 2,
   numberOfSlideItemsInDom: 10,
-  showAfterLoad: true,
   selector: '',
   selectWithin: '',
   nextHtml: '',
@@ -6669,6 +6714,8 @@ var lightGalleryCoreSettings = {
   index: 0,
   iframeWidth: '100%',
   iframeHeight: '100%',
+  iframeMaxWidth: '100%',
+  iframeMaxHeight: '100%',
   download: true,
   counter: true,
   appendCounterTo: '.lg-toolbar',
@@ -6730,7 +6777,6 @@ var lGEvents = {
 
 
 
-
  // @ref - https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
 // @ref - https://2ality.com/2017/04/setting-up-multi-platform-packages.html
 // Unique id for each gallery
@@ -6980,10 +7026,6 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         outerClassNames += 'lg-grab ';
       }
 
-      if (this.settings.showAfterLoad) {
-        outerClassNames += 'lg-show-after-load';
-      }
-
       this.outer.addClass(outerClassNames);
       this.$inner.css('transition-timing-function', this.settings.easing);
       this.$inner.css('transition-duration', this.settings.speed + 'ms');
@@ -7006,13 +7048,12 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
     value: function refreshOnResize() {
       if (this.lgOpened) {
         var currentGalleryItem = this.galleryItems[this.index];
-        var __slideVideoInfo = currentGalleryItem.__slideVideoInfo,
-            poster = currentGalleryItem.poster;
+        var __slideVideoInfo = currentGalleryItem.__slideVideoInfo;
         this.mediaContainerPosition = this.getMediaContainerPosition();
         var _this$mediaContainerP = this.mediaContainerPosition,
             top = _this$mediaContainerP.top,
             bottom = _this$mediaContainerP.bottom;
-        this.currentImageSize = lg_utils.getSize(this.items[this.index], this.outer, top + bottom, __slideVideoInfo && !poster, __slideVideoInfo && this.settings.videoMaxSize);
+        this.currentImageSize = lg_utils.getSize(this.items[this.index], this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);
 
         if (__slideVideoInfo) {
           this.resizeVideoSlide(this.index, this.currentImageSize);
@@ -7205,12 +7246,10 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         this.setMediaContainerPosition(top, bottom);
       }
 
-      var _this$galleryItems$in = this.galleryItems[index],
-          __slideVideoInfo = _this$galleryItems$in.__slideVideoInfo,
-          poster = _this$galleryItems$in.poster;
+      var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
 
       if (this.zoomFromOrigin && element) {
-        this.currentImageSize = lg_utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && !poster, __slideVideoInfo && this.settings.videoMaxSize);
+        this.currentImageSize = lg_utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);
         transform = lg_utils.getTransform(element, this.outer, top, bottom, this.currentImageSize);
       }
 
@@ -7496,7 +7535,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       var imgContent = '';
       var altAttr = alt ? 'alt="' + alt + '"' : '';
 
-      if (!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize) {
+      if (this.isFirstSlideWithZoomAnimation()) {
         imgContent = this.getDummyImageContent($currentSlide, index, altAttr);
       } else {
         imgContent = lg_utils.getImgMarkup(index, src, altAttr, srcset, sizes, sources);
@@ -7506,85 +7545,66 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       $currentSlide.prepend(imgMarkup);
     }
   }, {
-    key: "onLgObjectLoad",
-    value: function onLgObjectLoad($el, index, delay, speed, dummyImageLoaded, isFirstSlide) {
-      var _this7 = this;
+    key: "onSlideObjectLoad",
+    value: function onSlideObjectLoad($slide, isHTML5VideoWithoutPoster, onLoad, onError) {
+      var mediaObject = $slide.find('.lg-object').first();
 
-      if (dummyImageLoaded) {
-        this.LGel.trigger(lGEvents.slideItemLoad, {
-          index: index,
-          delay: delay || 0,
-          isFirstSlide: isFirstSlide
+      if (lg_utils.isImageLoaded(mediaObject.get()) || isHTML5VideoWithoutPoster) {
+        onLoad();
+      } else {
+        mediaObject.on('load.lg error.lg', function () {
+          onLoad && onLoad();
+        });
+        mediaObject.on('error.lg', function () {
+          onError && onError();
         });
       }
+    }
+    /**
+     *
+     * @param $el Current slide item
+     * @param index
+     * @param delay Delay is 0 except first time
+     * @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin
+     * @param isFirstSlide
+     */
+
+  }, {
+    key: "onLgObjectLoad",
+    value: function onLgObjectLoad(currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) {
+      var _this7 = this;
 
-      $el.find('.lg-object').first().on('load.lg', function () {
-        _this7.handleLgObjectLoad($el, index, delay, speed, dummyImageLoaded, isFirstSlide);
+      this.onSlideObjectLoad(currentSlide, isHTML5VideoWithoutPoster, function () {
+        _this7.triggerSlideItemLoad(currentSlide, index, delay, speed, isFirstSlide);
+      }, function () {
+        currentSlide.addClass('lg-complete lg-complete_');
+        currentSlide.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
       });
-      setTimeout(function () {
-        $el.find('.lg-object').first().on('error.lg', function () {
-          $el.addClass('lg-complete lg-complete_');
-          $el.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
-        });
-      }, speed);
     }
   }, {
-    key: "handleLgObjectLoad",
-    value: function handleLgObjectLoad($el, index, delay, speed, dummyImageLoaded, isFirstSlide) {
+    key: "triggerSlideItemLoad",
+    value: function triggerSlideItemLoad($currentSlide, index, delay, speed, isFirstSlide) {
       var _this8 = this;
 
+      var currentGalleryItem = this.galleryItems[index]; // Adding delay for video slides without poster for better performance and user experience
+      // Videos should start playing once once the gallery is completely loaded
+
+      var _speed = isFirstSlide && this.getSlideType(currentGalleryItem) === 'video' && !currentGalleryItem.poster ? speed : 0;
+
       setTimeout(function () {
-        $el.addClass('lg-complete lg-complete_');
+        $currentSlide.addClass('lg-complete lg-complete_');
 
-        if (!dummyImageLoaded) {
-          _this8.LGel.trigger(lGEvents.slideItemLoad, {
-            index: index,
-            delay: delay || 0,
-            isFirstSlide: isFirstSlide
-          });
-        }
-      }, speed);
+        _this8.LGel.trigger(lGEvents.slideItemLoad, {
+          index: index,
+          delay: delay || 0,
+          isFirstSlide: isFirstSlide
+        });
+      }, _speed);
     }
-    /**
-     * @desc Check the given src is video
-     * @param {String} src
-     * @return {Object} video type
-     * Ex:{ youtube  :  ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
-     *
-     * @todo - this information can be moved to dynamicEl to avoid frequent calls
-     */
-
   }, {
-    key: "isVideo",
-    value: function isVideo(src, index) {
-      if (!src) {
-        if (this.galleryItems[index].video) {
-          return {
-            html5: true
-          };
-        } else {
-          console.error('lightGallery :- data-src is not provided on slide item ' + (index + 1) + '. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
-          return;
-        }
-      }
-
-      var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
-      var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)/i);
-      var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
-
-      if (youtube) {
-        return {
-          youtube: youtube
-        };
-      } else if (vimeo) {
-        return {
-          vimeo: vimeo
-        };
-      } else if (wistia) {
-        return {
-          wistia: wistia
-        };
-      }
+    key: "isFirstSlideWithZoomAnimation",
+    value: function isFirstSlideWithZoomAnimation() {
+      return !!(!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize);
     } // Add video slideInfo
 
   }, {
@@ -7593,7 +7613,11 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       var _this9 = this;
 
       items.forEach(function (element, index) {
-        element.__slideVideoInfo = _this9.isVideo(element.src, index);
+        element.__slideVideoInfo = lg_utils.isVideo(element.src, !!element.video, index);
+
+        if (element.__slideVideoInfo && _this9.settings.loadYouTubePoster && !element.poster && element.__slideVideoInfo.youtube) {
+          element.poster = "//img.youtube.com/vi/".concat(element.__slideVideoInfo.youtube[1], "/maxresdefault.jpg");
+        }
       });
     }
     /**
@@ -7644,12 +7668,12 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           var _this$mediaContainerP3 = this.mediaContainerPosition,
               top = _this$mediaContainerP3.top,
               bottom = _this$mediaContainerP3.bottom;
-          var videoSize = lg_utils.getSize(this.items[index], this.outer, top + bottom, false, videoInfo && this.settings.videoMaxSize);
+          var videoSize = lg_utils.getSize(this.items[index], this.outer, top + bottom, videoInfo && this.settings.videoMaxSize);
           lgVideoStyle = this.getVideoContStyle(videoSize);
         }
 
         if (iframe) {
-          var markup = lg_utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, src, currentGalleryItem.iframeTitle);
+          var markup = lg_utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle);
           $currentSlide.prepend(markup);
         } else if (poster) {
           var dummyImg = '';
@@ -7680,8 +7704,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
             index: index,
             src: src,
             html5Video: _html5Video,
-            hasPoster: !!poster,
-            isFirstSlide: isFirstSlide
+            hasPoster: !!poster
           });
         }
 
@@ -7700,33 +7723,34 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
       if (delay && !$LG(document.body).hasClass('lg-from-hash')) {
         _speed = delay;
-      } // Only for first slide
+      } // Only for first slide and zoomFromOrigin is enabled
 
 
-      if (!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize) {
+      if (this.isFirstSlideWithZoomAnimation()) {
         setTimeout(function () {
           $currentSlide.removeClass('lg-start-end-progress lg-start-progress').removeAttr('style');
         }, this.settings.startAnimationDuration + 100);
 
         if (!$currentSlide.hasClass('lg-loaded')) {
           setTimeout(function () {
-            $currentSlide.find('.lg-img-wrap').append(lg_utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
+            if (_this10.getSlideType(currentGalleryItem) === 'image') {
+              $currentSlide.find('.lg-img-wrap').append(lg_utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
 
-            if (srcset || sources) {
-              var _$img = $currentSlide.find('.lg-object');
+              if (srcset || sources) {
+                var _$img = $currentSlide.find('.lg-object');
 
-              _this10.initPictureFill(_$img);
+                _this10.initPictureFill(_$img);
+              }
             }
 
-            _this10.onLgObjectLoad($currentSlide, index, delay, _speed, true, true);
+            if (_this10.getSlideType(currentGalleryItem) === 'image' || _this10.getSlideType(currentGalleryItem) === 'video' && poster) {
+              _this10.onLgObjectLoad($currentSlide, index, delay, _speed, true, false); // load remaining slides once the slide is completely loaded
 
-            var mediaObject = $currentSlide.find('.lg-object').first();
 
-            if (lg_utils.isImageLoaded(mediaObject.get())) {
-              _this10.loadContentOnLoad(index, $currentSlide, _speed);
-            } else {
-              mediaObject.on('load.lg error.lg', function () {
-                _this10.loadContentOnLoad(index, $currentSlide, _speed);
+              _this10.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () {
+                _this10.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
+              }, function () {
+                _this10.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
               });
             }
           }, this.settings.startAnimationDuration + 100);
@@ -7735,10 +7759,9 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
 
       $currentSlide.addClass('lg-loaded');
-      this.onLgObjectLoad($currentSlide, index, delay, _speed, false, isFirstSlide); // @todo check load state for html5 videos
 
-      if (videoInfo && videoInfo.html5 && !poster) {
-        $currentSlide.addClass('lg-complete lg-complete_');
+      if (!this.isFirstSlideWithZoomAnimation() || this.getSlideType(currentGalleryItem) === 'video' && !poster) {
+        this.onLgObjectLoad($currentSlide, index, delay, _speed, isFirstSlide, !!(videoInfo && videoInfo.html5 && !poster));
       } // When gallery is opened once content is loaded (second time) need to add lg-complete class for css styling
 
 
@@ -7762,9 +7785,17 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         }
       }
     }
+    /**
+     * @desc Remove dummy image content and load next slides
+     * Called only for the first time if zoomFromOrigin animation is enabled
+     * @param index
+     * @param $currentSlide
+     * @param speed
+     */
+
   }, {
-    key: "loadContentOnLoad",
-    value: function loadContentOnLoad(index, $currentSlide, speed) {
+    key: "loadContentOnFirstSlideLoad",
+    value: function loadContentOnFirstSlideLoad(index, $currentSlide, speed) {
       var _this11 = this;
 
       setTimeout(function () {
@@ -7968,7 +7999,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           var _this$mediaContainerP4 = this.mediaContainerPosition,
               top = _this$mediaContainerP4.top,
               bottom = _this$mediaContainerP4.bottom;
-          var videoSize = lg_utils.getSize(this.items[index], this.outer, top + bottom, false, videoInfo && this.settings.videoMaxSize);
+          var videoSize = lg_utils.getSize(this.items[index], this.outer, top + bottom, videoInfo && this.settings.videoMaxSize);
           this.resizeVideoSlide(index, videoSize);
         }
 
@@ -8027,18 +8058,17 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
         if (!this.lGalleryOn) {
           this.loadContent(index, true);
-        }
+        } else {
+          setTimeout(function () {
+            _this15.loadContent(index, true); // Add title if this.settings.appendSubHtmlTo === lg-sub-html
 
-        setTimeout(function () {
-          if (_this15.lGalleryOn) {
-            _this15.loadContent(index, true);
-          } // Add title if this.settings.appendSubHtmlTo === lg-sub-html
 
+            if (_this15.settings.appendSubHtmlTo !== '.lg-item') {
+              _this15.addHtml(index);
+            }
+          }, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay));
+        }
 
-          if (_this15.settings.appendSubHtmlTo !== '.lg-item') {
-            _this15.addHtml(index);
-          }
-        }, (this.lGalleryOn ? this.settings.speed + 50 : 50) + (fromTouch ? 0 : this.settings.slideDelay));
         setTimeout(function () {
           _this15.lgBusy = false;
           previousSlideItem.removeClass('lg-slide-progress');
@@ -8530,18 +8560,26 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
     value: function mousewheel() {
       var _this24 = this;
 
-      this.outer.on('mousewheel.lg', function (e) {
+      var lastCall = 0;
+      this.outer.on('wheel.lg', function (e) {
         if (!e.deltaY || _this24.galleryItems.length < 2) {
           return;
         }
 
+        e.preventDefault();
+        var now = new Date().getTime();
+
+        if (now - lastCall < 1000) {
+          return;
+        }
+
+        lastCall = now;
+
         if (e.deltaY > 0) {
-          _this24.goToPrevSlide();
-        } else {
           _this24.goToNextSlide();
+        } else if (e.deltaY < 0) {
+          _this24.goToPrevSlide();
         }
-
-        e.preventDefault();
       });
     }
   }, {
@@ -8650,7 +8688,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         var _this$galleryItems$th = this.galleryItems[this.index],
             __slideVideoInfo = _this$galleryItems$th.__slideVideoInfo,
             poster = _this$galleryItems$th.poster;
-        var imageSize = lg_utils.getSize(currentItem, this.outer, top + bottom, __slideVideoInfo && !poster, __slideVideoInfo && poster && this.settings.videoMaxSize);
+        var imageSize = lg_utils.getSize(currentItem, this.outer, top + bottom, __slideVideoInfo && poster && this.settings.videoMaxSize);
         transform = lg_utils.getTransform(currentItem, this.outer, top, bottom, imageSize);
       }