lightgallery 2.3.0-beta → 2.3.0-beta.4

package/vue/LightGalleryVue.umd.js

@@ -5814,9 +5814,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;
@@ -5904,6 +5901,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");
 
@@ -5924,28 +5924,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) {
@@ -6108,7 +6110,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);
+          }
         });
       });
 
@@ -6120,7 +6124,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);
+          }
         });
       });
 
@@ -6382,6 +6388,7 @@ var lgQuery_lgQuery = /*#__PURE__*/function () {
 }();
 lgQuery_lgQuery.eventListeners = {};
 function $LG(selector) {
+  initLgPolyfills();
   return new lgQuery_lgQuery(selector);
 }
 // CONCATENATED MODULE: ../src/lg-utils.ts
@@ -6398,6 +6405,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) {
@@ -6417,15 +6425,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;
     }
 
@@ -6627,6 +6633,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);
@@ -6641,7 +6686,7 @@ var lightGalleryCoreSettings = {
   addClass: '',
   startClass: 'lg-start-zoom',
   backdropDuration: 300,
-  container: document.body,
+  container: '',
   startAnimationDuration: 400,
   zoomFromOrigin: true,
   hideBarsDelay: 0,
@@ -6670,7 +6715,6 @@ var lightGalleryCoreSettings = {
   subHtmlSelectorRelative: false,
   preload: 2,
   numberOfSlideItemsInDom: 10,
-  showAfterLoad: true,
   selector: '',
   selectWithin: '',
   nextHtml: '',
@@ -6739,7 +6783,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
@@ -6989,10 +7032,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');
@@ -7015,13 +7054,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);
@@ -7214,12 +7252,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);
       }
 
