lightgallery 2.9.0 → 3.0.0-beta.3

package/dist/lightgallery.umd.js

@@ -0,0 +1,3800 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define(factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global.lightGallery = factory());
+})(this, function() {
+  "use strict";/*!
+ * lightgallery | 3.0.0-beta.3 | October 1st 2026
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+  function getVideoInfo(src, hasHtml5Video) {
+    if (!src) {
+      return hasHtml5Video ? { html5: true } : void 0;
+    }
+    const youtube = src.match(
+      /\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-_%]+)([&|?][\S]*)*/i
+    );
+    if (youtube) {
+      return { youtube: [...youtube] };
+    }
+    const vimeo = src.match(
+      /\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i
+    );
+    if (vimeo) {
+      return { vimeo: [...vimeo] };
+    }
+    const wistia = src.match(
+      /https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/
+    );
+    if (wistia) {
+      return { wistia: [...wistia] };
+    }
+    return hasHtml5Video ? { html5: true } : void 0;
+  }
+  function getYouTubePosterUrl(videoInfo) {
+    if (!(videoInfo == null ? void 0 : videoInfo.youtube)) {
+      return void 0;
+    }
+    return `//img.youtube.com/vi/${videoInfo.youtube[1]}/maxresdefault.jpg`;
+  }
+  function getFacadePoster(item, videoInfo, loadYouTubePoster) {
+    if (!videoInfo || videoInfo.html5) {
+      return item.poster || void 0;
+    }
+    return item.poster || (loadYouTubePoster ? getYouTubePosterUrl(videoInfo) : void 0) || item.thumb || void 0;
+  }
+  const TESTING_LICENSE_KEY = "0000-0000-000-0000";
+  const LICENSE_KEY_PREFIX = "LIG";
+  const LICENSE_DOCS = "https://www.lightgalleryjs.com/docs/license/";
+  function checkLicenseKey(licenseKey) {
+    const key = (licenseKey != null ? licenseKey : "").trim();
+    if (!key) {
+      return {
+        level: "error",
+        message: `lightGallery: please provide a valid license key. See ${LICENSE_DOCS}`
+      };
+    }
+    if (key === TESTING_LICENSE_KEY) {
+      return {
+        level: "warn",
+        message: `lightGallery: ${key} license key is not valid for production use. See ${LICENSE_DOCS}`
+      };
+    }
+    if (!key.startsWith(LICENSE_KEY_PREFIX)) {
+      return {
+        level: "warn",
+        message: `lightGallery: this license key is for v1 or v2 and is not valid for v3. Please upgrade to a v3 license. See ${LICENSE_DOCS}`
+      };
+    }
+    return null;
+  }
+  let pageLicenseKey;
+  const loggedNotices = /* @__PURE__ */ new Set();
+  function setLicenseKey(licenseKey) {
+    pageLicenseKey = licenseKey;
+  }
+  function resolveLicenseKey(instanceKey) {
+    const own = (instanceKey != null ? instanceKey : "").trim();
+    if (pageLicenseKey !== void 0 && (!own || own === TESTING_LICENSE_KEY)) {
+      return pageLicenseKey;
+    }
+    return instanceKey != null ? instanceKey : TESTING_LICENSE_KEY;
+  }
+  function takeLicenseNotice(instanceKey) {
+    const notice = checkLicenseKey(resolveLicenseKey(instanceKey));
+    if (!notice || loggedNotices.has(notice.message)) return null;
+    loggedNotices.add(notice.message);
+    return notice;
+  }
+  function formatSlideAnnouncement(options) {
+    const base = options.template.replace("{index}", String(options.index)).replace("{total}", String(options.total));
+    const caption = (options.caption || "").replace(/\s+/g, " ").trim();
+    return caption ? `${base}, ${caption}` : base;
+  }
+  const SPRING_SETTLE_DAMPING = 1;
+  const SPRING_NATURAL_FREQUENCY = 12;
+  const DECELERATION_RATE = 0.995;
+  function project(velocity, decelerationRate = DECELERATION_RATE) {
+    return velocity * decelerationRate / (1 - decelerationRate);
+  }
+  function stepSpring(state, target, dtMs, {
+    dampingRatio = SPRING_SETTLE_DAMPING,
+    naturalFrequency = SPRING_NATURAL_FREQUENCY
+  } = {}) {
+    const t = dtMs / 1e3;
+    const w0 = naturalFrequency;
+    const zeta = Math.min(dampingRatio, 1);
+    const x0 = state.position - target;
+    const v0 = state.velocity * 1e3;
+    const decay = Math.exp(-zeta * w0 * t);
+    let x;
+    let v;
+    if (zeta < 1) {
+      const wd = w0 * Math.sqrt(1 - zeta * zeta);
+      const a = x0;
+      const b = (v0 + zeta * w0 * x0) / wd;
+      const cos = Math.cos(wd * t);
+      const sin = Math.sin(wd * t);
+      x = decay * (a * cos + b * sin);
+      v = decay * ((b * wd - zeta * w0 * a) * cos - (a * wd + zeta * w0 * b) * sin);
+    } else {
+      const b = v0 + w0 * x0;
+      x = decay * (x0 + b * t);
+      v = decay * (b - w0 * (x0 + b * t));
+    }
+    return { position: target + x, velocity: v / 1e3 };
+  }
+  function isSpringSettled(state, target, restDelta = 0.3, restVelocity = 0.012) {
+    return Math.abs(state.position - target) < restDelta && Math.abs(state.velocity) < restVelocity;
+  }
+  const SWIPE_AXIS_THRESHOLD = 10;
+  const FLICK_VELOCITY = 0.5;
+  const FLICK_MIN_DISTANCE = 20;
+  const VERTICAL_CLOSE_THRESHOLD = 100;
+  const VERTICAL_CLOSE_RATIO = 0.4;
+  const VERTICAL_CLOSE_MIN_DRAG = 40;
+  const SLIDE_EDGE_FRICTION = 0.35;
+  function getEdgeFrictionedDelta(deltaX, hasPrev, hasNext, direction = "ltr") {
+    const [towardPrev, towardNext] = direction === "rtl" ? [hasNext, hasPrev] : [hasPrev, hasNext];
+    if (deltaX > 0 && !towardPrev || deltaX < 0 && !towardNext) {
+      return deltaX * SLIDE_EDGE_FRICTION;
+    }
+    return deltaX;
+  }
+  function getSwipeAxis(deltaX, deltaY, current) {
+    if (current) {
+      return current;
+    }
+    if (Math.abs(deltaX) > SWIPE_AXIS_THRESHOLD) {
+      return "horizontal";
+    }
+    if (Math.abs(deltaY) > SWIPE_AXIS_THRESHOLD) {
+      return "vertical";
+    }
+    return void 0;
+  }
+  function getHorizontalDragTransforms(deltaX, slideWidth, direction = "ltr") {
+    const slideWidthAmount = slideWidth * 15 / 100;
+    const gutter = slideWidthAmount - Math.abs(deltaX * 10 / 100);
+    const before = `translate3d(${-slideWidth + deltaX - gutter}px, 0px, 0px)`;
+    const after = `translate3d(${slideWidth + deltaX + gutter}px, 0px, 0px)`;
+    return {
+      current: `translate3d(${deltaX}px, 0px, 0px)`,
+      // In RTL the prev slide rests to the physical right (lg-rtl.css
+      // flips the resting positions the same way).
+      prev: direction === "rtl" ? after : before,
+      next: direction === "rtl" ? before : after
+    };
+  }
+  function getVerticalDragEffects(deltaY, viewportWidth, viewportHeight) {
+    const distance = Math.abs(deltaY);
+    const scale = 1 - distance / (viewportWidth * 2);
+    return {
+      backdropOpacity: 1 - distance / viewportHeight,
+      transform: `translate3d(0px, ${deltaY}px, 0px) scale3d(${scale}, ${scale}, 1)`,
+      hideUi: distance > VERTICAL_CLOSE_THRESHOLD
+    };
+  }
+  function getSwipeReleaseVerdict({
+    deltaX,
+    velocityX,
+    threshold,
+    flickVelocity = FLICK_VELOCITY,
+    viewportWidth,
+    direction = "ltr"
+  }) {
+    const distance = Math.abs(deltaX);
+    const directionMatches = deltaX !== 0 && Math.sign(velocityX) === Math.sign(deltaX);
+    const projected = deltaX + project(velocityX);
+    const passes = distance > threshold || distance > FLICK_MIN_DISTANCE && directionMatches && Math.abs(velocityX) > flickVelocity || viewportWidth !== void 0 && distance > FLICK_MIN_DISTANCE && directionMatches && Math.abs(projected) > viewportWidth / 2;
+    if (!passes) {
+      return "stay";
+    }
+    const towardNext = direction === "rtl" ? deltaX > 0 : deltaX < 0;
+    return towardNext ? "next" : "prev";
+  }
+  function shouldCloseOnVerticalDrag(deltaY, velocityY, viewportHeight, options) {
+    if (!options.closable || !options.swipeToClose || deltaY === 0) {
+      return false;
+    }
+    if (Math.abs(deltaY) < VERTICAL_CLOSE_MIN_DRAG) {
+      return false;
+    }
+    const projected = deltaY + project(velocityY);
+    return Math.sign(projected) === Math.sign(deltaY) && Math.abs(projected) > VERTICAL_CLOSE_RATIO * viewportHeight;
+  }
+  function resolveSwipeTarget(verdict, currentIndex, slidesCount, loop) {
+    if (verdict === "stay") {
+      return null;
+    }
+    const touchLoop = loop && slidesCount >= 3;
+    if (verdict === "next") {
+      if (currentIndex + 1 < slidesCount) {
+        return currentIndex + 1;
+      }
+      return touchLoop ? 0 : null;
+    }
+    if (currentIndex > 0) {
+      return currentIndex - 1;
+    }
+    return touchLoop ? slidesCount - 1 : null;
+  }
+  function parseImageSize(lgSize, viewportWidth) {
+    if (!lgSize) {
+      return void 0;
+    }
+    let size = lgSize;
+    const responsiveSizes = lgSize.split(",");
+    if (responsiveSizes[1]) {
+      for (let i = 0; i < responsiveSizes.length; i++) {
+        const candidate = responsiveSizes[i].trim();
+        const responsiveWidth = parseInt(candidate.split("-")[2], 10);
+        if (responsiveWidth > viewportWidth) {
+          size = candidate;
+          break;
+        }
+        if (i === responsiveSizes.length - 1) {
+          size = candidate;
+        }
+      }
+    }
+    const parts = size.trim().split("-");
+    const width = parseInt(parts[0], 10);
+    const height = parseInt(parts[1], 10);
+    if (!Number.isFinite(width) || !Number.isFinite(height)) {
+      return void 0;
+    }
+    return { width, height };
+  }
+  function fitImageSize(size, containerWidth, containerHeight) {
+    const maxWidth = Math.min(containerWidth, size.width);
+    const maxHeight = Math.min(containerHeight, size.height);
+    const ratio = Math.min(maxWidth / size.width, maxHeight / size.height);
+    return { width: size.width * ratio, height: size.height * ratio };
+  }
+  function isUsableOriginRect(rect) {
+    return !!rect && Number.isFinite(rect.left) && Number.isFinite(rect.top) && rect.width > 0 && rect.height > 0;
+  }
+  const CENTER_CLOSE_SCALE = 0.5;
+  function getCenterCloseTransform(scale = CENTER_CLOSE_SCALE) {
+    return `translate3d(0, 0, 0) scale3d(${scale}, ${scale}, 1)`;
+  }
+  function getOriginTransform(input) {
+    const { triggerRect, containerRect, top, bottom, imageSize } = input;
+    const availableWidth = containerRect.width;
+    const availableHeight = containerRect.height - (top + bottom);
+    const x = (availableWidth - triggerRect.width) / 2 - triggerRect.left + containerRect.left;
+    const y = (availableHeight - triggerRect.height) / 2 - triggerRect.top + top;
+    const scaleX = triggerRect.width / imageSize.width;
+    const scaleY = triggerRect.height / imageSize.height;
+    return `translate3d(${-x}px, ${-y}px, 0) scale3d(${scaleX}, ${scaleY}, 1)`;
+  }
+  const coreDefaultIcons = {
+    close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path transform="translate(0, 960) scale(1, -1)" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z"/></svg>',
+    // Three dots for the toolbar's More options menu button.
+    more: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><circle cx="232" cy="512" r="80"/><circle cx="512" cy="512" r="80"/><circle cx="792" cy="512" r="80"/></svg>',
+    prev: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path transform="translate(0, 960) scale(1, -1)" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z"/></svg>',
+    next: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path transform="translate(0, 960) scale(1, -1)" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z"/></svg>',
+    download: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path transform="translate(0, 960) scale(1, -1)" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z"/></svg>',
+    maximize: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path transform="translate(0, 960) scale(1, -1)" d="M793.003 768l-225.835-225.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0l225.835 225.835v-153.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 5.803-1.152 11.307-3.243 16.341s-5.163 9.728-9.216 13.781c-0.043 0.043-0.043 0.043-0.085 0.085-3.925 3.925-8.619 7.083-13.781 9.216-5.035 2.091-10.539 3.243-16.341 3.243h-256c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM230.997 85.334l225.835 225.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-225.835-225.835v153.003c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-256c0-23.552 19.115-42.667 42.667-42.667h256c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667z"/></svg>',
+    minimize: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path transform="translate(0, 960) scale(1, -1)" d="M700.331 554.667l225.835 225.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-225.835-225.835v153.003c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-256c0-5.803 1.152-11.307 3.243-16.341s5.163-9.728 9.216-13.781c0.043-0.043 0.043-0.043 0.085-0.085 3.925-3.925 8.619-7.083 13.781-9.216 5.035-2.091 10.539-3.243 16.341-3.243h256c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667zM158.165 12.502l225.835 225.835v-153.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 5.803-1.152 11.307-3.243 16.341s-5.163 9.728-9.216 13.781c-0.043 0.043-0.043 0.043-0.085 0.085-4.096 4.053-8.789 7.125-13.781 9.216-5.035 2.091-10.539 3.243-16.341 3.243h-256c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667h153.003l-225.835-225.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0z"/></svg>'
+  };
+  var __defProp$1 = Object.defineProperty;
+  var __defProps$1 = Object.defineProperties;
+  var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$1 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    if (__getOwnPropSymbols$1)
+      for (var prop of __getOwnPropSymbols$1(b)) {
+        if (__propIsEnum$1.call(b, prop))
+          __defNormalProp$1(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+  const TOOLBAR_PINNED = Number.POSITIVE_INFINITY;
+  const TOOLBAR_DEFAULT_PRIORITY = 20;
+  const PRIORITY_BY_CLASS = [
+    ["lg-close", TOOLBAR_PINNED],
+    ["lg-share", 30],
+    ["lg-autoplay-button", 30],
+    ["lg-download", 30],
+    ["lg-fullscreen", 20],
+    ["lg-toggle-thumb", 20],
+    ["lg-comment-toggle", 20],
+    ["lg-maximize", 10],
+    ["lg-rotate-left", 10],
+    ["lg-rotate-right", 10],
+    ["lg-flip-hor", 10],
+    ["lg-flip-ver", 10],
+    // Gesture duplicates go first: pinch and double-tap do the same.
+    ["lg-zoom-in", 0],
+    ["lg-zoom-out", 0],
+    ["lg-actual-size", 0]
+  ];
+  function getToolbarItemPriority(classList) {
+    const classes = new Set(classList);
+    for (const [className, priority] of PRIORITY_BY_CLASS) {
+      if (classes.has(className)) {
+        return priority;
+      }
+    }
+    return TOOLBAR_DEFAULT_PRIORITY;
+  }
+  function getToolbarOverflow({
+    available,
+    reserved,
+    moreWidth,
+    items
+  }) {
+    if (available <= 0) {
+      return [];
+    }
+    const total = items.reduce((sum, item) => sum + item.width, 0);
+    if (reserved + total <= available) {
+      return [];
+    }
+    const candidates = items.map((item, index) => __spreadProps$1(__spreadValues$1({}, item), { index })).filter((item) => item.priority !== TOOLBAR_PINNED).sort((a, b) => a.priority - b.priority || b.index - a.index);
+    let used = reserved + moreWidth + total;
+    const moved = [];
+    for (const item of candidates) {
+      if (used <= available) {
+        break;
+      }
+      moved.push(item.index);
+      used -= item.width;
+    }
+    return moved.sort((a, b) => a - b);
+  }
+  const BACKDROP_CLASS_NAMES = [
+    "lg-outer",
+    "lg-item",
+    "lg-img-wrap",
+    "lg-img-rotate"
+  ];
+  function consumeBackdropPress(event) {
+    var _a;
+    const classList = (_a = event.target) == null ? void 0 : _a.classList;
+    if (!classList || !BACKDROP_CLASS_NAMES.some((name) => classList.contains(name))) {
+      return false;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }
+  function onTransitionSettle(element, property, fallbackMs, callback) {
+    let settled = false;
+    let timer;
+    const isOwn = (event) => event.target === element && event.propertyName === property;
+    const dispose = () => {
+      clearTimeout(timer);
+      element.removeEventListener("transitionstart", onStart);
+      element.removeEventListener("transitionend", onEnd);
+    };
+    const settle = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      dispose();
+      callback();
+    };
+    const onStart = (event) => {
+      if (isOwn(event)) {
+        clearTimeout(timer);
+        timer = setTimeout(settle, fallbackMs);
+      }
+    };
+    const onEnd = (event) => {
+      if (isOwn(event)) {
+        settle();
+      }
+    };
+    element.addEventListener("transitionstart", onStart);
+    element.addEventListener("transitionend", onEnd);
+    timer = setTimeout(settle, fallbackMs);
+    return () => {
+      settled = true;
+      dispose();
+    };
+  }
+  const DECODE_TIMEOUT_MS = 500;
+  function awaitDecode(img, timeoutMs = DECODE_TIMEOUT_MS) {
+    if (typeof img.decode !== "function") {
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      let done = false;
+      const finish = () => {
+        if (!done) {
+          done = true;
+          clearTimeout(timer);
+          resolve();
+        }
+      };
+      const timer = setTimeout(finish, timeoutMs);
+      img.decode().then(finish, finish);
+    });
+  }
+  const VELOCITY_WINDOW_MS = 100;
+  const MIN_DISPLACEMENT = 1;
+  const MIN_WINDOW_SPAN_MS = 5;
+  function pushVelocitySample(samples, sample, windowMs = VELOCITY_WINDOW_MS) {
+    return [...samples.filter((s) => sample.t - s.t <= windowMs), sample];
+  }
+  function getWindowedVelocity(samples, releaseTime, windowMs = VELOCITY_WINDOW_MS) {
+    const recent = samples.filter((s) => releaseTime - s.t <= windowMs);
+    if (recent.length < 2) {
+      return { x: 0, y: 0 };
+    }
+    const first = recent[0];
+    const last = recent[recent.length - 1];
+    const dt = last.t - first.t;
+    if (dt < MIN_WINDOW_SPAN_MS) {
+      return { x: 0, y: 0 };
+    }
+    const dx = last.x - first.x;
+    const dy = last.y - first.y;
+    return {
+      x: Math.abs(dx) > MIN_DISPLACEMENT ? dx / dt : 0,
+      y: Math.abs(dy) > MIN_DISPLACEMENT ? dy / dt : 0
+    };
+  }
+  const lGEvents = {
+    afterAppendSlide: "lgAfterAppendSlide",
+    init: "lgInit",
+    hasVideo: "lgHasVideo",
+    containerResize: "lgContainerResize",
+    updateSlides: "lgUpdateSlides",
+    afterAppendSubHtml: "lgAfterAppendSubHtml",
+    beforeOpen: "lgBeforeOpen",
+    afterOpen: "lgAfterOpen",
+    slideItemLoad: "lgSlideItemLoad",
+    beforeSlide: "lgBeforeSlide",
+    afterSlide: "lgAfterSlide",
+    posterClick: "lgPosterClick",
+    dragStart: "lgDragStart",
+    dragMove: "lgDragMove",
+    dragEnd: "lgDragEnd",
+    beforeNextSlide: "lgBeforeNextSlide",
+    beforePrevSlide: "lgBeforePrevSlide",
+    beforeClose: "lgBeforeClose",
+    afterClose: "lgAfterClose"
+  };
+  const lightGalleryCoreSettings = {
+    mode: "lg-slide",
+    easing: "ease",
+    speed: 400,
+    licenseKey: "0000-0000-000-0000",
+    height: "100%",
+    width: "100%",
+    addClass: "",
+    startClass: "lg-start-zoom",
+    backdropDuration: 300,
+    container: "",
+    startAnimationDuration: 400,
+    zoomFromOrigin: true,
+    hideBarsDelay: 0,
+    showBarsAfter: 1e4,
+    slideDelay: 0,
+    allowMediaOverlap: false,
+    videoMaxSize: "1280-720",
+    loadYouTubePoster: true,
+    defaultCaptionHeight: 0,
+    ariaLabelledby: "",
+    ariaDescribedby: "",
+    ariaAnnouncements: true,
+    resetScrollPosition: true,
+    hideScrollbar: false,
+    closable: true,
+    swipeToClose: true,
+    closeOnTap: true,
+    showCloseIcon: true,
+    showMaximizeIcon: false,
+    loop: true,
+    escKey: true,
+    keyPress: true,
+    trapFocus: true,
+    controls: true,
+    slideEndAnimation: true,
+    hideControlOnEnd: false,
+    mousewheel: false,
+    direction: "ltr",
+    getCaptionFromTitleOrAlt: true,
+    appendSubHtmlTo: ".lg-sub-html",
+    subHtmlSelectorRelative: false,
+    preload: 2,
+    numberOfSlideItemsInDom: 10,
+    selector: "",
+    selectWithin: "",
+    nextHtml: "",
+    prevHtml: "",
+    index: 0,
+    iframeWidth: "100%",
+    iframeHeight: "100%",
+    iframeMaxWidth: "100%",
+    iframeMaxHeight: "100%",
+    download: true,
+    counter: true,
+    appendCounterTo: ".lg-toolbar",
+    swipeThreshold: 50,
+    flickVelocity: 0.5,
+    pinchToClose: true,
+    enableSwipe: true,
+    enableDrag: true,
+    dynamic: false,
+    dynamicEl: [],
+    extraProps: [],
+    exThumbImage: "",
+    toolbarOverflow: true,
+    showGestureButtons: true,
+    isMobile: void 0,
+    mobileSettings: {
+      controls: false,
+      showCloseIcon: false,
+      download: false,
+      showGestureButtons: false
+    },
+    plugins: [],
+    strings: {
+      closeGallery: "Close gallery",
+      toggleMaximize: "Toggle maximize",
+      previousSlide: "Previous slide",
+      nextSlide: "Next slide",
+      download: "Download",
+      playVideo: "Play video",
+      mediaLoadingFailed: "Oops... Failed to load content...",
+      galleryLabel: "Gallery",
+      slideAnnouncement: "Image {index} of {total}",
+      moreOptions: "More options",
+      share: "Share",
+      toggleThumbnails: "Toggle thumbnails",
+      toggleAutoplay: "Toggle Autoplay",
+      toggleFullscreen: "Toggle Fullscreen",
+      zoomIn: "Zoom in",
+      zoomOut: "Zoom out",
+      viewActualSize: "View actual size",
+      rotateLeft: "Rotate left",
+      rotateRight: "Rotate right",
+      flipHorizontal: "Flip horizontal",
+      flipVertical: "Flip vertical",
+      toggleComments: "Toggle Comments"
+    },
+    icons: {}
+  };
+  const schedule = typeof requestAnimationFrame === "function" ? (callback) => requestAnimationFrame(callback) : (callback) => window.setTimeout(callback, 16);
+  const cancel = typeof cancelAnimationFrame === "function" ? (handle) => cancelAnimationFrame(handle) : (handle) => window.clearTimeout(handle);
+  function toolbarButtons(toolbar, more) {
+    return Array.from(toolbar.querySelectorAll(".lg-icon")).filter(
+      (button) => {
+        var _a;
+        return button !== more && !button.closest(".lg-toolbar-menu, .lg-dropdown") && !((_a = button.parentElement) == null ? void 0 : _a.closest(".lg-icon"));
+      }
+    );
+  }
+  function visibleIconMarkup(button) {
+    var _a, _b, _c;
+    const icons = Array.from(button.querySelectorAll(".lg-ci"));
+    if (!icons.length) {
+      return (_b = (_a = button.querySelector("svg")) == null ? void 0 : _a.outerHTML) != null ? _b : "";
+    }
+    const shown = (_c = icons.find(
+      (icon) => window.getComputedStyle(icon).display !== "none"
+    )) != null ? _c : icons[0];
+    return shown.outerHTML;
+  }
+  class ToolbarOverflow {
+    constructor(toolbar, options) {
+      this.toolbar = toolbar;
+      this.options = options;
+      this.menu = null;
+      this.frame = 0;
+      this.movedSignature = "";
+      this.widths = /* @__PURE__ */ new WeakMap();
+      this.requestUpdate = () => {
+        if (this.frame) {
+          return;
+        }
+        this.frame = schedule(() => {
+          this.frame = 0;
+          this.update();
+        });
+      };
+      this.onMoreClick = () => {
+        if (this.menu) {
+          this.close(true);
+        } else {
+          this.open();
+        }
+      };
+      this.onMenuKeydown = (event) => {
+        var _a, _b, _c, _d;
+        const items = this.items();
+        const index = items.indexOf(document.activeElement);
+        switch (event.key) {
+          case "Escape":
+            this.close(true);
+            break;
+          case "ArrowDown":
+            (_a = items[(index + 1) % items.length]) == null ? void 0 : _a.focus();
+            break;
+          case "ArrowUp":
+            (_b = items[(index - 1 + items.length) % items.length]) == null ? void 0 : _b.focus();
+            break;
+          case "Home":
+            (_c = items[0]) == null ? void 0 : _c.focus();
+            break;
+          case "End":
+            (_d = items[items.length - 1]) == null ? void 0 : _d.focus();
+            break;
+          case "ArrowLeft":
+          case "ArrowRight":
+            break;
+          case "Tab":
+            this.close(false);
+            return;
+          default:
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      this.onDocumentPointerDown = (event) => {
+        var _a;
+        const target = event.target;
+        if (target && (((_a = this.menu) == null ? void 0 : _a.contains(target)) || this.more.contains(target))) {
+          return;
+        }
+        consumeBackdropPress(event);
+        this.close(false);
+      };
+      const more = document.createElement("button");
+      more.type = "button";
+      more.id = options.id;
+      more.className = "lg-more lg-icon";
+      more.hidden = true;
+      more.setAttribute("aria-label", options.label);
+      more.setAttribute("aria-haspopup", "menu");
+      more.setAttribute("aria-expanded", "false");
+      more.addEventListener("click", this.onMoreClick);
+      const close = toolbar.querySelector(".lg-close");
+      if (close) {
+        close.insertAdjacentElement("afterend", more);
+      } else {
+        toolbar.insertBefore(more, toolbar.firstChild);
+      }
+      this.more = more;
+      if (typeof ResizeObserver === "function") {
+        this.resizeObserver = new ResizeObserver(this.requestUpdate);
+        this.resizeObserver.observe(toolbar);
+      }
+      if (typeof MutationObserver === "function") {
+        this.mutationObserver = new MutationObserver((records) => {
+          if (records.some(
+            (record) => {
+              var _a, _b;
+              return !((_b = (_a = record.target).closest) == null ? void 0 : _b.call(
+                _a,
+                ".lg-toolbar-menu"
+              ));
+            }
+          )) {
+            this.requestUpdate();
+          }
+        });
+        this.mutationObserver.observe(toolbar, {
+          childList: true,
+          subtree: true
+        });
+      }
+    }
+    /** Re-measure the row and move buttons in or out of the menu. */
+    update() {
+      var _a, _b;
+      const buttons = toolbarButtons(this.toolbar, this.more);
+      buttons.forEach((button) => {
+        if (!button.hasAttribute("data-lg-overflow")) {
+          const width = button.offsetWidth;
+          if (width) {
+            this.widths.set(button, width);
+          }
+        }
+      });
+      const fallback = (_a = buttons.map((button) => this.widths.get(button)).find((width) => !!width)) != null ? _a : 0;
+      const counter = this.toolbar.querySelector(".lg-counter");
+      const moved = getToolbarOverflow({
+        available: this.toolbar.clientWidth,
+        reserved: counter ? counter.offsetWidth : 0,
+        moreWidth: (_b = this.widths.get(this.more)) != null ? _b : fallback,
+        items: buttons.map((button) => {
+          var _a2;
+          return {
+            width: (_a2 = this.widths.get(button)) != null ? _a2 : fallback,
+            priority: getToolbarItemPriority(Array.from(button.classList))
+          };
+        })
+      });
+      const overflow = new Set(moved);
+      buttons.forEach((button, index) => {
+        if (overflow.has(index)) {
+          button.setAttribute("data-lg-overflow", "");
+        } else {
+          button.removeAttribute("data-lg-overflow");
+        }
+      });
+      this.more.hidden = overflow.size === 0;
+      if (!this.more.hidden && this.more.offsetWidth) {
+        this.widths.set(this.more, this.more.offsetWidth);
+      }
+      const signature = `${buttons.length}:${moved.join(",")}`;
+      const changed = signature !== this.movedSignature;
+      this.movedSignature = signature;
+      if (!overflow.size) {
+        this.close(false);
+      } else if (this.menu && changed) {
+        this.renderMenu();
+      }
+    }
+    /** Close the menu; optionally hand focus back to the More button. */
+    close(returnFocus) {
+      if (!this.menu) {
+        return;
+      }
+      this.menu.removeEventListener("keydown", this.onMenuKeydown);
+      this.menu.remove();
+      this.menu = null;
+      document.removeEventListener(
+        "pointerdown",
+        this.onDocumentPointerDown,
+        true
+      );
+      this.more.setAttribute("aria-expanded", "false");
+      this.more.removeAttribute("aria-controls");
+      if (returnFocus) {
+        this.more.focus();
+      }
+    }
+    destroy() {
+      var _a, _b;
+      this.close(false);
+      cancel(this.frame);
+      (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+      (_b = this.mutationObserver) == null ? void 0 : _b.disconnect();
+      toolbarButtons(this.toolbar, this.more).forEach(
+        (button) => button.removeAttribute("data-lg-overflow")
+      );
+      this.more.remove();
+    }
+    open() {
+      var _a;
+      const menu = document.createElement("div");
+      menu.id = `${this.options.id}-menu`;
+      menu.className = "lg-toolbar-menu";
+      menu.setAttribute("role", "menu");
+      menu.setAttribute("aria-label", this.options.label);
+      menu.addEventListener("keydown", this.onMenuKeydown);
+      this.menu = menu;
+      this.renderMenu();
+      this.toolbar.appendChild(menu);
+      this.more.setAttribute("aria-expanded", "true");
+      this.more.setAttribute("aria-controls", menu.id);
+      document.addEventListener(
+        "pointerdown",
+        this.onDocumentPointerDown,
+        true
+      );
+      (_a = this.items()[0]) == null ? void 0 : _a.focus();
+    }
+    renderMenu() {
+      const menu = this.menu;
+      if (!menu) {
+        return;
+      }
+      menu.textContent = "";
+      toolbarButtons(this.toolbar, this.more).filter((button) => button.hasAttribute("data-lg-overflow")).forEach((button) => {
+        var _a;
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "lg-toolbar-menu-item";
+        item.setAttribute("role", "menuitem");
+        const icon = document.createElement("span");
+        icon.className = "lg-toolbar-menu-icon";
+        icon.setAttribute("aria-hidden", "true");
+        icon.innerHTML = visibleIconMarkup(button);
+        const label = document.createElement("span");
+        label.textContent = (_a = button.getAttribute("aria-label")) != null ? _a : "";
+        item.append(icon, label);
+        item.addEventListener("click", () => {
+          this.close(true);
+          button.click();
+        });
+        menu.appendChild(item);
+      });
+    }
+    items() {
+      return this.menu ? Array.from(
+        this.menu.querySelectorAll('[role="menuitem"]')
+      ) : [];
+    }
+  }
+  const ICON_TARGETS = [
+    { selector: ".lg-close", names: ["close"] },
+    { selector: ".lg-prev", names: ["prev"] },
+    { selector: ".lg-next", names: ["next"] },
+    { selector: ".lg-download", names: ["download"] },
+    { selector: ".lg-more", names: ["more"] },
+    // Shown while `.lg-inline` (prompting maximize) / after maximizing.
+    { selector: ".lg-maximize", names: ["maximize", "minimize"] },
+    // The actual-size button's CLASS toggles between the two zoom
+    // classes as the zoom state changes (2.x swapped the glyph that
+    // way), it carries BOTH zoom icons and the class picks one in
+    // CSS. Listed before the class-based zoom targets so the id match
+    // claims it first (the pass skips already-processed elements).
+    { selector: '[id^="lg-actual-size-"]', names: ["zoomIn", "zoomOut"] },
+    { selector: ".lg-zoom-in", names: ["zoomIn"] },
+    { selector: ".lg-zoom-out", names: ["zoomOut"] },
+    // No '.lg-actual-size' target: vanilla's actual-size BUTTON never
+    // carries that class (it rides the zoom classes above; the outer
+    // gets `lg-actual-size` as a zoom-state class after build). The
+    // `actualSize` name serves the framework ports' static button.
+    { selector: ".lg-rotate-left", names: ["rotateLeft"] },
+    { selector: ".lg-rotate-right", names: ["rotateRight"] },
+    { selector: ".lg-flip-hor", names: ["flipHorizontal"] },
+    { selector: ".lg-flip-ver", names: ["flipVertical"] },
+    { selector: ".lg-share", names: ["share"] },
+    { selector: ".lg-share-facebook .lg-icon", names: ["shareFacebook"] },
+    { selector: ".lg-share-twitter .lg-icon", names: ["shareX"] },
+    { selector: ".lg-share-pinterest .lg-icon", names: ["sharePinterest"] },
+    // Shown while idle (prompting play) / while `.lg-show-autoplay`.
+    {
+      selector: ".lg-autoplay-button",
+      names: ["autoplayPlay", "autoplayPause"]
+    },
+    // Shown while windowed / while `.lg-fullscreen-on`.
+    { selector: ".lg-fullscreen", names: ["fullscreen", "fullscreenExit"] },
+    { selector: ".lg-comment-toggle", names: ["comment"] },
+    { selector: ".lg-comment-close", names: ["commentClose"] },
+    { selector: ".lg-toggle-thumb", names: ["toggleThumbnails"] }
+  ];
+  const toKebab = (name) => name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+  function getCustomIconMarkup(icons, names) {
+    if (!names.every((name) => icons[name])) {
+      return "";
+    }
+    return names.map(
+      (name) => `<span class="lg-ci lg-ci-${toKebab(
+        name
+      )}" aria-hidden="true">${icons[name]}</span>`
+    ).join("");
+  }
+  function applyCustomIcons(container, defaults, overrides) {
+    ICON_TARGETS.forEach(({ selector, names }) => {
+      const source = overrides && names.every((name) => overrides[name]) ? overrides : defaults;
+      const markup = getCustomIconMarkup(source, names);
+      if (!markup) {
+        return;
+      }
+      container.querySelectorAll(selector).forEach((element) => {
+        if (element.classList.contains("lg-icon-custom")) {
+          return;
+        }
+        element.classList.add("lg-icon-custom");
+        element.insertAdjacentHTML("afterbegin", markup);
+      });
+    });
+  }
+  const MAX_FRAME_MS = 64;
+  function runSprings(tracks, onFrame, onDone) {
+    let raf = 0;
+    let last = Date.now();
+    const states = tracks.map((t) => ({
+      position: t.from,
+      velocity: t.velocity
+    }));
+    const frame = () => {
+      const now = Date.now();
+      const dt = Math.min(Math.max(now - last, 0), MAX_FRAME_MS);
+      last = now;
+      let settled = true;
+      tracks.forEach((t, i) => {
+        states[i] = stepSpring(states[i], t.target, dt, t);
+        if (!isSpringSettled(states[i], t.target)) {
+          settled = false;
+        }
+      });
+      if (settled) {
+        onFrame(tracks.map((t) => t.target));
+        onDone == null ? void 0 : onDone();
+        return;
+      }
+      onFrame(states.map((s) => s.position));
+      raf = requestAnimationFrame(frame);
+    };
+    raf = requestAnimationFrame(frame);
+    return () => cancelAnimationFrame(raf);
+  }
+  const _lgQuery = class _lgQuery2 {
+    constructor(selector) {
+      this.cssVenderPrefixes = [
+        "TransitionDuration",
+        "TransitionTimingFunction",
+        "Transform",
+        "Transition"
+      ];
+      this.selector = this._getSelector(selector);
+      this.firstElement = this._getFirstEl();
+      return this;
+    }
+    static generateUUID() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function(c) {
+          const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+          return v.toString(16);
+        }
+      );
+    }
+    _getSelector(selector, context = document) {
+      if (typeof selector !== "string") {
+        return selector;
+      }
+      context = context || document;
+      const fl = selector.substring(0, 1);
+      if (fl === "#") {
+        return context.querySelector(selector);
+      } else {
+        return context.querySelectorAll(selector);
+      }
+    }
+    _each(func) {
+      if (!this.selector) {
+        return this;
+      }
+      if (this.selector.length !== void 0) {
+        [].forEach.call(this.selector, func);
+      } else {
+        func(this.selector, 0);
+      }
+      return this;
+    }
+    _setCssVendorPrefix(el, cssProperty, value) {
+      if (cssProperty.startsWith("--")) {
+        el.style.setProperty(cssProperty, String(value));
+        return;
+      }
+      const property = cssProperty.replace(/-([a-z])/gi, function(s, group1) {
+        return group1.toUpperCase();
+      });
+      if (this.cssVenderPrefixes.indexOf(property) !== -1) {
+        el.style[property.charAt(0).toLowerCase() + property.slice(1)] = value;
+        el.style["webkit" + property] = value;
+        el.style["moz" + property] = value;
+        el.style["ms" + property] = value;
+        el.style["o" + property] = value;
+      } else {
+        el.style[property] = value;
+      }
+    }
+    _getFirstEl() {
+      if (this.selector && this.selector.length !== void 0) {
+        return this.selector[0];
+      } else {
+        return this.selector;
+      }
+    }
+    isEventMatched(event, eventName) {
+      const eventNamespace = eventName.split(".");
+      return event.split(".").filter((e) => e).every((e) => {
+        return eventNamespace.indexOf(e) !== -1;
+      });
+    }
+    attr(attr, value) {
+      if (value === void 0) {
+        if (!this.firstElement) {
+          return "";
+        }
+        return this.firstElement.getAttribute(attr);
+      }
+      this._each((el) => {
+        el.setAttribute(attr, value);
+      });
+      return this;
+    }
+    find(selector) {
+      return $LG(this._getSelector(selector, this.selector));
+    }
+    first() {
+      if (this.selector && this.selector.length !== void 0) {
+        return $LG(this.selector[0]);
+      } else {
+        return $LG(this.selector);
+      }
+    }
+    eq(index) {
+      return $LG(this.selector[index]);
+    }
+    parent() {
+      return $LG(this.selector.parentElement);
+    }
+    get() {
+      return this._getFirstEl();
+    }
+    removeAttr(attributes) {
+      const attrs = attributes.split(" ");
+      this._each((el) => {
+        attrs.forEach((attr) => el.removeAttribute(attr));
+      });
+      return this;
+    }
+    wrap(className) {
+      if (!this.firstElement) {
+        return this;
+      }
+      const wrapper = document.createElement("div");
+      wrapper.className = className;
+      this.firstElement.parentNode.insertBefore(wrapper, this.firstElement);
+      this.firstElement.parentNode.removeChild(this.firstElement);
+      wrapper.appendChild(this.firstElement);
+      return this;
+    }
+    addClass(classNames = "") {
+      this._each((el) => {
+        classNames.split(" ").forEach((className) => {
+          if (className) {
+            el.classList.add(className);
+          }
+        });
+      });
+      return this;
+    }
+    removeClass(classNames) {
+      this._each((el) => {
+        classNames.split(" ").forEach((className) => {
+          if (className) {
+            el.classList.remove(className);
+          }
+        });
+      });
+      return this;
+    }
+    hasClass(className) {
+      if (!this.firstElement) {
+        return false;
+      }
+      return this.firstElement.classList.contains(className);
+    }
+    hasAttribute(attribute) {
+      if (!this.firstElement) {
+        return false;
+      }
+      return this.firstElement.hasAttribute(attribute);
+    }
+    toggleClass(className) {
+      if (!this.firstElement) {
+        return this;
+      }
+      if (this.hasClass(className)) {
+        this.removeClass(className);
+      } else {
+        this.addClass(className);
+      }
+      return this;
+    }
+    css(property, value) {
+      this._each((el) => {
+        this._setCssVendorPrefix(el, property, value);
+      });
+      return this;
+    }
+    // Need to pass separate namespaces for separate elements
+    on(events, listener) {
+      if (!this.selector) {
+        return this;
+      }
+      events.split(" ").forEach((event) => {
+        if (!Array.isArray(_lgQuery2.eventListeners[event])) {
+          _lgQuery2.eventListeners[event] = [];
+        }
+        _lgQuery2.eventListeners[event].push(listener);
+        this.selector.addEventListener(event.split(".")[0], listener);
+      });
+      return this;
+    }
+    // @todo - test this
+    once(event, listener) {
+      this.on(event, () => {
+        this.off(event);
+        listener(event);
+      });
+      return this;
+    }
+    off(event) {
+      if (!this.selector) {
+        return this;
+      }
+      Object.keys(_lgQuery2.eventListeners).forEach((eventName) => {
+        if (this.isEventMatched(event, eventName)) {
+          _lgQuery2.eventListeners[eventName].forEach((listener) => {
+            this.selector.removeEventListener(
+              eventName.split(".")[0],
+              listener
+            );
+          });
+          _lgQuery2.eventListeners[eventName] = [];
+        }
+      });
+      return this;
+    }
+    trigger(event, detail) {
+      if (!this.firstElement) {
+        return this;
+      }
+      const customEvent = new CustomEvent(event.split(".")[0], {
+        detail: detail || null
+      });
+      this.firstElement.dispatchEvent(customEvent);
+      return this;
+    }
+    // Does not support IE
+    load(url) {
+      fetch(url).then((res) => res.text()).then((html) => {
+        this.selector.innerHTML = html;
+      });
+      return this;
+    }
+    html(html) {
+      if (html === void 0) {
+        if (!this.firstElement) {
+          return "";
+        }
+        return this.firstElement.innerHTML;
+      }
+      this._each((el) => {
+        el.innerHTML = html;
+      });
+      return this;
+    }
+    append(html) {
+      this._each((el) => {
+        if (typeof html === "string") {
+          el.insertAdjacentHTML("beforeend", html);
+        } else {
+          el.appendChild(html);
+        }
+      });
+      return this;
+    }
+    prepend(html) {
+      this._each((el) => {
+        if (typeof html === "string") {
+          el.insertAdjacentHTML("afterbegin", html);
+        } else if (html instanceof HTMLElement) {
+          el.insertBefore(html.cloneNode(true), el.firstChild);
+        }
+      });
+      return this;
+    }
+    remove() {
+      this._each((el) => {
+        el.parentNode.removeChild(el);
+      });
+      return this;
+    }
+    empty() {
+      this._each((el) => {
+        el.innerHTML = "";
+      });
+      return this;
+    }
+    scrollTop(scrollTop) {
+      if (scrollTop !== void 0) {
+        window.scrollTo(window.scrollX, scrollTop);
+        return this;
+      } else {
+        return window.scrollY;
+      }
+    }
+    scrollLeft(scrollLeft) {
+      if (scrollLeft !== void 0) {
+        window.scrollTo(scrollLeft, window.scrollY);
+        return this;
+      } else {
+        return window.scrollX;
+      }
+    }
+    offset() {
+      if (!this.firstElement) {
+        return {
+          left: 0,
+          top: 0
+        };
+      }
+      const rect = this.firstElement.getBoundingClientRect();
+      const bodyMarginLeft = $LG("body").style().marginLeft;
+      return {
+        left: rect.left - parseFloat(bodyMarginLeft) + this.scrollLeft(),
+        top: rect.top + this.scrollTop()
+      };
+    }
+    style() {
+      if (!this.firstElement) {
+        return {};
+      }
+      return this.firstElement.currentStyle || window.getComputedStyle(this.firstElement);
+    }
+    // Width without padding and border even if box-sizing is used.
+    width() {
+      const style = this.style();
+      return this.firstElement.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    }
+    // Height without padding and border even if box-sizing is used.
+    height() {
+      const style = this.style();
+      return this.firstElement.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
+    }
+  };
+  _lgQuery.eventListeners = {};
+  let lgQuery = _lgQuery;
+  function $LG(selector) {
+    return new lgQuery(selector);
+  }
+  const defaultDynamicOptions = [
+    "src",
+    "sources",
+    "subHtml",
+    "subHtmlUrl",
+    "html",
+    "video",
+    "poster",
+    "slideName",
+    "responsive",
+    "srcset",
+    "sizes",
+    "iframe",
+    "downloadUrl",
+    "download",
+    "width",
+    "shareUrl",
+    "facebookShareUrl",
+    "tweetText",
+    "iframeTitle",
+    "twitterShareUrl",
+    "pinterestShareUrl",
+    "pinterestText",
+    "fbHtml",
+    "disqusIdentifier",
+    "disqusUrl"
+  ];
+  function convertToData(attr) {
+    if (attr === "href") {
+      return "src";
+    }
+    attr = attr.replace("data-", "");
+    attr = attr.charAt(0).toLowerCase() + attr.slice(1);
+    attr = attr.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    return attr;
+  }
+  const utils = {
+    /**
+     * Fetches HTML content from a given URL and inserts it into a specified element.
+     *
+     * @param url - The URL to fetch the HTML content from.
+     * @param element - The DOM element (jQuery object) to insert the HTML content into.
+     * @param insertMethod - The method to insert the HTML ('append' or 'replace').
+     */
+    fetchCaptionFromUrl(url, element, insertMethod) {
+      fetch(url).then((response) => response.text()).then((htmlContent) => {
+        if (insertMethod === "append") {
+          const contentDiv = `<div class="lg-sub-html">${htmlContent}</div>`;
+          element.append(contentDiv);
+        } else {
+          element.html(htmlContent);
+        }
+      });
+    },
+    /**
+     * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
+     */
+    getSize(el, container, spacing = 0, defaultLgSize) {
+      const LGel = $LG(el);
+      const lgSize = LGel.attr("data-lg-size") || defaultLgSize;
+      const parsed = parseImageSize(lgSize, window.innerWidth);
+      if (!parsed) {
+        return;
+      }
+      return fitImageSize(
+        parsed,
+        container.width(),
+        container.height() - spacing
+      );
+    },
+    /**
+     * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
+     * @param {jQuery Element}
+     * @returns {String} Transform CSS string
+     */
+    getTransform(el, container, top, bottom, imageSize) {
+      if (!imageSize || imageSize.width <= 0 || imageSize.height <= 0) {
+        return;
+      }
+      const LGel = $LG(el).find("img").first();
+      if (!LGel.get()) {
+        return;
+      }
+      const containerRect = container.get().getBoundingClientRect();
+      const rect = LGel.get().getBoundingClientRect();
+      const triggerRect = {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height
+      };
+      if (!isUsableOriginRect(triggerRect)) {
+        return;
+      }
+      return getOriginTransform({
+        triggerRect,
+        containerRect: {
+          left: containerRect.left,
+          top: containerRect.top,
+          width: containerRect.width,
+          // Element height, not rect height, includes the mobile
+          // safari bottom bar handling this always had.
+          height: container.height()
+        },
+        top,
+        bottom,
+        imageSize
+      });
+    },
+    getIframeMarkup(iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
+      const title = iframeTitle ? 'title="' + iframeTitle + '"' : "";
+      return `<div class="lg-media-cont lg-has-iframe" style="width:${iframeWidth}; max-width:${iframeMaxWidth}; height: ${iframeHeight}; max-height:${iframeMaxHeight}">
+                    <iframe class="lg-object" frameborder="0" ${title} src="${src}"  allowfullscreen="true"></iframe>
+                </div>`;
+    },
+    getImgMarkup(index, src, altAttr, srcset, sizes, sources) {
+      const srcsetAttr = srcset ? `srcset="${srcset}"` : "";
+      const sizesAttr = sizes ? `sizes="${sizes}"` : "";
+      const imgMarkup = `<img ${altAttr} ${srcsetAttr}  ${sizesAttr} class="lg-object lg-image" data-index="${index}" src="${src}" />`;
+      let sourceTag = "";
+      if (sources) {
+        const sourceObj = typeof sources === "string" ? JSON.parse(sources) : sources;
+        sourceTag = sourceObj.map((source) => {
+          let attrs = "";
+          Object.keys(source).forEach((key) => {
+            attrs += ` ${key}="${source[key]}"`;
+          });
+          return `<source ${attrs}></source>`;
+        });
+      }
+      return `${sourceTag}${imgMarkup}`;
+    },
+    // Get src from responsive src
+    getResponsiveSrc(srcItms) {
+      const rsWidth = [];
+      const rsSrc = [];
+      let src = "";
+      for (let i = 0; i < srcItms.length; i++) {
+        const _src = srcItms[i].split(" ");
+        if (_src[0] === "") {
+          _src.splice(0, 1);
+        }
+        rsSrc.push(_src[0]);
+        rsWidth.push(_src[1]);
+      }
+      const wWidth = window.innerWidth;
+      for (let j = 0; j < rsWidth.length; j++) {
+        if (parseInt(rsWidth[j], 10) > wWidth) {
+          src = rsSrc[j];
+          break;
+        }
+      }
+      return src;
+    },
+    isImageLoaded(img) {
+      if (!img) return false;
+      if (!img.complete) {
+        return false;
+      }
+      if (img.naturalWidth === 0) {
+        return false;
+      }
+      return true;
+    },
+    getVideoPosterMarkup(_poster, dummyImg, videoContStyle, playVideoString, _isVideo) {
+      let videoClass = "";
+      if (_isVideo && _isVideo.youtube) {
+        videoClass = "lg-has-youtube";
+      } else if (_isVideo && _isVideo.vimeo) {
+        videoClass = "lg-has-vimeo";
+      } else if (_isVideo && _isVideo.wistia) {
+        videoClass = "lg-has-wistia";
+      } else {
+        videoClass = "lg-has-html5";
+      }
+      let _dummy = dummyImg;
+      if (typeof dummyImg !== "string") {
+        _dummy = dummyImg.outerHTML;
+      }
+      return `<div class="lg-video-cont ${videoClass}" style="${videoContStyle}">
+                <div class="lg-video-play-button">
+                <svg
+                    viewBox="0 0 20 20"
+                    preserveAspectRatio="xMidYMid"
+                    focusable="false"
+                    aria-labelledby="${playVideoString}"
+                    role="img"
+                    class="lg-video-play-icon"
+                >
+                    <title>${playVideoString}</title>
+                    <polygon class="lg-video-play-icon-inner" points="1,0 20,10 1,20"></polygon>
+                </svg>
+                <svg class="lg-video-play-icon-bg" viewBox="0 0 50 50" focusable="false">
+                    <circle cx="50%" cy="50%" r="20"></circle></svg>
+                <svg class="lg-video-play-icon-circle" viewBox="0 0 50 50" focusable="false">
+                    <circle cx="50%" cy="50%" r="20"></circle>
+                </svg>
+            </div>
+            ${_dummy}
+            <img class="lg-object lg-video-poster" src="${_poster}" />
+        </div>`;
+    },
+    getFocusableElements(container) {
+      const elements = container.querySelectorAll(
+        'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
+      );
+      const visibleElements = [].filter.call(
+        elements,
+        (element) => {
+          const style = window.getComputedStyle(element);
+          return style.display !== "none" && style.visibility !== "hidden" && // Hidden or moved into the toolbar's More menu, whatever
+          // the stylesheet says about their display.
+          !element.closest("[hidden], [data-lg-overflow]");
+        }
+      );
+      return visibleElements;
+    },
+    /**
+     * @desc Create dynamic elements array from gallery items when dynamic option is false
+     * It helps to avoid frequent DOM interaction
+     * and avoid multiple checks for dynamic elments
+     *
+     * @returns {Array} dynamicEl
+     */
+    getDynamicOptions(items, extraProps, getCaptionFromTitleOrAlt, exThumbImage) {
+      const dynamicElements = [];
+      const availableDynamicOptions = [
+        ...defaultDynamicOptions,
+        ...extraProps
+      ];
+      [].forEach.call(items, (item) => {
+        const dynamicEl = {};
+        for (let i = 0; i < item.attributes.length; i++) {
+          const attr = item.attributes[i];
+          if (attr.specified) {
+            const dynamicAttr = convertToData(attr.name);
+            let label = "";
+            if (availableDynamicOptions.indexOf(dynamicAttr) > -1) {
+              label = dynamicAttr;
+            }
+            if (label) {
+              dynamicEl[label] = attr.value;
+            }
+          }
+        }
+        if (typeof dynamicEl.sources === "string") {
+          try {
+            dynamicEl.sources = JSON.parse(dynamicEl.sources);
+          } catch (e) {
+            console.warn(
+              "lightGallery :- data-sources must be a JSON array of picture source objects. See https://www.lightgalleryjs.com/docs/responsive-loading/"
+            );
+            delete dynamicEl.sources;
+          }
+        }
+        const currentItem = $LG(item);
+        const alt = currentItem.find("img").first().attr("alt");
+        const title = currentItem.attr("title");
+        const thumb = exThumbImage ? currentItem.attr(exThumbImage) : currentItem.find("img").first().attr("src");
+        dynamicEl.thumb = thumb;
+        if (getCaptionFromTitleOrAlt && !dynamicEl.subHtml) {
+          dynamicEl.subHtml = title || alt || "";
+        }
+        dynamicEl.alt = alt || title || "";
+        dynamicElements.push(dynamicEl);
+      });
+      return dynamicElements;
+    },
+    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(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;
+        }
+      }
+      return getVideoInfo(src, false);
+    }
+  };
+  var __defProp = Object.defineProperty;
+  var __defProps = Object.defineProperties;
+  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop))
+          __defNormalProp(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+  let lgId = 0;
+  class LightGallery {
+    constructor(element, options) {
+      this.lgOpened = false;
+      this.index = 0;
+      this.plugins = [];
+      this.lGalleryOn = false;
+      this.lgBusy = false;
+      this.defaultIcons = __spreadValues({}, coreDefaultIcons);
+      this.swipeSamples = [];
+      this.currentItemsInDom = [];
+      this.prevScrollTop = 0;
+      this.bodyPaddingRight = 0;
+      this.isDummyImageRemoved = false;
+      this.dragOrSwipeEnabled = false;
+      this.mediaContainerPosition = {
+        top: 0,
+        bottom: 0
+      };
+      if (!element) {
+        return this;
+      }
+      lgId++;
+      this.lgId = lgId;
+      this.el = element;
+      this.LGel = $LG(element);
+      this.generateSettings(options);
+      this.buildModules();
+      if (this.settings.dynamic && this.settings.dynamicEl !== void 0 && !Array.isArray(this.settings.dynamicEl)) {
+        throw "When using dynamic mode, you must also define dynamicEl as an Array.";
+      }
+      this.galleryItems = this.getItems();
+      this.normalizeSettings();
+      this.init();
+      this.validateLicense();
+      return this;
+    }
+    generateSettings(options) {
+      var _a;
+      this.settings = __spreadProps(__spreadValues(__spreadValues({}, lightGalleryCoreSettings), options), {
+        // Strings merge per-key (headless resolveSettings parity), // a partial override keeps every other default.
+        strings: __spreadValues(__spreadValues({}, lightGalleryCoreSettings.strings), (_a = options == null ? void 0 : options.strings) != null ? _a : {})
+      });
+      if (this.settings.isMobile && typeof this.settings.isMobile === "function" ? this.settings.isMobile() : utils.isMobile()) {
+        const mobileSettings = __spreadValues({}, this.settings.mobileSettings);
+        this.settings = __spreadValues(__spreadValues({}, this.settings), mobileSettings);
+      }
+      if (typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        this.settings = __spreadProps(__spreadValues({}, this.settings), {
+          speed: 0,
+          backdropDuration: 0,
+          startAnimationDuration: 0,
+          zoomFromOrigin: false,
+          slideEndAnimation: false
+        });
+      }
+    }
+    normalizeSettings() {
+      if (this.settings.direction === "auto") {
+        this.settings.direction = typeof window !== "undefined" && typeof window.getComputedStyle === "function" && window.getComputedStyle(this.el).direction === "rtl" ? "rtl" : "ltr";
+      }
+      if (this.settings.slideEndAnimation) {
+        this.settings.hideControlOnEnd = false;
+      }
+      if (!this.settings.closable) {
+        this.settings.swipeToClose = false;
+      }
+      this.zoomFromOrigin = this.settings.zoomFromOrigin;
+      if (this.settings.dynamic) {
+        this.zoomFromOrigin = false;
+      }
+      if (this.settings.container) {
+        const { container } = this.settings;
+        if (typeof container === "function") {
+          this.settings.container = container();
+        } else if (typeof container === "string") {
+          const el = document.querySelector(container);
+          this.settings.container = el != null ? el : document.body;
+        }
+      } else {
+        this.settings.container = document.body;
+      }
+      this.settings.preload = Math.min(
+        this.settings.preload,
+        this.galleryItems.length
+      );
+    }
+    init() {
+      this.addSlideVideoInfo(this.galleryItems);
+      this.buildStructure();
+      this.LGel.trigger(lGEvents.init, {
+        instance: this
+      });
+      if (this.settings.keyPress) {
+        this.keyPress();
+      }
+      setTimeout(() => {
+        this.enableDrag();
+        this.enableSwipe();
+        this.triggerPosterClick();
+      }, 50);
+      this.arrow();
+      if (this.settings.mousewheel) {
+        this.mousewheel();
+      }
+      if (!this.settings.dynamic) {
+        this.openGalleryOnItemClick();
+      }
+    }
+    openGalleryOnItemClick() {
+      for (let index = 0; index < this.items.length; index++) {
+        const element = this.items[index];
+        const $element = $LG(element);
+        const uuid = lgQuery.generateUUID();
+        $element.attr("data-lg-id", uuid).on(`click.lgcustom-item-${uuid}`, (e) => {
+          e.preventDefault();
+          const currentItemIndex = this.settings.index || index;
+          this.openGallery(currentItemIndex, element);
+        });
+      }
+    }
+    /**
+     * Module constructor
+     * Modules are build incrementally.
+     * Gallery should be opened only once all the modules are initialized.
+     * use moduleBuildTimeout to make sure this
+     */
+    buildModules() {
+      this.settings.plugins.forEach((plugin) => {
+        this.plugins.push(new plugin(this, $LG));
+      });
+    }
+    validateLicense() {
+      const notice = takeLicenseNotice(this.settings.licenseKey);
+      if (notice) console[notice.level](notice.message);
+    }
+    getSlideItem(index) {
+      return $LG(this.getSlideItemId(index));
+    }
+    getSlideItemId(index) {
+      return `#lg-item-${this.lgId}-${index}`;
+    }
+    getIdName(id) {
+      return `${id}-${this.lgId}`;
+    }
+    getElementById(id) {
+      return $LG(`#${this.getIdName(id)}`);
+    }
+    manageSingleSlideClassName() {
+      if (this.galleryItems.length < 2) {
+        this.outer.addClass("lg-single-item");
+      } else {
+        this.outer.removeClass("lg-single-item");
+      }
+    }
+    buildStructure() {
+      const container = this.$container && this.$container.get();
+      if (container) {
+        return;
+      }
+      let controls = "";
+      let subHtmlCont = "";
+      if (this.settings.controls) {
+        controls = `<button type="button" id="${this.getIdName(
+          "lg-prev"
+        )}" aria-label="${this.settings.strings["previousSlide"]}" class="lg-prev lg-icon"> ${this.settings.prevHtml} </button>
+                <button type="button" id="${this.getIdName(
+          "lg-next"
+        )}" aria-label="${this.settings.strings["nextSlide"]}" class="lg-next lg-icon"> ${this.settings.nextHtml} </button>`;
+      }
+      if (this.settings.appendSubHtmlTo !== ".lg-item") {
+        subHtmlCont = this.settings.ariaAnnouncements ? '<div class="lg-sub-html"></div>' : '<div class="lg-sub-html" role="status" aria-live="polite"></div>';
+      }
+      let addClasses = "";
+      if (this.settings.allowMediaOverlap) {
+        addClasses += "lg-media-overlap ";
+      }
+      const ariaLabelledby = this.settings.ariaLabelledby ? 'aria-labelledby="' + this.settings.ariaLabelledby + '"' : `aria-label="${this.settings.strings["galleryLabel"]}"`;
+      const ariaDescribedby = this.settings.ariaDescribedby ? 'aria-describedby="' + this.settings.ariaDescribedby + '"' : "";
+      const containerClassName = `lg-container ${this.settings.addClass} ${document.body !== this.settings.container ? "lg-inline" : ""}`;
+      const closeIcon = this.settings.closable && this.settings.showCloseIcon ? `<button type="button" aria-label="${this.settings.strings["closeGallery"]}" id="${this.getIdName(
+        "lg-close"
+      )}" class="lg-close lg-icon"></button>` : "";
+      const maximizeIcon = this.settings.showMaximizeIcon ? `<button type="button" aria-label="${this.settings.strings["toggleMaximize"]}" id="${this.getIdName(
+        "lg-maximize"
+      )}" class="lg-maximize lg-icon"></button>` : "";
+      const template = `
+        <div class="${containerClassName}" id="${this.getIdName(
+        "lg-container"
+      )}" tabindex="-1" aria-modal="true" ${ariaLabelledby} ${ariaDescribedby} role="dialog" dir="${this.getDirection()}"
+        >
+            <div id="${this.getIdName(
+        "lg-backdrop"
+      )}" class="lg-backdrop"></div>
+            ${this.settings.ariaAnnouncements ? `<div id="${this.getIdName(
+        "lg-announcer"
+      )}" class="lg-announcer" role="status" aria-live="polite"></div>` : ""}
+
+            <div id="${this.getIdName(
+        "lg-outer"
+      )}" class="lg-outer lg-use-css3 lg-css3 lg-hide-items ${addClasses} ">
+
+              <div id="${this.getIdName("lg-content")}" class="lg-content">
+                <div id="${this.getIdName("lg-inner")}" class="lg-inner">
+                </div>
+                ${controls}
+              </div>
+                <div id="${this.getIdName(
+        "lg-toolbar"
+      )}" class="lg-toolbar lg-group">
+                    ${maximizeIcon}
+                    ${closeIcon}
+                    </div>
+                    ${this.settings.appendSubHtmlTo === ".lg-outer" ? subHtmlCont : ""}
+                <div id="${this.getIdName(
+        "lg-components"
+      )}" class="lg-components">
+                    ${this.settings.appendSubHtmlTo === ".lg-sub-html" ? subHtmlCont : ""}
+                </div>
+            </div>
+        </div>
+        `;
+      $LG(this.settings.container).append(template);
+      if (document.body !== this.settings.container) {
+        $LG(this.settings.container).css("position", "relative");
+      }
+      this.outer = this.getElementById("lg-outer");
+      this.$lgComponents = this.getElementById("lg-components");
+      this.$backdrop = this.getElementById("lg-backdrop");
+      this.$container = this.getElementById("lg-container");
+      this.$inner = this.getElementById("lg-inner");
+      this.$content = this.getElementById("lg-content");
+      this.$toolbar = this.getElementById("lg-toolbar");
+      this.$backdrop.css(
+        "transition-duration",
+        this.settings.backdropDuration + "ms"
+      );
+      let outerClassNames = `${this.settings.mode} `;
+      this.manageSingleSlideClassName();
+      if (this.settings.enableDrag) {
+        outerClassNames += "lg-grab ";
+      }
+      this.outer.addClass(outerClassNames);
+      this.$inner.css("transition-timing-function", this.settings.easing);
+      this.$inner.css("transition-duration", this.settings.speed + "ms");
+      this.$inner.css("--lg-speed", this.settings.speed + "ms");
+      if (this.settings.download) {
+        this.$toolbar.append(
+          `<a id="${this.getIdName(
+            "lg-download"
+          )}" target="_blank" rel="noopener" aria-label="${this.settings.strings["download"]}" download class="lg-download lg-icon"></a>`
+        );
+      }
+      this.counter();
+      $LG(window).on(
+        `resize.lg.global${this.lgId} orientationchange.lg.global${this.lgId}`,
+        () => {
+          this.refreshOnResize();
+        }
+      );
+      this.hideBars();
+      this.manageCloseGallery();
+      this.toggleMaximize();
+      this.initModules();
+      if (this.settings.toolbarOverflow) {
+        this.toolbarOverflow = new ToolbarOverflow(this.$toolbar.get(), {
+          id: this.getIdName("lg-more"),
+          label: this.settings.strings.moreOptions
+        });
+        const update = () => {
+          var _a;
+          return (_a = this.toolbarOverflow) == null ? void 0 : _a.update();
+        };
+        this.LGel.on(`${lGEvents.afterOpen}.lg`, update);
+        this.LGel.on(`${lGEvents.afterSlide}.lg`, update);
+        this.LGel.on(`${lGEvents.containerResize}.lg`, update);
+        this.LGel.on(
+          `${lGEvents.beforeClose}.lg`,
+          () => {
+            var _a;
+            return (_a = this.toolbarOverflow) == null ? void 0 : _a.close(false);
+          }
+        );
+      }
+      applyCustomIcons(
+        this.$container.get(),
+        this.defaultIcons,
+        this.settings.icons
+      );
+    }
+    /**
+     * Merge a plugin's built-in icon SVGs into the default set (called
+     * from plugin `init()`, before the icon pass runs). Consumer
+     * `settings.icons` still win over anything registered here.
+     */
+    registerDefaultIcons(icons) {
+      this.defaultIcons = __spreadValues(__spreadValues({}, this.defaultIcons), icons);
+    }
+    /**
+     * Cache the fitted (contain) size of a slide's media. Every consumer
+     * of `currentImageSize` measures against the CURRENT slide: the
+     * actual-size zoom divides the natural width by it, and the
+     * zoom-from-origin close flight positions against it. Recomputed on
+     * every slide change, not just at open — one cached landscape size
+     * makes a portrait slide zoom to the wrong scale and then snap to
+     * its real size when the natural-px swap lands.
+     */
+    updateCurrentImageSize(index) {
+      const { __slideVideoInfo } = this.galleryItems[index];
+      const { top, bottom } = this.mediaContainerPosition;
+      this.currentImageSize = utils.getSize(
+        this.items[index],
+        this.outer,
+        top + bottom,
+        __slideVideoInfo && this.settings.videoMaxSize
+      );
+    }
+    refreshOnResize() {
+      if (this.lgOpened) {
+        const currentGalleryItem = this.galleryItems[this.index];
+        const { __slideVideoInfo } = currentGalleryItem;
+        this.mediaContainerPosition = this.getMediaContainerPosition();
+        this.updateCurrentImageSize(this.index);
+        if (__slideVideoInfo) {
+          this.resizeVideoSlide(this.index, this.currentImageSize);
+        }
+        if (this.zoomFromOrigin && !this.isDummyImageRemoved) {
+          const imgStyle = this.getDummyImgStyles(this.currentImageSize);
+          this.outer.find(".lg-current .lg-dummy-img").first().attr("style", imgStyle);
+        }
+        this.LGel.trigger(lGEvents.containerResize);
+      }
+    }
+    resizeVideoSlide(index, imageSize) {
+      const lgVideoStyle = this.getVideoContStyle(imageSize);
+      const currentSlide = this.getSlideItem(index);
+      currentSlide.find(".lg-video-cont").attr("style", lgVideoStyle);
+    }
+    /**
+     * Update slides dynamically.
+     * Add, edit or delete slides dynamically when lightGallery is opened.
+     * Modify the current gallery items and pass it via updateSlides method
+     * @note
+     * - Do not mutate existing lightGallery items directly.
+     * - Always pass new list of gallery items
+     * - You need to take care of thumbnails outside the gallery if any
+     * - user this method only if you want to update slides when the gallery is opened. Otherwise, use `refresh()` method.
+     * @param items Gallery items
+     * @param index After the update operation, which slide gallery should navigate to
+     * @category lGPublicMethods
+     * @example
+     * const plugin = lightGallery();
+     *
+     * // Adding slides dynamically
+     * let galleryItems = [
+     * // Access existing lightGallery items
+     * // galleryItems are automatically generated internally from the gallery HTML markup
+     * // or directly from galleryItems when dynamic gallery is used
+     *   ...plugin.galleryItems,
+     *     ...[
+     *       {
+     *         src: 'img/img-1.png',
+     *           thumb: 'img/thumb1.png',
+     *         },
+     *     ],
+     *   ];
+     *   plugin.updateSlides(
+     *     galleryItems,
+     *     plugin.index,
+     *   );
+     *
+     *
+     * // Remove slides dynamically
+     * galleryItems = JSON.parse(
+     *   JSON.stringify(updateSlideInstance.galleryItems),
+     * );
+     * galleryItems.shift();
+     * updateSlideInstance.updateSlides(galleryItems, 1);
+     * @see <a href="/demos/update-slides/">Demo</a>
+     */
+    updateSlides(items, index) {
+      if (this.index > items.length - 1) {
+        this.index = items.length - 1;
+      }
+      if (items.length === 1) {
+        this.index = 0;
+      }
+      if (!items.length) {
+        this.closeGallery();
+        return;
+      }
+      const currentSrc = this.galleryItems[index].src;
+      this.galleryItems = items;
+      this.updateControls();
+      this.$inner.empty();
+      this.currentItemsInDom = [];
+      let _index = 0;
+      this.galleryItems.some((galleryItem, itemIndex) => {
+        if (galleryItem.src === currentSrc) {
+          _index = itemIndex;
+          return true;
+        }
+        return false;
+      });
+      this.currentItemsInDom = this.organizeSlideItems(_index, -1);
+      this.loadContent(_index, true);
+      this.getSlideItem(_index).addClass("lg-current");
+      this.index = _index;
+      this.updateCurrentCounter(_index);
+      this.LGel.trigger(lGEvents.updateSlides);
+    }
+    // Get gallery items based on multiple conditions
+    getItems() {
+      this.items = [];
+      if (!this.settings.dynamic) {
+        if (this.settings.selector === "this") {
+          this.items.push(this.el);
+        } else if (this.settings.selector) {
+          if (typeof this.settings.selector === "string") {
+            if (this.settings.selectWithin) {
+              const selectWithin = $LG(this.settings.selectWithin);
+              this.items = selectWithin.find(this.settings.selector).get();
+            } else {
+              this.items = this.el.querySelectorAll(
+                this.settings.selector
+              );
+            }
+          } else {
+            this.items = this.settings.selector;
+          }
+        } else {
+          this.items = this.el.children;
+        }
+        return utils.getDynamicOptions(
+          this.items,
+          this.settings.extraProps,
+          this.settings.getCaptionFromTitleOrAlt,
+          this.settings.exThumbImage
+        );
+      } else {
+        return this.settings.dynamicEl || [];
+      }
+    }
+    shouldHideScrollbar() {
+      return this.settings.hideScrollbar && document.body === this.settings.container;
+    }
+    hideScrollbar() {
+      if (!this.shouldHideScrollbar()) {
+        return;
+      }
+      this.bodyPaddingRight = parseFloat($LG("body").style().paddingRight);
+      const bodyRect = document.documentElement.getBoundingClientRect();
+      const scrollbarWidth = window.innerWidth - bodyRect.width;
+      $LG(document.body).css(
+        "padding-right",
+        scrollbarWidth + this.bodyPaddingRight + "px"
+      );
+      $LG(document.body).addClass("lg-overlay-open");
+    }
+    resetScrollBar() {
+      if (!this.shouldHideScrollbar()) {
+        return;
+      }
+      $LG(document.body).css("padding-right", this.bodyPaddingRight + "px");
+      $LG(document.body).removeClass("lg-overlay-open");
+    }
+    /**
+     * Open lightGallery.
+     * Open gallery with specific slide by passing index of the slide as parameter.
+     * @category lGPublicMethods
+     * @param {Number} index  - index of the slide
+     * @param {HTMLElement} element - Which image lightGallery should zoom from
+     *
+     * @example
+     * const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
+     * const dynamicGallery = lightGallery($dynamicGallery, {
+     *     dynamic: true,
+     *     dynamicEl: [
+     *         {
+     *              src: 'img/1.jpg',
+     *              thumb: 'img/thumb-1.jpg',
+     *              subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
+     *         },
+     *         ...
+     *     ],
+     * });
+     * $dynamicGallery.addEventListener('click', function () {
+     *     // Starts with third item.(Optional).
+     *     // This is useful if you want use dynamic mode with
+     *     // custom thumbnails (thumbnails outside gallery),
+     *     dynamicGallery.openGallery(2);
+     * });
+     *
+     */
+    openGallery(index = this.settings.index, element) {
+      if (this.lgOpened) return;
+      this.lgOpened = true;
+      this.outer.removeClass("lg-hide-items");
+      this.hideScrollbar();
+      this.$container.addClass("lg-show");
+      const itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(
+        index,
+        index
+      );
+      this.currentItemsInDom = itemsToBeInsertedToDom;
+      let items = "";
+      itemsToBeInsertedToDom.forEach((item) => {
+        items = items + `<div id="${item}" class="lg-item"></div>`;
+      });
+      this.$inner.append(items);
+      this.addHtml(index);
+      let transform = "";
+      this.mediaContainerPosition = this.getMediaContainerPosition();
+      const { top, bottom } = this.mediaContainerPosition;
+      if (!this.settings.allowMediaOverlap) {
+        this.setMediaContainerPosition(top, bottom);
+      }
+      const { __slideVideoInfo } = this.galleryItems[index];
+      if (this.zoomFromOrigin && element) {
+        this.currentImageSize = utils.getSize(
+          element,
+          this.outer,
+          top + bottom,
+          __slideVideoInfo && this.settings.videoMaxSize
+        );
+        transform = this.getOriginTransform(element, this.currentImageSize);
+      }
+      if (!this.zoomFromOrigin || !transform) {
+        this.outer.addClass(this.settings.startClass);
+        this.getSlideItem(index).removeClass("lg-complete");
+      }
+      const timeout = this.settings.zoomFromOrigin ? 100 : this.settings.backdropDuration;
+      setTimeout(() => {
+        this.outer.addClass("lg-components-open");
+      }, timeout);
+      this.index = index;
+      this.LGel.trigger(lGEvents.beforeOpen);
+      this.getSlideItem(index).addClass("lg-current");
+      this.lGalleryOn = false;
+      this.prevScrollTop = $LG(window).scrollTop();
+      if (this.settings.trapFocus && document.body === this.settings.container) {
+        this.prevActiveElement = document.activeElement instanceof HTMLElement ? document.activeElement : void 0;
+      }
+      setTimeout(() => {
+        if (this.zoomFromOrigin && transform) {
+          const currentSlide = this.getSlideItem(index);
+          currentSlide.css("transform", transform);
+          setTimeout(() => {
+            currentSlide.addClass("lg-start-progress lg-start-end-progress").css(
+              "transition-duration",
+              this.settings.startAnimationDuration + "ms"
+            );
+            this.outer.addClass("lg-zoom-from-image");
+          });
+          setTimeout(() => {
+            currentSlide.css("transform", "translate3d(0, 0, 0)");
+          }, 100);
+        }
+        setTimeout(() => {
+          this.$backdrop.addClass("in");
+          this.$container.addClass("lg-show-in");
+        }, 10);
+        setTimeout(() => {
+          if (this.settings.trapFocus && document.body === this.settings.container) {
+            this.trapFocus();
+          }
+        }, this.settings.backdropDuration + 50);
+        if (!this.zoomFromOrigin || !transform) {
+          setTimeout(() => {
+            this.outer.addClass("lg-visible");
+          }, this.settings.backdropDuration);
+        }
+        this.slide(index, false, false, false);
+        this.LGel.trigger(lGEvents.afterOpen);
+      });
+      if (document.body === this.settings.container) {
+        $LG("html").addClass("lg-on");
+      }
+    }
+    /**
+     * The zoom-from-origin transform for a trigger: it lands the slide on
+     * the trigger's thumbnail, the start of the opening flight and the end
+     * of the closing one. Undefined when the trigger cannot anchor a flight,
+     * and the gallery opens or closes about the stage centre instead.
+     * Plugins may replace it on the instance to fly differently.
+     */
+    getOriginTransform(element, imageSize) {
+      const { top, bottom } = this.mediaContainerPosition;
+      return utils.getTransform(element, this.outer, top, bottom, imageSize);
+    }
+    /**
+     * Note - Changing the position of the media on every slide transition creates a flickering effect.
+     * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption.
+     * if you have dynamic captions for each media,
+     * you can provide an appropriate height for the captions via allowMediaOverlap option
+     */
+    getMediaContainerPosition() {
+      if (this.settings.allowMediaOverlap) {
+        return {
+          top: 0,
+          bottom: 0
+        };
+      }
+      const top = this.$toolbar.get().clientHeight || 0;
+      const subHtml = this.outer.find(".lg-components .lg-sub-html").get();
+      const captionHeight = this.settings.defaultCaptionHeight || subHtml && subHtml.clientHeight || 0;
+      const thumbContainer = this.outer.find(".lg-thumb-outer").get();
+      const thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0;
+      const bottom = thumbHeight + captionHeight;
+      return {
+        top,
+        bottom
+      };
+    }
+    setMediaContainerPosition(top = 0, bottom = 0) {
+      this.$content.css("top", top + "px").css("bottom", bottom + "px");
+    }
+    hideBars() {
+      setTimeout(() => {
+        this.outer.removeClass("lg-hide-items");
+        if (this.settings.hideBarsDelay > 0) {
+          this.outer.on("mousemove.lg click.lg touchstart.lg", () => {
+            this.outer.removeClass("lg-hide-items");
+            clearTimeout(this.hideBarTimeout);
+            this.hideBarTimeout = setTimeout(() => {
+              this.outer.addClass("lg-hide-items");
+            }, this.settings.hideBarsDelay);
+          });
+          this.outer.trigger("mousemove.lg");
+        }
+      }, this.settings.showBarsAfter);
+    }
+    /**
+     *  @desc Create image counter
+     *  Ex: 1/10
+     */
+    counter() {
+      if (this.settings.counter) {
+        const counterA11yAttrs = this.settings.ariaAnnouncements ? 'aria-hidden="true"' : 'role="status" aria-live="polite"';
+        const counterHtml = `<div class="lg-counter" ${counterA11yAttrs}>
+                <span id="${this.getIdName(
+          "lg-counter-current"
+        )}" class="lg-counter-current">${this.index + 1} </span> /
+                <span id="${this.getIdName(
+          "lg-counter-all"
+        )}" class="lg-counter-all">${this.galleryItems.length} </span></div>`;
+        this.outer.find(this.settings.appendCounterTo).append(counterHtml);
+      }
+    }
+    /**
+     *  @desc add sub-html into the slide
+     *  @param {Number} index - index of the slide
+     */
+    addHtml(index) {
+      let subHtml;
+      let subHtmlUrl;
+      if (this.galleryItems[index].subHtmlUrl) {
+        subHtmlUrl = this.galleryItems[index].subHtmlUrl;
+      } else {
+        subHtml = this.galleryItems[index].subHtml;
+      }
+      if (!subHtmlUrl) {
+        if (subHtml) {
+          const fL = subHtml.substring(0, 1);
+          if (fL === "." || fL === "#") {
+            try {
+              if (this.settings.subHtmlSelectorRelative && !this.settings.dynamic) {
+                subHtml = $LG(this.items).eq(index).find(subHtml).first().html();
+              } else {
+                subHtml = $LG(subHtml).first().html();
+              }
+            } catch (error) {
+              console.warn(
+                `lightGallery: error processing subHtml selector "${subHtml}". See https://www.lightgalleryjs.com/demos/captions/`
+              );
+              subHtml = "";
+            }
+          }
+        } else {
+          subHtml = "";
+        }
+      }
+      if (this.settings.appendSubHtmlTo !== ".lg-item") {
+        if (subHtmlUrl) {
+          utils.fetchCaptionFromUrl(
+            subHtmlUrl,
+            this.outer.find(".lg-sub-html"),
+            "replace"
+          );
+        } else {
+          this.outer.find(".lg-sub-html").html(subHtml);
+        }
+      } else {
+        const currentSlide = $LG(this.getSlideItemId(index));
+        if (subHtmlUrl) {
+          utils.fetchCaptionFromUrl(subHtmlUrl, currentSlide, "append");
+        } else {
+          currentSlide.append(
+            `<div class="lg-sub-html">${subHtml}</div>`
+          );
+        }
+      }
+      if (typeof subHtml !== "undefined" && subHtml !== null) {
+        if (subHtml === "") {
+          this.outer.find(this.settings.appendSubHtmlTo).addClass("lg-empty-html");
+        } else {
+          this.outer.find(this.settings.appendSubHtmlTo).removeClass("lg-empty-html");
+        }
+      }
+      this.LGel.trigger(
+        lGEvents.afterAppendSubHtml,
+        {
+          index
+        }
+      );
+    }
+    /**
+     *  @desc Preload slides
+     *  @param {Number} index - index of the slide
+     * @todo preload not working for the first slide, Also, should work for the first and last slide as well
+     */
+    preload(index) {
+      for (let i = 1; i <= this.settings.preload; i++) {
+        if (i >= this.galleryItems.length - index) {
+          break;
+        }
+        this.loadContent(index + i, false);
+      }
+      for (let j = 1; j <= this.settings.preload; j++) {
+        if (index - j < 0) {
+          break;
+        }
+        this.loadContent(index - j, false);
+      }
+    }
+    getDummyImgStyles(imageSize) {
+      if (!imageSize) return "";
+      return `width:${imageSize.width}px;
+                margin-left: -${imageSize.width / 2}px;
+                margin-top: -${imageSize.height / 2}px;
+                height:${imageSize.height}px`;
+    }
+    getVideoContStyle(imageSize) {
+      if (!imageSize) return "";
+      return `width:${imageSize.width}px;
+                height:${imageSize.height}px`;
+    }
+    getDummyImageContent($currentSlide, index, alt) {
+      let $currentItem;
+      if (!this.settings.dynamic) {
+        $currentItem = $LG(this.items).eq(index);
+      }
+      if ($currentItem) {
+        let _dummyImgSrc;
+        if (!this.settings.exThumbImage) {
+          _dummyImgSrc = $currentItem.find("img").first().attr("src");
+        } else {
+          _dummyImgSrc = $currentItem.attr(this.settings.exThumbImage);
+        }
+        if (!_dummyImgSrc) return "";
+        const imgStyle = this.getDummyImgStyles(this.currentImageSize);
+        const dummyImgContentImg = document.createElement("img");
+        dummyImgContentImg.alt = alt || "";
+        dummyImgContentImg.src = _dummyImgSrc;
+        dummyImgContentImg.className = `lg-dummy-img`;
+        dummyImgContentImg.style.cssText = imgStyle;
+        $currentSlide.addClass("lg-first-slide");
+        this.outer.addClass("lg-first-slide-loading");
+        return dummyImgContentImg;
+      }
+      return "";
+    }
+    setImgMarkup(src, $currentSlide, index) {
+      const currentGalleryItem = this.galleryItems[index];
+      const { alt, srcset, sizes, sources } = currentGalleryItem;
+      let imgContent = "";
+      const altAttr = alt ? 'alt="' + alt + '"' : "";
+      if (this.isFirstSlideWithZoomAnimation()) {
+        imgContent = this.getDummyImageContent(
+          $currentSlide,
+          index,
+          altAttr
+        );
+      } else {
+        imgContent = utils.getImgMarkup(
+          index,
+          src,
+          altAttr,
+          srcset,
+          sizes,
+          sources
+        );
+      }
+      const picture = document.createElement("picture");
+      picture.className = "lg-img-wrap";
+      $LG(picture).append(imgContent);
+      $currentSlide.prepend(picture);
+    }
+    onSlideObjectLoad($slide, isHTML5VideoWithoutPoster, onLoad, onError) {
+      const mediaObject = $slide.find(".lg-object").first();
+      const media = mediaObject.get();
+      const gated = (handler) => {
+        if (media instanceof HTMLImageElement && typeof media.decode === "function") {
+          void awaitDecode(media).then(handler);
+        } else {
+          handler();
+        }
+      };
+      if (utils.isImageLoaded(media) || isHTML5VideoWithoutPoster) {
+        gated(onLoad);
+      } else {
+        mediaObject.on("load.lg error.lg", () => {
+          gated(() => onLoad && onLoad());
+        });
+        mediaObject.on("error.lg", () => {
+          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
+     */
+    onLgObjectLoad(currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) {
+      this.onSlideObjectLoad(
+        currentSlide,
+        isHTML5VideoWithoutPoster,
+        () => {
+          this.triggerSlideItemLoad(
+            currentSlide,
+            index,
+            delay,
+            speed,
+            isFirstSlide
+          );
+        },
+        () => {
+          currentSlide.addClass("lg-complete lg-complete_");
+          currentSlide.html(
+            '<span class="lg-error-msg">' + this.settings.strings["mediaLoadingFailed"] + "</span>"
+          );
+        }
+      );
+    }
+    triggerSlideItemLoad($currentSlide, index, delay, speed, isFirstSlide) {
+      const currentGalleryItem = this.galleryItems[index];
+      const _speed = isFirstSlide && this.getSlideType(currentGalleryItem) === "video" && !currentGalleryItem.poster ? speed : 0;
+      setTimeout(() => {
+        $currentSlide.addClass("lg-complete lg-complete_");
+        this.LGel.trigger(lGEvents.slideItemLoad, {
+          index,
+          delay: delay || 0,
+          isFirstSlide
+        });
+      }, _speed);
+    }
+    isFirstSlideWithZoomAnimation() {
+      return !!(!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize);
+    }
+    // Add video slideInfo
+    addSlideVideoInfo(items) {
+      items.forEach((element, index) => {
+        element.__slideVideoInfo = utils.isVideo(
+          element.src,
+          !!element.video,
+          index
+        );
+        const videoInfo = element.__slideVideoInfo;
+        if (!videoInfo) {
+          return;
+        }
+        if (this.settings.videoFacade !== false) {
+          element.poster = getFacadePoster(
+            element,
+            videoInfo,
+            this.settings.loadYouTubePoster
+          );
+        } else if (this.settings.loadYouTubePoster && !element.poster && videoInfo.youtube) {
+          element.poster = getYouTubePosterUrl(videoInfo);
+        }
+      });
+    }
+    /**
+     *  Load slide content into slide.
+     *  This is used to load content into slides that is not visible too
+     *  @param {Number} index - index of the slide.
+     *  @param {Boolean} rec - if true call loadcontent() function again.
+     */
+    loadContent(index, rec) {
+      const currentGalleryItem = this.galleryItems[index];
+      const $currentSlide = $LG(this.getSlideItemId(index));
+      const { poster, srcset, sizes, sources } = currentGalleryItem;
+      let { src } = currentGalleryItem;
+      const video = currentGalleryItem.video;
+      const _html5Video = video && typeof video === "string" ? JSON.parse(video) : video;
+      if (currentGalleryItem.responsive) {
+        const srcDyItms = currentGalleryItem.responsive.split(",");
+        src = utils.getResponsiveSrc(srcDyItms) || src;
+      }
+      const videoInfo = currentGalleryItem.__slideVideoInfo;
+      let lgVideoStyle = "";
+      const iframe = !!currentGalleryItem.iframe;
+      const isFirstSlide = !this.lGalleryOn;
+      let delay = 0;
+      if (isFirstSlide) {
+        if (this.zoomFromOrigin && this.currentImageSize) {
+          delay = this.settings.startAnimationDuration + 10;
+        } else {
+          delay = this.settings.backdropDuration + 10;
+        }
+      }
+      if (!$currentSlide.hasClass("lg-loaded")) {
+        if (videoInfo) {
+          const { top, bottom } = this.mediaContainerPosition;
+          const videoSize = utils.getSize(
+            this.items[index],
+            this.outer,
+            top + bottom,
+            videoInfo && this.settings.videoMaxSize
+          );
+          lgVideoStyle = this.getVideoContStyle(videoSize);
+        }
+        if (iframe) {
+          const markup = utils.getIframeMarkup(
+            this.settings.iframeWidth,
+            this.settings.iframeHeight,
+            this.settings.iframeMaxWidth,
+            this.settings.iframeMaxHeight,
+            src,
+            currentGalleryItem.iframeTitle
+          );
+          $currentSlide.prepend(markup);
+        } else if (poster) {
+          let dummyImg = "";
+          const hasStartAnimation = isFirstSlide && this.zoomFromOrigin && this.currentImageSize;
+          if (hasStartAnimation) {
+            dummyImg = this.getDummyImageContent(
+              $currentSlide,
+              index,
+              ""
+            );
+          }
+          const markup = utils.getVideoPosterMarkup(
+            poster,
+            dummyImg || "",
+            lgVideoStyle,
+            this.settings.strings["playVideo"],
+            videoInfo
+          );
+          $currentSlide.prepend(markup);
+        } else if (videoInfo) {
+          const markup = `<div class="lg-video-cont " style="${lgVideoStyle}"></div>`;
+          $currentSlide.prepend(markup);
+        } else {
+          this.setImgMarkup(src, $currentSlide, index);
+        }
+        if (poster || videoInfo) {
+          this.LGel.trigger(lGEvents.hasVideo, {
+            index,
+            src,
+            html5Video: _html5Video,
+            hasPoster: !!poster
+          });
+        }
+        this.LGel.trigger(
+          lGEvents.afterAppendSlide,
+          { index }
+        );
+        if (this.lGalleryOn && this.settings.appendSubHtmlTo === ".lg-item") {
+          this.addHtml(index);
+        }
+      }
+      let _speed = 0;
+      if (delay && !$LG(document.body).hasClass("lg-from-hash")) {
+        _speed = delay;
+      }
+      if (this.isFirstSlideWithZoomAnimation()) {
+        const settleFlight = (onLanded) => onTransitionSettle(
+          $currentSlide.get(),
+          "transform",
+          this.settings.startAnimationDuration + 100,
+          onLanded
+        );
+        settleFlight(() => {
+          $currentSlide.removeClass("lg-start-end-progress lg-start-progress").removeAttr("style");
+        });
+        if (!$currentSlide.hasClass("lg-loaded")) {
+          settleFlight(() => {
+            if (this.getSlideType(currentGalleryItem) === "image") {
+              const { alt } = currentGalleryItem;
+              const altAttr = alt ? 'alt="' + alt + '"' : "";
+              $currentSlide.find(".lg-img-wrap").append(
+                utils.getImgMarkup(
+                  index,
+                  src,
+                  altAttr,
+                  srcset,
+                  sizes,
+                  currentGalleryItem.sources
+                )
+              );
+            }
+            if (this.getSlideType(currentGalleryItem) === "image" || this.getSlideType(currentGalleryItem) === "video" && poster) {
+              this.onLgObjectLoad(
+                $currentSlide,
+                index,
+                delay,
+                _speed,
+                true,
+                false
+              );
+              this.onSlideObjectLoad(
+                $currentSlide,
+                !!(videoInfo && videoInfo.html5 && !poster),
+                () => {
+                  this.loadContentOnFirstSlideLoad(
+                    index,
+                    $currentSlide,
+                    _speed
+                  );
+                },
+                () => {
+                  this.loadContentOnFirstSlideLoad(
+                    index,
+                    $currentSlide,
+                    _speed
+                  );
+                }
+              );
+            }
+          });
+        }
+      }
+      $currentSlide.addClass("lg-loaded");
+      if (!this.isFirstSlideWithZoomAnimation() || this.getSlideType(currentGalleryItem) === "video" && !poster) {
+        this.onLgObjectLoad(
+          $currentSlide,
+          index,
+          delay,
+          _speed,
+          isFirstSlide,
+          !!(videoInfo && videoInfo.html5 && !poster)
+        );
+      }
+      if ((!this.zoomFromOrigin || !this.currentImageSize) && $currentSlide.hasClass("lg-complete_") && !this.lGalleryOn) {
+        setTimeout(() => {
+          $currentSlide.addClass("lg-complete");
+        }, this.settings.backdropDuration);
+      }
+      this.lGalleryOn = true;
+      if (rec === true) {
+        if (!$currentSlide.hasClass("lg-complete_")) {
+          $currentSlide.find(".lg-object").first().on("load.lg error.lg", () => {
+            this.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
+     */
+    loadContentOnFirstSlideLoad(index, $currentSlide, speed) {
+      setTimeout(() => {
+        $currentSlide.find(".lg-dummy-img").remove();
+        $currentSlide.removeClass("lg-first-slide");
+        this.outer.removeClass("lg-first-slide-loading");
+        this.isDummyImageRemoved = true;
+        this.preload(index);
+      }, speed + 300);
+    }
+    getItemsToBeInsertedToDom(index, prevIndex, numberOfItems = 0) {
+      const itemsToBeInsertedToDom = [];
+      let possibleNumberOfItems = Math.max(numberOfItems, 3);
+      possibleNumberOfItems = Math.min(
+        possibleNumberOfItems,
+        this.galleryItems.length
+      );
+      const prevIndexItem = `lg-item-${this.lgId}-${prevIndex}`;
+      if (this.galleryItems.length <= 3) {
+        this.galleryItems.forEach((_element, index2) => {
+          itemsToBeInsertedToDom.push(`lg-item-${this.lgId}-${index2}`);
+        });
+        return itemsToBeInsertedToDom;
+      }
+      if (index < (this.galleryItems.length - 1) / 2) {
+        for (let idx = index; idx > index - possibleNumberOfItems / 2 && idx >= 0; idx--) {
+          itemsToBeInsertedToDom.push(`lg-item-${this.lgId}-${idx}`);
+        }
+        const numberOfExistingItems = itemsToBeInsertedToDom.length;
+        for (let idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) {
+          itemsToBeInsertedToDom.push(
+            `lg-item-${this.lgId}-${index + idx + 1}`
+          );
+        }
+      } else {
+        for (let idx = index; idx <= this.galleryItems.length - 1 && idx < index + possibleNumberOfItems / 2; idx++) {
+          itemsToBeInsertedToDom.push(`lg-item-${this.lgId}-${idx}`);
+        }
+        const numberOfExistingItems = itemsToBeInsertedToDom.length;
+        for (let idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) {
+          itemsToBeInsertedToDom.push(
+            `lg-item-${this.lgId}-${index - idx - 1}`
+          );
+        }
+      }
+      if (this.settings.loop) {
+        if (index === this.galleryItems.length - 1) {
+          itemsToBeInsertedToDom.push(`lg-item-${this.lgId}-${0}`);
+        } else if (index === 0) {
+          itemsToBeInsertedToDom.push(
+            `lg-item-${this.lgId}-${this.galleryItems.length - 1}`
+          );
+        }
+      }
+      if (itemsToBeInsertedToDom.indexOf(prevIndexItem) === -1) {
+        itemsToBeInsertedToDom.push(`lg-item-${this.lgId}-${prevIndex}`);
+      }
+      return itemsToBeInsertedToDom;
+    }
+    organizeSlideItems(index, prevIndex) {
+      var _a, _b;
+      const itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(
+        index,
+        prevIndex,
+        (_b = (_a = this.settings.virtualization) == null ? void 0 : _a.slides) != null ? _b : this.settings.numberOfSlideItemsInDom
+      );
+      itemsToBeInsertedToDom.forEach((item) => {
+        if (this.currentItemsInDom.indexOf(item) === -1) {
+          this.$inner.append(`<div id="${item}" class="lg-item"></div>`);
+        }
+      });
+      this.currentItemsInDom.forEach((item) => {
+        if (itemsToBeInsertedToDom.indexOf(item) === -1) {
+          $LG(`#${item}`).remove();
+        }
+      });
+      return itemsToBeInsertedToDom;
+    }
+    /**
+     * Get previous index of the slide
+     */
+    getPreviousSlideIndex() {
+      let prevIndex = 0;
+      try {
+        const currentItemId = this.outer.find(".lg-current").first().attr("id");
+        prevIndex = parseInt(currentItemId.split("-")[3]) || 0;
+      } catch (error) {
+        prevIndex = 0;
+      }
+      return prevIndex;
+    }
+    setDownloadValue(index) {
+      if (this.settings.download) {
+        const currentGalleryItem = this.galleryItems[index];
+        const hideDownloadBtn = currentGalleryItem.downloadUrl === false || currentGalleryItem.downloadUrl === "false";
+        if (hideDownloadBtn) {
+          this.outer.addClass("lg-hide-download");
+        } else {
+          const $download = this.getElementById("lg-download");
+          this.outer.removeClass("lg-hide-download");
+          $download.attr(
+            "href",
+            currentGalleryItem.downloadUrl || currentGalleryItem.src
+          );
+          if (currentGalleryItem.download) {
+            $download.attr("download", currentGalleryItem.download);
+          }
+        }
+      }
+    }
+    makeSlideAnimation(direction, currentSlideItem, previousSlideItem) {
+      if (this.lGalleryOn) {
+        previousSlideItem.addClass("lg-slide-progress");
+      }
+      setTimeout(
+        () => {
+          this.outer.addClass("lg-no-trans");
+          this.outer.find(".lg-item").removeClass("lg-prev-slide lg-next-slide");
+          if (direction === "prev") {
+            currentSlideItem.addClass("lg-prev-slide");
+            previousSlideItem.addClass("lg-next-slide");
+          } else {
+            currentSlideItem.addClass("lg-next-slide");
+            previousSlideItem.addClass("lg-prev-slide");
+          }
+          setTimeout(() => {
+            this.outer.find(".lg-item").removeClass("lg-current");
+            currentSlideItem.addClass("lg-current");
+            this.outer.removeClass("lg-no-trans");
+          }, 50);
+        },
+        this.lGalleryOn ? this.settings.slideDelay : 0
+      );
+    }
+    /**
+     * Goto a specific slide.
+     * @param {Number} index - index of the slide
+     * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
+     * @param {Boolean} fromThumb - true if slide function called via thumbnail click
+     * @param {String} direction - Direction of the slide(next/prev)
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  // to go to 3rd slide
+     *  plugin.slide(2);
+     *
+     */
+    slide(index, fromTouch, fromThumb, direction) {
+      const prevIndex = this.getPreviousSlideIndex();
+      this.currentItemsInDom = this.organizeSlideItems(index, prevIndex);
+      if (this.lGalleryOn && prevIndex === index) {
+        return;
+      }
+      const numberOfGalleryItems = this.galleryItems.length;
+      if (!this.lgBusy) {
+        if (this.settings.counter) {
+          this.updateCurrentCounter(index);
+        }
+        this.announceSlide(index);
+        const currentSlideItem = this.getSlideItem(index);
+        const previousSlideItem = this.getSlideItem(prevIndex);
+        const currentGalleryItem = this.galleryItems[index];
+        const videoInfo = currentGalleryItem.__slideVideoInfo;
+        this.outer.attr(
+          "data-lg-slide-type",
+          this.getSlideType(currentGalleryItem)
+        );
+        this.setDownloadValue(index);
+        this.updateCurrentImageSize(index);
+        if (videoInfo) {
+          const { top, bottom } = this.mediaContainerPosition;
+          const videoSize = utils.getSize(
+            this.items[index],
+            this.outer,
+            top + bottom,
+            videoInfo && this.settings.videoMaxSize
+          );
+          this.resizeVideoSlide(index, videoSize);
+        }
+        this.LGel.trigger(lGEvents.beforeSlide, {
+          prevIndex,
+          index,
+          fromTouch: !!fromTouch,
+          fromThumb: !!fromThumb
+        });
+        this.lgBusy = true;
+        clearTimeout(this.hideBarTimeout);
+        this.arrowDisable(index);
+        if (!direction) {
+          if (index < prevIndex) {
+            direction = "prev";
+          } else if (index > prevIndex) {
+            direction = "next";
+          }
+        }
+        if (!fromTouch) {
+          this.makeSlideAnimation(
+            direction,
+            currentSlideItem,
+            previousSlideItem
+          );
+        } else {
+          this.outer.find(".lg-item").removeClass("lg-prev-slide lg-current lg-next-slide");
+          let touchPrev;
+          let touchNext;
+          if (numberOfGalleryItems > 2) {
+            touchPrev = index - 1;
+            touchNext = index + 1;
+            if (index === 0 && prevIndex === numberOfGalleryItems - 1) {
+              touchNext = 0;
+              touchPrev = numberOfGalleryItems - 1;
+            } else if (index === numberOfGalleryItems - 1 && prevIndex === 0) {
+              touchNext = 0;
+              touchPrev = numberOfGalleryItems - 1;
+            }
+          } else {
+            touchPrev = 0;
+            touchNext = 1;
+          }
+          if (direction === "prev") {
+            this.getSlideItem(touchNext).addClass("lg-next-slide");
+          } else {
+            this.getSlideItem(touchPrev).addClass("lg-prev-slide");
+          }
+          currentSlideItem.addClass("lg-current");
+        }
+        if (!this.lGalleryOn) {
+          this.loadContent(index, true);
+        } else {
+          setTimeout(() => {
+            this.loadContent(index, true);
+            if (this.settings.appendSubHtmlTo !== ".lg-item") {
+              this.addHtml(index);
+            }
+          }, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay));
+        }
+        setTimeout(() => {
+          this.lgBusy = false;
+          previousSlideItem.removeClass("lg-slide-progress");
+          this.LGel.trigger(lGEvents.afterSlide, {
+            prevIndex,
+            index,
+            fromTouch,
+            fromThumb
+          });
+        }, (this.lGalleryOn ? this.settings.speed + 100 : 100) + (fromTouch ? 0 : this.settings.slideDelay));
+      }
+      this.index = index;
+    }
+    updateCurrentCounter(index) {
+      this.getElementById("lg-counter-current").html(index + 1 + "");
+    }
+    /**
+     * Plain-text caption of a slide for the aria-live announcer. Resolves
+     * the same sources addHtml uses (inline subHtml markup or a selector)
+     * and strips the markup down to readable text. Remote captions
+     * (subHtmlUrl) are skipped, announcing can't wait on a fetch.
+     */
+    getSlideCaptionText(index) {
+      const currentGalleryItem = this.galleryItems[index];
+      if (!currentGalleryItem || currentGalleryItem.subHtmlUrl) {
+        return "";
+      }
+      let subHtml = currentGalleryItem.subHtml || "";
+      const firstLetter = subHtml.substring(0, 1);
+      if (firstLetter === "." || firstLetter === "#") {
+        try {
+          if (this.settings.subHtmlSelectorRelative && !this.settings.dynamic) {
+            subHtml = $LG(this.items).eq(index).find(subHtml).first().html();
+          } else {
+            subHtml = $LG(subHtml).first().html();
+          }
+        } catch (error) {
+          subHtml = "";
+        }
+      }
+      if (!subHtml) {
+        return "";
+      }
+      const container = document.createElement("div");
+      container.innerHTML = subHtml;
+      return container.textContent || "";
+    }
+    /**
+     * Update the polite live region with the shown slide's position and
+     * caption ("Image X of Y, caption"). The single announcement source,
+     * counter and caption bar are not live regions while this is enabled.
+     */
+    announceSlide(index) {
+      if (!this.settings.ariaAnnouncements) {
+        return;
+      }
+      const announcer = this.getElementById("lg-announcer").get();
+      if (!announcer) {
+        return;
+      }
+      announcer.textContent = formatSlideAnnouncement({
+        template: this.settings.strings["slideAnnouncement"],
+        index: index + 1,
+        total: this.galleryItems.length,
+        caption: this.getSlideCaptionText(index)
+      });
+    }
+    updateCounterTotal() {
+      this.getElementById("lg-counter-all").html(
+        this.galleryItems.length + ""
+      );
+    }
+    getSlideType(item) {
+      if (item.__slideVideoInfo) {
+        return "video";
+      } else if (item.iframe) {
+        return "iframe";
+      } else {
+        return "image";
+      }
+    }
+    /** Stop a running release spring; visuals stay at the live frame. */
+    stopSlideSpring() {
+      if (this.cancelSlideSpring) {
+        this.cancelSlideSpring();
+        this.cancelSlideSpring = void 0;
+      }
+    }
+    touchMove(startCoords, endCoords, e) {
+      const distanceX = endCoords.pageX - startCoords.pageX;
+      const distanceY = endCoords.pageY - startCoords.pageY;
+      this.swipeSamples = pushVelocitySample(this.swipeSamples, {
+        x: endCoords.pageX,
+        y: endCoords.pageY,
+        t: Date.now()
+      });
+      this.swipeDirection = getSwipeAxis(
+        distanceX,
+        distanceY,
+        this.swipeDirection
+      );
+      if (!this.swipeDirection) {
+        return;
+      }
+      const $currentSlide = this.getSlideItem(this.index);
+      if (this.swipeDirection === "horizontal") {
+        e == null ? void 0 : e.preventDefault();
+        this.outer.addClass("lg-dragging");
+        const transforms = getHorizontalDragTransforms(
+          this.getEdgeDragDelta(distanceX),
+          $currentSlide.get().offsetWidth,
+          this.getDirection()
+        );
+        $currentSlide.css("transform", transforms.current);
+        this.outer.find(".lg-prev-slide").first().css("transform", transforms.prev);
+        this.outer.find(".lg-next-slide").first().css("transform", transforms.next);
+      } else if (this.swipeDirection === "vertical") {
+        if (this.settings.swipeToClose) {
+          e == null ? void 0 : e.preventDefault();
+          this.$container.addClass("lg-dragging-vertical");
+          const effects = getVerticalDragEffects(
+            distanceY,
+            window.innerWidth,
+            window.innerHeight
+          );
+          this.$backdrop.css("opacity", effects.backdropOpacity);
+          $currentSlide.css("transform", effects.transform);
+          if (effects.hideUi) {
+            this.outer.addClass("lg-hide-items").removeClass("lg-components-open");
+          }
+        }
+      }
+    }
+    /**
+     * The horizontal delta as rendered: rubber-banded when the drag
+     * points past the first/last slide with nothing there (loop counts).
+     */
+    getEdgeDragDelta(distanceX) {
+      const count = this.galleryItems.length;
+      return getEdgeFrictionedDelta(
+        distanceX,
+        resolveSwipeTarget(
+          "prev",
+          this.index,
+          count,
+          this.settings.loop
+        ) !== null,
+        resolveSwipeTarget(
+          "next",
+          this.index,
+          count,
+          this.settings.loop
+        ) !== null,
+        this.getDirection()
+      );
+    }
+    /** Resolved reading direction ('auto' is resolved at init). */
+    getDirection() {
+      return this.settings.direction === "rtl" ? "rtl" : "ltr";
+    }
+    /**
+     * Spring the dragged slides back to rest, seeded with the release
+     * velocity. Returns false (no spring) for sub-pixel drags.
+     */
+    springSlidesBack(deltaX, velocityX) {
+      if (Math.abs(deltaX) < 1) {
+        return false;
+      }
+      const $currentSlide = this.getSlideItem(this.index);
+      const $prev = this.outer.find(".lg-prev-slide").first();
+      const $next = this.outer.find(".lg-next-slide").first();
+      const width = $currentSlide.get().offsetWidth;
+      this.stopSlideSpring();
+      this.cancelSlideSpring = runSprings(
+        [{ from: deltaX, velocity: velocityX, target: 0 }],
+        ([x]) => {
+          const transforms = getHorizontalDragTransforms(
+            x,
+            width,
+            this.getDirection()
+          );
+          $currentSlide.css("transform", transforms.current);
+          $prev.css("transform", transforms.prev);
+          $next.css("transform", transforms.next);
+        },
+        () => {
+          this.cancelSlideSpring = void 0;
+          this.endDragVisuals();
+        }
+      );
+      return true;
+    }
+    /**
+     * Carry the release velocity into a gesture navigation: navigate
+     * immediately (events, counter and busy-lock on time; fromTouch
+     * classes flip underneath, inline transforms keep the visuals),
+     * then spring the same drag geometry until the arriving slide lands
+     * at rest. Falls back to a snap-back when navigation declines
+     * (busy, or an edge without loop, the 2.x end animation plays).
+     */
+    springSlideNavigation(verdict, deltaX, velocityX) {
+      const $current = this.getSlideItem(this.index);
+      const $prev = this.outer.find(".lg-prev-slide").first();
+      const $next = this.outer.find(".lg-next-slide").first();
+      const width = $current.get().offsetWidth;
+      if (!width) {
+        return false;
+      }
+      const prevIndex = this.index;
+      if (verdict === "next") {
+        this.goToNextSlide(true);
+      } else {
+        this.goToPrevSlide(true);
+      }
+      if (this.index === prevIndex) {
+        return this.springSlidesBack(deltaX, velocityX);
+      }
+      const target = (verdict === "next" ? -1 : 1) * (this.getDirection() === "rtl" ? -1 : 1) * (width * 115 / 110);
+      this.stopSlideSpring();
+      this.cancelSlideSpring = runSprings(
+        [{ from: deltaX, velocity: velocityX, target }],
+        ([x]) => {
+          const transforms = getHorizontalDragTransforms(
+            x,
+            width,
+            this.getDirection()
+          );
+          $current.css("transform", transforms.current);
+          $prev.css("transform", transforms.prev);
+          $next.css("transform", transforms.next);
+        },
+        () => {
+          this.cancelSlideSpring = void 0;
+          this.endDragVisuals();
+        }
+      );
+      return true;
+    }
+    /**
+     * Hand the slides back to CSS after a gesture. The inline transforms
+     * go first, while lg-dragging still pins transition-duration to 0s,
+     * so the snap from the released position to the slide's resting
+     * place lands in a single frame. Dropping the class first animates
+     * that snap instead, and the outgoing slide is seen travelling back
+     * toward the centre while its fade is still running.
+     */
+    endDragVisuals() {
+      this.outer.find(".lg-item").removeAttr("style");
+      if (this.settings.mode !== "lg-slide") {
+        this.outer.removeClass("lg-slide");
+      }
+      void this.outer.get().offsetHeight;
+      this.outer.removeClass("lg-dragging");
+    }
+    /**
+     * Spring a non-closing vertical drag back to rest, slide transform
+     * and backdrop opacity together, seeded with the release velocity.
+     */
+    springVerticalRestore(deltaY, velocityY) {
+      if (Math.abs(deltaY) < 1) {
+        return false;
+      }
+      const $currentSlide = this.getSlideItem(this.index);
+      this.stopSlideSpring();
+      this.$container.addClass("lg-dragging-vertical");
+      this.cancelSlideSpring = runSprings(
+        [{ from: deltaY, velocity: velocityY, target: 0 }],
+        ([y]) => {
+          const effects = getVerticalDragEffects(
+            y,
+            window.innerWidth,
+            window.innerHeight
+          );
+          this.$backdrop.css("opacity", effects.backdropOpacity);
+          $currentSlide.css("transform", effects.transform);
+        },
+        () => {
+          this.cancelSlideSpring = void 0;
+          this.$container.removeClass("lg-dragging-vertical");
+          this.endDragVisuals();
+          this.$backdrop.css("opacity", 1);
+        }
+      );
+      return true;
+    }
+    touchEnd(endCoords, startCoords, event) {
+      const releaseVelocity = getWindowedVelocity(
+        this.swipeSamples,
+        Date.now()
+      );
+      if (this.settings.mode !== "lg-slide") {
+        this.outer.addClass("lg-slide");
+      }
+      setTimeout(() => {
+        this.$container.removeClass("lg-dragging-vertical");
+        this.outer.removeClass("lg-hide-items").addClass("lg-components-open");
+        let triggerClick = true;
+        let springing = false;
+        if (this.swipeDirection === "horizontal") {
+          const verdict = getSwipeReleaseVerdict({
+            deltaX: endCoords.pageX - startCoords.pageX,
+            velocityX: releaseVelocity.x,
+            threshold: this.settings.swipeThreshold,
+            flickVelocity: this.settings.flickVelocity,
+            viewportWidth: this.outer.get().offsetWidth,
+            direction: this.getDirection()
+          });
+          const renderedDeltaX = this.getEdgeDragDelta(
+            endCoords.pageX - startCoords.pageX
+          );
+          if (verdict === "next" || verdict === "prev") {
+            triggerClick = false;
+            springing = this.springSlideNavigation(
+              verdict,
+              renderedDeltaX,
+              releaseVelocity.x
+            );
+          } else {
+            springing = this.springSlidesBack(
+              renderedDeltaX,
+              releaseVelocity.x
+            );
+          }
+        } else if (this.swipeDirection === "vertical") {
+          if (shouldCloseOnVerticalDrag(
+            endCoords.pageY - startCoords.pageY,
+            releaseVelocity.y,
+            window.innerHeight,
+            {
+              closable: this.settings.closable,
+              swipeToClose: this.settings.swipeToClose
+            }
+          )) {
+            this.closeGallery();
+            return;
+          }
+          if (this.settings.swipeToClose) {
+            springing = this.springVerticalRestore(
+              endCoords.pageY - startCoords.pageY,
+              releaseVelocity.y
+            );
+          }
+        }
+        if (!springing) {
+          this.endDragVisuals();
+          this.$backdrop.css("opacity", 1);
+        }
+        if (triggerClick && Math.abs(endCoords.pageX - startCoords.pageX) < 5) {
+          const target = $LG(event.target);
+          if (this.isPosterElement(target)) {
+            this.LGel.trigger(lGEvents.posterClick);
+          }
+        }
+        this.swipeDirection = void 0;
+      });
+      setTimeout(() => {
+        if (!this.outer.hasClass("lg-dragging") && this.settings.mode !== "lg-slide") {
+          this.outer.removeClass("lg-slide");
+        }
+      }, this.settings.speed + 100);
+    }
+    enableSwipe() {
+      let startCoords = {};
+      let endCoords = {};
+      let isMoved = false;
+      let isSwiping = false;
+      if (this.settings.enableSwipe) {
+        this.$inner.on("touchstart.lg", (e) => {
+          this.dragOrSwipeEnabled = true;
+          const $item = this.getSlideItem(this.index);
+          if (($LG(e.target).hasClass("lg-item") || $item.get().contains(e.target)) && !this.outer.hasClass("lg-zoomed") && !this.lgBusy && e.touches.length === 1) {
+            isSwiping = true;
+            this.touchAction = "swipe";
+            isMoved = false;
+            endCoords = {};
+            this.stopSlideSpring();
+            this.manageSwipeClass();
+            this.swipeSamples = [
+              {
+                x: e.touches[0].pageX,
+                y: e.touches[0].pageY,
+                t: Date.now()
+              }
+            ];
+            startCoords = {
+              pageX: e.touches[0].pageX,
+              pageY: e.touches[0].pageY
+            };
+          }
+        });
+        this.$inner.on("touchmove.lg", (e) => {
+          if (isSwiping && this.touchAction === "swipe" && e.touches.length === 1) {
+            endCoords = {
+              pageX: e.touches[0].pageX,
+              pageY: e.touches[0].pageY
+            };
+            this.touchMove(startCoords, endCoords, e);
+            isMoved = true;
+          }
+        });
+        this.$inner.on("touchend.lg", (event) => {
+          if (this.touchAction === "swipe") {
+            if (isMoved) {
+              isMoved = false;
+              this.touchEnd(endCoords, startCoords, event);
+            } else if (isSwiping) {
+              const target = $LG(event.target);
+              if (this.isPosterElement(target)) {
+                this.LGel.trigger(lGEvents.posterClick);
+              }
+            }
+            this.touchAction = void 0;
+            isSwiping = false;
+          }
+        });
+      }
+    }
+    enableDrag() {
+      let startCoords = {};
+      let endCoords = {};
+      let isDraging = false;
+      let isMoved = false;
+      if (this.settings.enableDrag) {
+        this.outer.on("mousedown.lg", (e) => {
+          this.dragOrSwipeEnabled = true;
+          const $item = this.getSlideItem(this.index);
+          if ($LG(e.target).hasClass("lg-item") || $item.get().contains(e.target)) {
+            if (!this.outer.hasClass("lg-zoomed") && !this.lgBusy) {
+              e.preventDefault();
+              this.stopSlideSpring();
+              this.manageSwipeClass();
+              this.swipeSamples = [
+                { x: e.pageX, y: e.pageY, t: Date.now() }
+              ];
+              startCoords = {
+                pageX: e.pageX,
+                pageY: e.pageY
+              };
+              isDraging = true;
+              this.outer.get().scrollLeft += 1;
+              this.outer.get().scrollLeft -= 1;
+              this.outer.removeClass("lg-grab").addClass("lg-grabbing");
+              this.LGel.trigger(lGEvents.dragStart);
+            }
+          }
+        });
+        $LG(window).on(`mousemove.lg.global${this.lgId}`, (e) => {
+          if (isDraging && this.lgOpened) {
+            isMoved = true;
+            endCoords = {
+              pageX: e.pageX,
+              pageY: e.pageY
+            };
+            this.touchMove(startCoords, endCoords);
+            this.LGel.trigger(lGEvents.dragMove);
+          }
+        });
+        $LG(window).on(`mouseup.lg.global${this.lgId}`, (event) => {
+          if (!this.lgOpened) {
+            return;
+          }
+          const target = $LG(event.target);
+          if (isMoved) {
+            isMoved = false;
+            this.touchEnd(endCoords, startCoords, event);
+            this.LGel.trigger(lGEvents.dragEnd);
+          } else if (this.isPosterElement(target)) {
+            this.LGel.trigger(lGEvents.posterClick);
+          }
+          if (isDraging) {
+            isDraging = false;
+            this.outer.removeClass("lg-grabbing").addClass("lg-grab");
+          }
+        });
+      }
+    }
+    triggerPosterClick() {
+      this.$inner.on("click.lg", (event) => {
+        if (!this.dragOrSwipeEnabled && this.isPosterElement($LG(event.target))) {
+          this.LGel.trigger(lGEvents.posterClick);
+        }
+      });
+    }
+    manageSwipeClass() {
+      let _touchNext = this.index + 1;
+      let _touchPrev = this.index - 1;
+      if (this.settings.loop && this.galleryItems.length > 2) {
+        if (this.index === 0) {
+          _touchPrev = this.galleryItems.length - 1;
+        } else if (this.index === this.galleryItems.length - 1) {
+          _touchNext = 0;
+        }
+      }
+      this.outer.find(".lg-item").removeClass("lg-next-slide lg-prev-slide");
+      if (_touchPrev > -1) {
+        this.getSlideItem(_touchPrev).addClass("lg-prev-slide");
+      }
+      this.getSlideItem(_touchNext).addClass("lg-next-slide");
+    }
+    /**
+     * Go to next slide
+     * @param {Boolean} fromTouch - true if slide function called via touch event
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  plugin.goToNextSlide();
+     * @see <a href="/demos/methods/">Demo</a>
+     */
+    goToNextSlide(fromTouch) {
+      let _loop = this.settings.loop;
+      if (fromTouch && this.galleryItems.length < 3) {
+        _loop = false;
+      }
+      if (!this.lgBusy) {
+        if (this.index + 1 < this.galleryItems.length) {
+          this.index++;
+          this.LGel.trigger(lGEvents.beforeNextSlide, {
+            index: this.index
+          });
+          this.slide(this.index, !!fromTouch, false, "next");
+        } else {
+          if (_loop) {
+            this.index = 0;
+            this.LGel.trigger(lGEvents.beforeNextSlide, {
+              index: this.index
+            });
+            this.slide(this.index, !!fromTouch, false, "next");
+          } else if (this.settings.slideEndAnimation && !fromTouch) {
+            this.outer.addClass("lg-right-end");
+            setTimeout(() => {
+              this.outer.removeClass("lg-right-end");
+            }, 400);
+          }
+        }
+      }
+    }
+    /**
+     * Go to previous slides
+     * @param {Boolean} fromTouch - true if slide function called via touch event
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery({});
+     *  plugin.goToPrevSlide();
+     * @see <a href="/demos/methods/">Demo</a>
+     *
+     */
+    goToPrevSlide(fromTouch) {
+      let _loop = this.settings.loop;
+      if (fromTouch && this.galleryItems.length < 3) {
+        _loop = false;
+      }
+      if (!this.lgBusy) {
+        if (this.index > 0) {
+          this.index--;
+          this.LGel.trigger(lGEvents.beforePrevSlide, {
+            index: this.index,
+            fromTouch
+          });
+          this.slide(this.index, !!fromTouch, false, "prev");
+        } else {
+          if (_loop) {
+            this.index = this.galleryItems.length - 1;
+            this.LGel.trigger(lGEvents.beforePrevSlide, {
+              index: this.index,
+              fromTouch
+            });
+            this.slide(this.index, !!fromTouch, false, "prev");
+          } else if (this.settings.slideEndAnimation && !fromTouch) {
+            this.outer.addClass("lg-left-end");
+            setTimeout(() => {
+              this.outer.removeClass("lg-left-end");
+            }, 400);
+          }
+        }
+      }
+    }
+    keyPress() {
+      $LG(window).on(`keydown.lg.global${this.lgId}`, (e) => {
+        if (this.lgOpened && this.settings.escKey === true && e.keyCode === 27) {
+          e.preventDefault();
+          if (this.settings.allowMediaOverlap && this.outer.hasClass("lg-can-toggle") && this.outer.hasClass("lg-components-open")) {
+            this.outer.removeClass("lg-components-open");
+          } else {
+            this.closeGallery();
+          }
+        }
+        if (this.lgOpened && this.galleryItems.length > 1) {
+          const rtl = this.getDirection() === "rtl";
+          if (e.keyCode === 37) {
+            e.preventDefault();
+            if (rtl) {
+              this.goToNextSlide();
+            } else {
+              this.goToPrevSlide();
+            }
+          }
+          if (e.keyCode === 39) {
+            e.preventDefault();
+            if (rtl) {
+              this.goToPrevSlide();
+            } else {
+              this.goToNextSlide();
+            }
+          }
+        }
+      });
+    }
+    arrow() {
+      this.getElementById("lg-prev").on("click.lg", () => {
+        this.goToPrevSlide();
+      });
+      this.getElementById("lg-next").on("click.lg", () => {
+        this.goToNextSlide();
+      });
+    }
+    arrowDisable(index) {
+      if (!this.settings.loop && this.settings.hideControlOnEnd) {
+        const $prev = this.getElementById("lg-prev");
+        const $next = this.getElementById("lg-next");
+        if (index + 1 === this.galleryItems.length) {
+          $next.attr("disabled", "disabled").addClass("disabled");
+        } else {
+          $next.removeAttr("disabled").removeClass("disabled");
+        }
+        if (index === 0) {
+          $prev.attr("disabled", "disabled").addClass("disabled");
+        } else {
+          $prev.removeAttr("disabled").removeClass("disabled");
+        }
+      }
+    }
+    setTranslate($el, xValue, yValue, scaleX = 1, scaleY = 1) {
+      $el.css(
+        "transform",
+        "translate3d(" + xValue + "px, " + yValue + "px, 0px) scale3d(" + scaleX + ", " + scaleY + ", 1)"
+      );
+    }
+    mousewheel() {
+      let lastCall = 0;
+      this.outer.on("wheel.lg", (e) => {
+        if (!e.deltaY || this.galleryItems.length < 2) {
+          return;
+        }
+        e.preventDefault();
+        const now = (/* @__PURE__ */ new Date()).getTime();
+        if (now - lastCall < 1e3) {
+          return;
+        }
+        lastCall = now;
+        if (e.deltaY > 0) {
+          this.goToNextSlide();
+        } else if (e.deltaY < 0) {
+          this.goToPrevSlide();
+        }
+      });
+    }
+    isSlideElement(target) {
+      return target.hasClass("lg-outer") || target.hasClass("lg-item") || target.hasClass("lg-img-wrap") || target.hasClass("lg-img-rotate");
+    }
+    isPosterElement(target) {
+      const playButton = this.getSlideItem(this.index).find(".lg-video-play-button").get();
+      return target.hasClass("lg-video-poster") || target.hasClass("lg-video-play-button") || playButton && playButton.contains(target.get());
+    }
+    /**
+     * Maximize minimize inline gallery.
+     * @category lGPublicMethods
+     */
+    toggleMaximize() {
+      this.getElementById("lg-maximize").on("click.lg", () => {
+        this.$container.toggleClass("lg-inline");
+        this.refreshOnResize();
+      });
+    }
+    invalidateItems() {
+      for (let index = 0; index < this.items.length; index++) {
+        const element = this.items[index];
+        const $element = $LG(element);
+        $element.off(`click.lgcustom-item-${$element.attr("data-lg-id")}`);
+      }
+    }
+    trapFocus() {
+      this.$container.get().focus({
+        preventScroll: true
+      });
+      $LG(window).on(`keydown.lg.global${this.lgId}`, (e) => {
+        if (!this.lgOpened) {
+          return;
+        }
+        const isTabPressed = e.key === "Tab" || e.keyCode === 9;
+        if (!isTabPressed) {
+          return;
+        }
+        const focusableEls = utils.getFocusableElements(
+          this.$container.get()
+        );
+        const firstFocusableEl = focusableEls[0];
+        const lastFocusableEl = focusableEls[focusableEls.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableEl) {
+            lastFocusableEl.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastFocusableEl) {
+            firstFocusableEl.focus();
+            e.preventDefault();
+          }
+        }
+      });
+    }
+    manageCloseGallery() {
+      if (!this.settings.closable) return;
+      let mousedown = false;
+      this.getElementById("lg-close").on("click.lg", () => {
+        this.closeGallery();
+      });
+      if (this.settings.closeOnTap) {
+        this.outer.on("mousedown.lg", (e) => {
+          const target = $LG(e.target);
+          if (this.isSlideElement(target)) {
+            mousedown = true;
+          } else {
+            mousedown = false;
+          }
+        });
+        this.outer.on("mousemove.lg", () => {
+          mousedown = false;
+        });
+        this.outer.on("mouseup.lg", (e) => {
+          const target = $LG(e.target);
+          if (this.isSlideElement(target) && mousedown) {
+            if (!this.outer.hasClass("lg-dragging")) {
+              this.closeGallery();
+            }
+          }
+        });
+      }
+    }
+    /**
+     * Close lightGallery if it is opened.
+     *
+     * @description If closable is false in the settings, you need to pass true via closeGallery method to force close gallery
+     * @return returns the estimated time to close gallery completely including the close animation duration
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  plugin.closeGallery();
+     *
+     */
+    closeGallery(force) {
+      if (!this.lgOpened || !this.settings.closable && !force) {
+        return 0;
+      }
+      this.LGel.trigger(lGEvents.beforeClose);
+      if (this.settings.resetScrollPosition && !this.settings.hideScrollbar) {
+        $LG(window).scrollTop(this.prevScrollTop);
+      }
+      const currentItem = this.items[this.index];
+      let transform;
+      if (this.zoomFromOrigin && currentItem) {
+        const { top, bottom } = this.mediaContainerPosition;
+        const { __slideVideoInfo, poster } = this.galleryItems[this.index];
+        const imageSize = utils.getSize(
+          currentItem,
+          this.outer,
+          top + bottom,
+          __slideVideoInfo && poster && this.settings.videoMaxSize
+        );
+        transform = this.getOriginTransform(currentItem, imageSize);
+      }
+      if (!transform) {
+        transform = getCenterCloseTransform();
+        this.outer.addClass("lg-close-to-center");
+      }
+      if (transform) {
+        this.outer.addClass("lg-closing lg-zoom-from-image");
+        this.getSlideItem(this.index).addClass("lg-start-end-progress").css(
+          "transition-duration",
+          this.settings.startAnimationDuration + "ms"
+        ).css("transform", transform);
+      } else {
+        this.outer.addClass("lg-hide-items");
+        this.outer.removeClass("lg-zoom-from-image");
+      }
+      this.destroyModules();
+      this.lGalleryOn = false;
+      this.isDummyImageRemoved = false;
+      this.zoomFromOrigin = this.settings.zoomFromOrigin;
+      clearTimeout(this.hideBarTimeout);
+      this.hideBarTimeout = false;
+      $LG("html").removeClass("lg-on");
+      this.outer.removeClass("lg-visible lg-components-open");
+      this.$backdrop.removeClass("in").css("opacity", 0);
+      const removeTimeout = transform ? Math.max(
+        this.settings.startAnimationDuration,
+        this.settings.backdropDuration
+      ) : this.settings.backdropDuration;
+      this.$container.removeClass("lg-show-in");
+      setTimeout(() => {
+        if (transform) {
+          this.outer.removeClass("lg-zoom-from-image");
+        }
+        this.$container.removeClass("lg-show");
+        this.resetScrollBar();
+        this.$backdrop.removeAttr("style").css(
+          "transition-duration",
+          this.settings.backdropDuration + "ms"
+        );
+        this.outer.removeClass(
+          `lg-closing lg-close-to-center ${this.settings.startClass}`
+        );
+        this.getSlideItem(this.index).removeClass("lg-start-end-progress");
+        this.$inner.empty();
+        const announcer = this.getElementById("lg-announcer").get();
+        if (announcer) {
+          announcer.textContent = "";
+        }
+        if (this.lgOpened) {
+          this.LGel.trigger(lGEvents.afterClose, {
+            instance: this
+          });
+        }
+        if (this.$container.get()) {
+          this.$container.get().blur();
+        }
+        if (this.prevActiveElement && this.prevActiveElement.isConnected) {
+          this.prevActiveElement.focus({ preventScroll: true });
+        }
+        this.prevActiveElement = void 0;
+        this.lgOpened = false;
+      }, removeTimeout + 100);
+      return removeTimeout + 100;
+    }
+    initModules() {
+      this.plugins.forEach((module2) => {
+        try {
+          module2.init();
+        } catch (err) {
+          console.warn(
+            `lightGallery:- make sure lightGallery module is properly initiated. See https://www.lightgalleryjs.com/docs/methods/`
+          );
+        }
+      });
+    }
+    destroyModules(destroy) {
+      this.plugins.forEach((module2) => {
+        try {
+          if (destroy) {
+            module2.destroy();
+          } else {
+            module2.closeGallery && module2.closeGallery();
+          }
+        } catch (err) {
+          console.warn(
+            `lightGallery:- make sure lightGallery module is properly destroyed. See https://www.lightgalleryjs.com/docs/methods/`
+          );
+        }
+      });
+    }
+    /**
+     * Refresh lightGallery with new set of children.
+     *
+     * @description This is useful to update the gallery when the child elements are changed without calling destroy method.
+     *
+     * If you are using dynamic mode, you can pass the modified array of dynamicEl as the first parameter to refresh the dynamic gallery
+     * @see <a href="/demos/dynamic-mode/">Demo</a>
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  // Delete or add children, then call
+     *  plugin.refresh();
+     *
+     */
+    refresh(galleryItems) {
+      if (!this.settings.dynamic) {
+        this.invalidateItems();
+      }
+      if (galleryItems) {
+        this.galleryItems = galleryItems;
+      } else {
+        this.galleryItems = this.getItems();
+      }
+      this.updateControls();
+      this.openGalleryOnItemClick();
+      this.LGel.trigger(lGEvents.updateSlides);
+    }
+    updateControls() {
+      this.addSlideVideoInfo(this.galleryItems);
+      this.updateCounterTotal();
+      this.manageSingleSlideClassName();
+    }
+    destroyGallery() {
+      var _a;
+      this.destroyModules(true);
+      if (!this.settings.dynamic) {
+        this.invalidateItems();
+      }
+      $LG(window).off(`.lg.global${this.lgId}`);
+      this.LGel.off(".lg");
+      (_a = this.toolbarOverflow) == null ? void 0 : _a.destroy();
+      this.toolbarOverflow = void 0;
+      this.$container.remove();
+    }
+    /**
+     * Destroy lightGallery.
+     * Destroy lightGallery and its plugin instances completely
+     *
+     * @description This method also calls CloseGallery function internally. Returns the time takes to completely close and destroy the instance.
+     * In case if you want to re-initialize lightGallery right after destroying it, initialize it only once the destroy process is completed.
+     * You can use refresh method most of the times.
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  plugin.destroy();
+     *
+     */
+    destroy() {
+      const closeTimeout = this.closeGallery(true);
+      if (closeTimeout) {
+        setTimeout(this.destroyGallery.bind(this), closeTimeout);
+      } else {
+        this.destroyGallery();
+      }
+      return closeTimeout;
+    }
+  }
+  function lightGallery(el, options) {
+    return new LightGallery(el, options);
+  }
+  lightGallery.setLicenseKey = setLicenseKey;
+  return lightGallery;
+});
+//# sourceMappingURL=lightgallery.umd.js.map