@@ -7505,7 +7541,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);
@@ -7515,94 +7551,73 @@ 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
 
   }, {
     key: "addSlideVideoInfo",
     value: function addSlideVideoInfo(items) {
-      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);
       });
     }
     /**
@@ -7615,7 +7630,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "loadContent",
     value: function loadContent(index, rec) {
-      var _this10 = this;
+      var _this9 = this;
 
       var currentGalleryItem = this.galleryItems[index];
       var $currentSlide = $LG(this.getSlideItemId(index));
@@ -7653,7 +7668,7 @@ 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);
         }
 
@@ -7689,8 +7704,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
             index: index,
             src: src,
             html5Video: _html5Video,
-            hasPoster: !!poster,
-            isFirstSlide: isFirstSlide
+            hasPoster: !!poster
           });
         }
 
@@ -7709,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 (_this9.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);
+                _this9.initPictureFill(_$img);
+              }
             }
 
-            _this10.onLgObjectLoad($currentSlide, index, delay, _speed, true, true);
+            if (_this9.getSlideType(currentGalleryItem) === 'image' || _this9.getSlideType(currentGalleryItem) === 'video' && poster) {
+              _this9.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);
+              _this9.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () {
+                _this9.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
+              }, function () {
+                _this9.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
               });
             }
           }, this.settings.startAnimationDuration + 100);
@@ -7744,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
 
 
@@ -7764,33 +7778,41 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       if (rec === true) {
         if (!$currentSlide.hasClass('lg-complete_')) {
           $currentSlide.find('.lg-object').first().on('load.lg error.lg', function () {
-            _this10.preload(index);
+            _this9.preload(index);
           });
         } else {
           this.preload(index);
         }
       }
     }
+    /**
+     * @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) {
-      var _this11 = this;
+    key: "loadContentOnFirstSlideLoad",
+    value: function loadContentOnFirstSlideLoad(index, $currentSlide, speed) {
+      var _this10 = this;
 
       setTimeout(function () {
         $currentSlide.find('.lg-dummy-img').remove();
         $currentSlide.removeClass('lg-first-slide');
 
-        _this11.outer.removeClass('lg-first-slide-loading');
+        _this10.outer.removeClass('lg-first-slide-loading');
 
-        _this11.isDummyImageRemoved = true;
+        _this10.isDummyImageRemoved = true;
 
-        _this11.preload(index);
+        _this10.preload(index);
       }, speed + 300);
     }
   }, {
     key: "getItemsToBeInsertedToDom",
     value: function getItemsToBeInsertedToDom(index, prevIndex) {
-      var _this12 = this;
+      var _this11 = this;
 
       var numberOfItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       var itemsToBeInsertedToDom = []; // Minimum 2 items should be there
@@ -7801,7 +7823,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
       if (this.galleryItems.length <= 3) {
         this.galleryItems.forEach(function (_element, index) {
-          itemsToBeInsertedToDom.push("lg-item-".concat(_this12.lgId, "-").concat(index));
+          itemsToBeInsertedToDom.push("lg-item-".concat(_this11.lgId, "-").concat(index));
         });
         return itemsToBeInsertedToDom;
       }
@@ -7845,12 +7867,12 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "organizeSlideItems",
     value: function organizeSlideItems(index, prevIndex) {
-      var _this13 = this;
+      var _this12 = this;
 
       var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, prevIndex, this.settings.numberOfSlideItemsInDom);
       itemsToBeInsertedToDom.forEach(function (item) {
-        if (_this13.currentItemsInDom.indexOf(item) === -1) {
-          _this13.$inner.append("<div id=\"".concat(item, "\" class=\"lg-item\"></div>"));
+        if (_this12.currentItemsInDom.indexOf(item) === -1) {
+          _this12.$inner.append("<div id=\"".concat(item, "\" class=\"lg-item\"></div>"));
         }
       });
       this.currentItemsInDom.forEach(function (item) {
@@ -7901,7 +7923,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "makeSlideAnimation",
     value: function makeSlideAnimation(direction, currentSlideItem, previousSlideItem) {
-      var _this14 = this;
+      var _this13 = this;
 
       if (this.lGalleryOn) {
         previousSlideItem.addClass('lg-slide-progress');
@@ -7909,9 +7931,9 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
       setTimeout(function () {
         // remove all transitions
-        _this14.outer.addClass('lg-no-trans');
+        _this13.outer.addClass('lg-no-trans');
 
-        _this14.outer.find('.lg-item').removeClass('lg-prev-slide lg-next-slide');
+        _this13.outer.find('.lg-item').removeClass('lg-prev-slide lg-next-slide');
 
         if (direction === 'prev') {
           //prevslide
@@ -7925,11 +7947,11 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
 
         setTimeout(function () {
-          _this14.outer.find('.lg-item').removeClass('lg-current');
+          _this13.outer.find('.lg-item').removeClass('lg-current');
 
           currentSlideItem.addClass('lg-current'); // reset all transitions
 
-          _this14.outer.removeClass('lg-no-trans');
+          _this13.outer.removeClass('lg-no-trans');
         }, 50);
       }, this.lGalleryOn ? this.settings.slideDelay : 0);
     }
@@ -7950,7 +7972,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "slide",
     value: function slide(index, fromTouch, fromThumb, direction) {
-      var _this15 = this;
+      var _this14 = this;
 
       var prevIndex = this.getPreviousSlideIndex();
       this.currentItemsInDom = this.organizeSlideItems(index, prevIndex); // Prevent multiple call, Required for hsh plugin
@@ -7977,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);
         }
 
@@ -8036,23 +8058,22 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
         if (!this.lGalleryOn) {
           this.loadContent(index, true);
-        }
+        } else {
+          setTimeout(function () {
+            _this14.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 (_this14.settings.appendSubHtmlTo !== '.lg-item') {
+              _this14.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;
+          _this14.lgBusy = false;
           previousSlideItem.removeClass('lg-slide-progress');
 
-          _this15.LGel.trigger(lGEvents.afterSlide, {
+          _this14.LGel.trigger(lGEvents.afterSlide, {
             prevIndex: prevIndex,
             index: index,
             fromTouch: fromTouch,
@@ -8139,7 +8160,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "touchEnd",
     value: function touchEnd(endCoords, startCoords, event) {
-      var _this16 = this;
+      var _this15 = this;
 
       var distance; // keep slide animation for any mode while dragg/swipe
 
@@ -8149,61 +8170,61 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
 
       setTimeout(function () {
-        _this16.$container.removeClass('lg-dragging-vertical');
+        _this15.$container.removeClass('lg-dragging-vertical');
 
-        _this16.outer.removeClass('lg-dragging lg-hide-items').addClass('lg-components-open');
+        _this15.outer.removeClass('lg-dragging lg-hide-items').addClass('lg-components-open');
 
         var triggerClick = true;
 
-        if (_this16.swipeDirection === 'horizontal') {
+        if (_this15.swipeDirection === 'horizontal') {
           distance = endCoords.pageX - startCoords.pageX;
           var distanceAbs = Math.abs(endCoords.pageX - startCoords.pageX);
 
-          if (distance < 0 && distanceAbs > _this16.settings.swipeThreshold) {
-            _this16.goToNextSlide(true);
+          if (distance < 0 && distanceAbs > _this15.settings.swipeThreshold) {
+            _this15.goToNextSlide(true);
 
             triggerClick = false;
-          } else if (distance > 0 && distanceAbs > _this16.settings.swipeThreshold) {
-            _this16.goToPrevSlide(true);
+          } else if (distance > 0 && distanceAbs > _this15.settings.swipeThreshold) {
+            _this15.goToPrevSlide(true);
 
             triggerClick = false;
           }
-        } else if (_this16.swipeDirection === 'vertical') {
+        } else if (_this15.swipeDirection === 'vertical') {
           distance = Math.abs(endCoords.pageY - startCoords.pageY);
 
-          if (_this16.settings.closable && _this16.settings.swipeToClose && distance > 100) {
-            _this16.closeGallery();
+          if (_this15.settings.closable && _this15.settings.swipeToClose && distance > 100) {
+            _this15.closeGallery();
 
             return;
           } else {
-            _this16.$backdrop.css('opacity', 1);
+            _this15.$backdrop.css('opacity', 1);
           }
         }
 
-        _this16.outer.find('.lg-item').removeAttr('style');
+        _this15.outer.find('.lg-item').removeAttr('style');
 
         if (triggerClick && Math.abs(endCoords.pageX - startCoords.pageX) < 5) {
           // Trigger click if distance is less than 5 pix
           var target = $LG(event.target);
 
-          if (_this16.isPosterElement(target)) {
-            _this16.LGel.trigger(lGEvents.posterClick);
+          if (_this15.isPosterElement(target)) {
+            _this15.LGel.trigger(lGEvents.posterClick);
           }
         }
 
-        _this16.swipeDirection = undefined;
+        _this15.swipeDirection = undefined;
       }); // remove slide class once drag/swipe is completed if mode is not slide
 
       setTimeout(function () {
-        if (!_this16.outer.hasClass('lg-dragging') && _this16.settings.mode !== 'lg-slide') {
-          _this16.outer.removeClass('lg-slide');
+        if (!_this15.outer.hasClass('lg-dragging') && _this15.settings.mode !== 'lg-slide') {
+          _this15.outer.removeClass('lg-slide');
         }
       }, this.settings.speed + 100);
     }
   }, {
     key: "enableSwipe",
     value: function enableSwipe() {
-      var _this17 = this;
+      var _this16 = this;
 
       var startCoords = {};
       var endCoords = {};
@@ -8212,15 +8233,15 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
       if (this.settings.enableSwipe) {
         this.$inner.on('touchstart.lg', function (e) {
-          _this17.dragOrSwipeEnabled = true;
+          _this16.dragOrSwipeEnabled = true;
 
-          var $item = _this17.getSlideItem(_this17.index);
+          var $item = _this16.getSlideItem(_this16.index);
 
-          if (($LG(e.target).hasClass('lg-item') || $item.get().contains(e.target)) && !_this17.outer.hasClass('lg-zoomed') && !_this17.lgBusy && e.targetTouches.length === 1) {
+          if (($LG(e.target).hasClass('lg-item') || $item.get().contains(e.target)) && !_this16.outer.hasClass('lg-zoomed') && !_this16.lgBusy && e.targetTouches.length === 1) {
             isSwiping = true;
-            _this17.touchAction = 'swipe';
+            _this16.touchAction = 'swipe';
 
-            _this17.manageSwipeClass();
+            _this16.manageSwipeClass();
 
             startCoords = {
               pageX: e.targetTouches[0].pageX,
@@ -8229,32 +8250,32 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           }
         });
         this.$inner.on('touchmove.lg', function (e) {
-          if (isSwiping && _this17.touchAction === 'swipe' && e.targetTouches.length === 1) {
+          if (isSwiping && _this16.touchAction === 'swipe' && e.targetTouches.length === 1) {
             endCoords = {
               pageX: e.targetTouches[0].pageX,
               pageY: e.targetTouches[0].pageY
             };
 
-            _this17.touchMove(startCoords, endCoords, e);
+            _this16.touchMove(startCoords, endCoords, e);
 
             isMoved = true;
           }
         });
         this.$inner.on('touchend.lg', function (event) {
-          if (_this17.touchAction === 'swipe') {
+          if (_this16.touchAction === 'swipe') {
             if (isMoved) {
               isMoved = false;
 
-              _this17.touchEnd(endCoords, startCoords, event);
+              _this16.touchEnd(endCoords, startCoords, event);
             } else if (isSwiping) {
               var target = $LG(event.target);
 
-              if (_this17.isPosterElement(target)) {
-                _this17.LGel.trigger(lGEvents.posterClick);
+              if (_this16.isPosterElement(target)) {
+                _this16.LGel.trigger(lGEvents.posterClick);
               }
             }
 
-            _this17.touchAction = undefined;
+            _this16.touchAction = undefined;
             isSwiping = false;
           }
         });
@@ -8263,7 +8284,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "enableDrag",
     value: function enableDrag() {
-      var _this18 = this;
+      var _this17 = this;
 
       var startCoords = {};
       var endCoords = {};
@@ -8272,16 +8293,16 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
 
       if (this.settings.enableDrag) {
         this.outer.on('mousedown.lg', function (e) {
-          _this18.dragOrSwipeEnabled = true;
+          _this17.dragOrSwipeEnabled = true;
 
-          var $item = _this18.getSlideItem(_this18.index);
+          var $item = _this17.getSlideItem(_this17.index);
 
           if ($LG(e.target).hasClass('lg-item') || $item.get().contains(e.target)) {
-            if (!_this18.outer.hasClass('lg-zoomed') && !_this18.lgBusy) {
+            if (!_this17.outer.hasClass('lg-zoomed') && !_this17.lgBusy) {
               e.preventDefault();
 
-              if (!_this18.lgBusy) {
-                _this18.manageSwipeClass();
+              if (!_this17.lgBusy) {
+                _this17.manageSwipeClass();
 
                 startCoords = {
                   pageX: e.pageX,
@@ -8289,31 +8310,31 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
                 };
                 isDraging = true; // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
 
-                _this18.outer.get().scrollLeft += 1;
-                _this18.outer.get().scrollLeft -= 1; // *
+                _this17.outer.get().scrollLeft += 1;
+                _this17.outer.get().scrollLeft -= 1; // *
 
-                _this18.outer.removeClass('lg-grab').addClass('lg-grabbing');
+                _this17.outer.removeClass('lg-grab').addClass('lg-grabbing');
 
-                _this18.LGel.trigger(lGEvents.dragStart);
+                _this17.LGel.trigger(lGEvents.dragStart);
               }
             }
           }
         });
         $LG(window).on("mousemove.lg.global".concat(this.lgId), function (e) {
-          if (isDraging && _this18.lgOpened) {
+          if (isDraging && _this17.lgOpened) {
             isMoved = true;
             endCoords = {
               pageX: e.pageX,
               pageY: e.pageY
             };
 
-            _this18.touchMove(startCoords, endCoords);
+            _this17.touchMove(startCoords, endCoords);
 
-            _this18.LGel.trigger(lGEvents.dragMove);
+            _this17.LGel.trigger(lGEvents.dragMove);
           }
         });
         $LG(window).on("mouseup.lg.global".concat(this.lgId), function (event) {
-          if (!_this18.lgOpened) {
+          if (!_this17.lgOpened) {
             return;
           }
 
@@ -8322,18 +8343,18 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           if (isMoved) {
             isMoved = false;
 
-            _this18.touchEnd(endCoords, startCoords, event);
+            _this17.touchEnd(endCoords, startCoords, event);
 
-            _this18.LGel.trigger(lGEvents.dragEnd);
-          } else if (_this18.isPosterElement(target)) {
-            _this18.LGel.trigger(lGEvents.posterClick);
+            _this17.LGel.trigger(lGEvents.dragEnd);
+          } else if (_this17.isPosterElement(target)) {
+            _this17.LGel.trigger(lGEvents.posterClick);
           } // Prevent execution on click
 
 
           if (isDraging) {
             isDraging = false;
 
-            _this18.outer.removeClass('lg-grabbing').addClass('lg-grab');
+            _this17.outer.removeClass('lg-grabbing').addClass('lg-grab');
           }
         });
       }
@@ -8341,11 +8362,11 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "triggerPosterClick",
     value: function triggerPosterClick() {
-      var _this19 = this;
+      var _this18 = this;
 
       this.$inner.on('click.lg', function (event) {
-        if (!_this19.dragOrSwipeEnabled && _this19.isPosterElement($LG(event.target))) {
-          _this19.LGel.trigger(lGEvents.posterClick);
+        if (!_this18.dragOrSwipeEnabled && _this18.isPosterElement($LG(event.target))) {
+          _this18.LGel.trigger(lGEvents.posterClick);
         }
       });
     }
@@ -8385,7 +8406,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "goToNextSlide",
     value: function goToNextSlide(fromTouch) {
-      var _this20 = this;
+      var _this19 = this;
 
       var _loop = this.settings.loop;
 
@@ -8410,7 +8431,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           } else if (this.settings.slideEndAnimation && !fromTouch) {
             this.outer.addClass('lg-right-end');
             setTimeout(function () {
-              _this20.outer.removeClass('lg-right-end');
+              _this19.outer.removeClass('lg-right-end');
             }, 400);
           }
         }
@@ -8430,7 +8451,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "goToPrevSlide",
     value: function goToPrevSlide(fromTouch) {
-      var _this21 = this;
+      var _this20 = this;
 
       var _loop = this.settings.loop;
 
@@ -8457,7 +8478,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           } else if (this.settings.slideEndAnimation && !fromTouch) {
             this.outer.addClass('lg-left-end');
             setTimeout(function () {
-              _this21.outer.removeClass('lg-left-end');
+              _this20.outer.removeClass('lg-left-end');
             }, 400);
           }
         }
@@ -8466,30 +8487,30 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "keyPress",
     value: function keyPress() {
-      var _this22 = this;
+      var _this21 = this;
 
       $LG(window).on("keydown.lg.global".concat(this.lgId), function (e) {
-        if (_this22.lgOpened && _this22.settings.escKey === true && e.keyCode === 27) {
+        if (_this21.lgOpened && _this21.settings.escKey === true && e.keyCode === 27) {
           e.preventDefault();
 
-          if (_this22.settings.allowMediaOverlap && _this22.outer.hasClass('lg-can-toggle') && _this22.outer.hasClass('lg-components-open')) {
-            _this22.outer.removeClass('lg-components-open');
+          if (_this21.settings.allowMediaOverlap && _this21.outer.hasClass('lg-can-toggle') && _this21.outer.hasClass('lg-components-open')) {
+            _this21.outer.removeClass('lg-components-open');
           } else {
-            _this22.closeGallery();
+            _this21.closeGallery();
           }
         }
 
-        if (_this22.lgOpened && _this22.galleryItems.length > 1) {
+        if (_this21.lgOpened && _this21.galleryItems.length > 1) {
           if (e.keyCode === 37) {
             e.preventDefault();
 
-            _this22.goToPrevSlide();
+            _this21.goToPrevSlide();
           }
 
           if (e.keyCode === 39) {
             e.preventDefault();
 
-            _this22.goToNextSlide();
+            _this21.goToNextSlide();
           }
         }
       });
@@ -8497,13 +8518,13 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "arrow",
     value: function arrow() {
-      var _this23 = this;
+      var _this22 = this;
 
       this.getElementById('lg-prev').on('click.lg', function () {
-        _this23.goToPrevSlide();
+        _this22.goToPrevSlide();
       });
       this.getElementById('lg-next').on('click.lg', function () {
-        _this23.goToNextSlide();
+        _this22.goToNextSlide();
       });
     }
   }, {
@@ -8537,20 +8558,22 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "mousewheel",
     value: function mousewheel() {
-      var _this24 = this;
+      var _this23 = this;
 
       this.outer.on('mousewheel.lg', function (e) {
-        if (!e.deltaY || _this24.galleryItems.length < 2) {
+        if (!e.deltaY || _this23.galleryItems.length < 2) {
           return;
         }
 
         if (e.deltaY > 0) {
-          _this24.goToPrevSlide();
-        } else {
-          _this24.goToNextSlide();
-        }
+          _this23.goToNextSlide();
+
+          e.preventDefault();
+        } else if (e.deltaY < 0) {
+          _this23.goToPrevSlide();
 
-        e.preventDefault();
+          e.preventDefault();
+        }
       });
     }
   }, {
@@ -8572,12 +8595,12 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "toggleMaximize",
     value: function toggleMaximize() {
-      var _this25 = this;
+      var _this24 = this;
 
       this.getElementById('lg-maximize').on('click.lg', function () {
-        _this25.$container.toggleClass('lg-inline');
+        _this24.$container.toggleClass('lg-inline');
 
-        _this25.refreshOnResize();
+        _this24.refreshOnResize();
       });
     }
   }, {
@@ -8592,12 +8615,12 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "manageCloseGallery",
     value: function manageCloseGallery() {
-      var _this26 = this;
+      var _this25 = this;
 
       if (!this.settings.closable) return;
       var mousedown = false;
       this.getElementById('lg-close').on('click.lg', function () {
-        _this26.closeGallery();
+        _this25.closeGallery();
       });
 
       if (this.settings.closeOnTap) {
@@ -8606,7 +8629,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         this.outer.on('mousedown.lg', function (e) {
           var target = $LG(e.target);
 
-          if (_this26.isSlideElement(target)) {
+          if (_this25.isSlideElement(target)) {
             mousedown = true;
           } else {
             mousedown = false;
@@ -8618,9 +8641,9 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         this.outer.on('mouseup.lg', function (e) {
           var target = $LG(e.target);
 
-          if (_this26.isSlideElement(target) && mousedown) {
-            if (!_this26.outer.hasClass('lg-dragging')) {
-              _this26.closeGallery();
+          if (_this25.isSlideElement(target) && mousedown) {
+            if (!_this25.outer.hasClass('lg-dragging')) {
+              _this25.closeGallery();
             }
           }
         });
@@ -8641,7 +8664,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "closeGallery",
     value: function closeGallery(force) {
-      var _this27 = this;
+      var _this26 = this;
 
       if (!this.lgOpened || !this.settings.closable && !force) {
         return 0;
@@ -8659,7 +8682,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);
       }
 
@@ -8690,32 +8713,32 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       this.$container.removeClass('lg-show-in'); // Once the closign animation is completed and gallery is invisible
 
       setTimeout(function () {
-        if (_this27.zoomFromOrigin && transform) {
-          _this27.outer.removeClass('lg-zoom-from-image');
+        if (_this26.zoomFromOrigin && transform) {
+          _this26.outer.removeClass('lg-zoom-from-image');
         }
 
-        _this27.$container.removeClass('lg-show'); // Need to remove inline opacity as it is used in the stylesheet as well
+        _this26.$container.removeClass('lg-show'); // Need to remove inline opacity as it is used in the stylesheet as well
 
 
-        _this27.$backdrop.removeAttr('style').css('transition-duration', _this27.settings.backdropDuration + 'ms');
+        _this26.$backdrop.removeAttr('style').css('transition-duration', _this26.settings.backdropDuration + 'ms');
 
-        _this27.outer.removeClass("lg-closing ".concat(_this27.settings.startClass));
+        _this26.outer.removeClass("lg-closing ".concat(_this26.settings.startClass));
 
-        _this27.getSlideItem(_this27.index).removeClass('lg-start-end-progress');
+        _this26.getSlideItem(_this26.index).removeClass('lg-start-end-progress');
 
-        _this27.$inner.empty();
+        _this26.$inner.empty();
 
-        if (_this27.lgOpened) {
-          _this27.LGel.trigger(lGEvents.afterClose, {
-            instance: _this27
+        if (_this26.lgOpened) {
+          _this26.LGel.trigger(lGEvents.afterClose, {
+            instance: _this26
           });
         }
 
-        if (_this27.outer.get()) {
-          _this27.outer.get().blur();
+        if (_this26.outer.get()) {
+          _this26.outer.get().blur();
         }
 
-        _this27.lgOpened = false;
+        _this26.lgOpened = false;
       }, removeTimeout + 100);
       return removeTimeout + 100;
     }
@@ -8801,21 +8824,21 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this28 = this;
+      var _this27 = this;
 
       var closeTimeout = this.closeGallery(true);
       setTimeout(function () {
-        _this28.destroyModules(true);
+        _this27.destroyModules(true);
 
-        if (!_this28.settings.dynamic) {
-          _this28.invalidateItems();
+        if (!_this27.settings.dynamic) {
+          _this27.invalidateItems();
         }
 
-        $LG(window).off(".lg.global".concat(_this28.lgId));
+        $LG(window).off(".lg.global".concat(_this27.lgId));
 
-        _this28.LGel.off('.lg');
+        _this27.LGel.off('.lg');
 
-        _this28.$container.remove();
+        _this27.$container.remove();
       }, closeTimeout);
       return closeTimeout;
     }