lightgallery 2.9.0 → 3.0.0-beta.2

package/react/Lightgallery.es5.js

@@ -1,2988 +0,0 @@
-import { useRef, useCallback, useEffect, createElement } from 'react';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-/*!
- * lightgallery | 2.9.0 | October 1st 2025
- * http://www.lightgalleryjs.com/
- * Copyright (c) 2020 Sachin Neravath;
- * @license GPLv3
- */
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-
-/**
- * List of lightGallery events
- * All events should be documented here
- * Below interfaces are used to build the website documentations
- * */
-var 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',
-    rotateLeft: 'lgRotateLeft',
-    rotateRight: 'lgRotateRight',
-    flipHorizontal: 'lgFlipHorizontal',
-    flipVertical: 'lgFlipVertical',
-    autoplay: 'lgAutoplay',
-    autoplayStart: 'lgAutoplayStart',
-    autoplayStop: 'lgAutoplayStop',
-};
-
-var 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: 10000,
-    slideDelay: 0,
-    supportLegacyBrowser: true,
-    allowMediaOverlap: false,
-    videoMaxSize: '1280-720',
-    loadYouTubePoster: true,
-    defaultCaptionHeight: 0,
-    ariaLabelledby: '',
-    ariaDescribedby: '',
-    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,
-    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,
-    enableSwipe: true,
-    enableDrag: true,
-    dynamic: false,
-    dynamicEl: [],
-    extraProps: [],
-    exThumbImage: '',
-    isMobile: undefined,
-    mobileSettings: {
-        controls: false,
-        showCloseIcon: false,
-        download: 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...',
-    },
-};
-
-function initLgPolyfills() {
-    (function () {
-        if (typeof window.CustomEvent === 'function')
-            return false;
-        function CustomEvent(event, params) {
-            params = params || {
-                bubbles: false,
-                cancelable: false,
-                detail: null,
-            };
-            var evt = document.createEvent('CustomEvent');
-            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-            return evt;
-        }
-        window.CustomEvent = CustomEvent;
-    })();
-    (function () {
-        if (!Element.prototype.matches) {
-            Element.prototype.matches =
-                Element.prototype.msMatchesSelector ||
-                    Element.prototype.webkitMatchesSelector;
-        }
-    })();
-}
-var lgQuery = /** @class */ (function () {
-    function lgQuery(selector) {
-        this.cssVenderPrefixes = [
-            'TransitionDuration',
-            'TransitionTimingFunction',
-            'Transform',
-            'Transition',
-        ];
-        this.selector = this._getSelector(selector);
-        this.firstElement = this._getFirstEl();
-        return this;
-    }
-    lgQuery.generateUUID = function () {
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-            var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
-            return v.toString(16);
-        });
-    };
-    lgQuery.prototype._getSelector = function (selector, context) {
-        if (context === void 0) { context = document; }
-        if (typeof selector !== 'string') {
-            return selector;
-        }
-        context = context || document;
-        var fl = selector.substring(0, 1);
-        if (fl === '#') {
-            return context.querySelector(selector);
-        }
-        else {
-            return context.querySelectorAll(selector);
-        }
-    };
-    lgQuery.prototype._each = function (func) {
-        if (!this.selector) {
-            return this;
-        }
-        if (this.selector.length !== undefined) {
-            [].forEach.call(this.selector, func);
-        }
-        else {
-            func(this.selector, 0);
-        }
-        return this;
-    };
-    lgQuery.prototype._setCssVendorPrefix = function (el, cssProperty, value) {
-        // prettier-ignore
-        var 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;
-        }
-    };
-    lgQuery.prototype._getFirstEl = function () {
-        if (this.selector && this.selector.length !== undefined) {
-            return this.selector[0];
-        }
-        else {
-            return this.selector;
-        }
-    };
-    lgQuery.prototype.isEventMatched = function (event, eventName) {
-        var eventNamespace = eventName.split('.');
-        return event
-            .split('.')
-            .filter(function (e) { return e; })
-            .every(function (e) {
-            return eventNamespace.indexOf(e) !== -1;
-        });
-    };
-    lgQuery.prototype.attr = function (attr, value) {
-        if (value === undefined) {
-            if (!this.firstElement) {
-                return '';
-            }
-            return this.firstElement.getAttribute(attr);
-        }
-        this._each(function (el) {
-            el.setAttribute(attr, value);
-        });
-        return this;
-    };
-    lgQuery.prototype.find = function (selector) {
-        return $LG(this._getSelector(selector, this.selector));
-    };
-    lgQuery.prototype.first = function () {
-        if (this.selector && this.selector.length !== undefined) {
-            return $LG(this.selector[0]);
-        }
-        else {
-            return $LG(this.selector);
-        }
-    };
-    lgQuery.prototype.eq = function (index) {
-        return $LG(this.selector[index]);
-    };
-    lgQuery.prototype.parent = function () {
-        return $LG(this.selector.parentElement);
-    };
-    lgQuery.prototype.get = function () {
-        return this._getFirstEl();
-    };
-    lgQuery.prototype.removeAttr = function (attributes) {
-        var attrs = attributes.split(' ');
-        this._each(function (el) {
-            attrs.forEach(function (attr) { return el.removeAttribute(attr); });
-        });
-        return this;
-    };
-    lgQuery.prototype.wrap = function (className) {
-        if (!this.firstElement) {
-            return this;
-        }
-        var 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;
-    };
-    lgQuery.prototype.addClass = function (classNames) {
-        if (classNames === void 0) { classNames = ''; }
-        this._each(function (el) {
-            // IE doesn't support multiple arguments
-            classNames.split(' ').forEach(function (className) {
-                if (className) {
-                    el.classList.add(className);
-                }
-            });
-        });
-        return this;
-    };
-    lgQuery.prototype.removeClass = function (classNames) {
-        this._each(function (el) {
-            // IE doesn't support multiple arguments
-            classNames.split(' ').forEach(function (className) {
-                if (className) {
-                    el.classList.remove(className);
-                }
-            });
-        });
-        return this;
-    };
-    lgQuery.prototype.hasClass = function (className) {
-        if (!this.firstElement) {
-            return false;
-        }
-        return this.firstElement.classList.contains(className);
-    };
-    lgQuery.prototype.hasAttribute = function (attribute) {
-        if (!this.firstElement) {
-            return false;
-        }
-        return this.firstElement.hasAttribute(attribute);
-    };
-    lgQuery.prototype.toggleClass = function (className) {
-        if (!this.firstElement) {
-            return this;
-        }
-        if (this.hasClass(className)) {
-            this.removeClass(className);
-        }
-        else {
-            this.addClass(className);
-        }
-        return this;
-    };
-    lgQuery.prototype.css = function (property, value) {
-        var _this = this;
-        this._each(function (el) {
-            _this._setCssVendorPrefix(el, property, value);
-        });
-        return this;
-    };
-    // Need to pass separate namespaces for separate elements
-    lgQuery.prototype.on = function (events, listener) {
-        var _this = this;
-        if (!this.selector) {
-            return this;
-        }
-        events.split(' ').forEach(function (event) {
-            if (!Array.isArray(lgQuery.eventListeners[event])) {
-                lgQuery.eventListeners[event] = [];
-            }
-            lgQuery.eventListeners[event].push(listener);
-            _this.selector.addEventListener(event.split('.')[0], listener);
-        });
-        return this;
-    };
-    // @todo - test this
-    lgQuery.prototype.once = function (event, listener) {
-        var _this = this;
-        this.on(event, function () {
-            _this.off(event);
-            listener(event);
-        });
-        return this;
-    };
-    lgQuery.prototype.off = function (event) {
-        var _this = this;
-        if (!this.selector) {
-            return this;
-        }
-        Object.keys(lgQuery.eventListeners).forEach(function (eventName) {
-            if (_this.isEventMatched(event, eventName)) {
-                lgQuery.eventListeners[eventName].forEach(function (listener) {
-                    _this.selector.removeEventListener(eventName.split('.')[0], listener);
-                });
-                lgQuery.eventListeners[eventName] = [];
-            }
-        });
-        return this;
-    };
-    lgQuery.prototype.trigger = function (event, detail) {
-        if (!this.firstElement) {
-            return this;
-        }
-        var customEvent = new CustomEvent(event.split('.')[0], {
-            detail: detail || null,
-        });
-        this.firstElement.dispatchEvent(customEvent);
-        return this;
-    };
-    // Does not support IE
-    lgQuery.prototype.load = function (url) {
-        var _this = this;
-        fetch(url)
-            .then(function (res) { return res.text(); })
-            .then(function (html) {
-            _this.selector.innerHTML = html;
-        });
-        return this;
-    };
-    lgQuery.prototype.html = function (html) {
-        if (html === undefined) {
-            if (!this.firstElement) {
-                return '';
-            }
-            return this.firstElement.innerHTML;
-        }
-        this._each(function (el) {
-            el.innerHTML = html;
-        });
-        return this;
-    };
-    lgQuery.prototype.append = function (html) {
-        this._each(function (el) {
-            if (typeof html === 'string') {
-                el.insertAdjacentHTML('beforeend', html);
-            }
-            else {
-                el.appendChild(html);
-            }
-        });
-        return this;
-    };
-    lgQuery.prototype.prepend = function (html) {
-        this._each(function (el) {
-            if (typeof html === 'string') {
-                el.insertAdjacentHTML('afterbegin', html);
-            }
-            else if (html instanceof HTMLElement) {
-                el.insertBefore(html.cloneNode(true), el.firstChild);
-            }
-        });
-        return this;
-    };
-    lgQuery.prototype.remove = function () {
-        this._each(function (el) {
-            el.parentNode.removeChild(el);
-        });
-        return this;
-    };
-    lgQuery.prototype.empty = function () {
-        this._each(function (el) {
-            el.innerHTML = '';
-        });
-        return this;
-    };
-    lgQuery.prototype.scrollTop = function (scrollTop) {
-        if (scrollTop !== undefined) {
-            document.body.scrollTop = scrollTop;
-            document.documentElement.scrollTop = scrollTop;
-            return this;
-        }
-        else {
-            return (window.pageYOffset ||
-                document.documentElement.scrollTop ||
-                document.body.scrollTop ||
-                0);
-        }
-    };
-    lgQuery.prototype.scrollLeft = function (scrollLeft) {
-        if (scrollLeft !== undefined) {
-            document.body.scrollLeft = scrollLeft;
-            document.documentElement.scrollLeft = scrollLeft;
-            return this;
-        }
-        else {
-            return (window.pageXOffset ||
-                document.documentElement.scrollLeft ||
-                document.body.scrollLeft ||
-                0);
-        }
-    };
-    lgQuery.prototype.offset = function () {
-        if (!this.firstElement) {
-            return {
-                left: 0,
-                top: 0,
-            };
-        }
-        var rect = this.firstElement.getBoundingClientRect();
-        var bodyMarginLeft = $LG('body').style().marginLeft;
-        // Minus body margin - https://stackoverflow.com/questions/30711548/is-getboundingclientrect-left-returning-a-wrong-value
-        return {
-            left: rect.left - parseFloat(bodyMarginLeft) + this.scrollLeft(),
-            top: rect.top + this.scrollTop(),
-        };
-    };
-    lgQuery.prototype.style = function () {
-        if (!this.firstElement) {
-            return {};
-        }
-        return (this.firstElement.currentStyle ||
-            window.getComputedStyle(this.firstElement));
-    };
-    // Width without padding and border even if box-sizing is used.
-    lgQuery.prototype.width = function () {
-        var style = this.style();
-        return (this.firstElement.clientWidth -
-            parseFloat(style.paddingLeft) -
-            parseFloat(style.paddingRight));
-    };
-    // Height without padding and border even if box-sizing is used.
-    lgQuery.prototype.height = function () {
-        var style = this.style();
-        return (this.firstElement.clientHeight -
-            parseFloat(style.paddingTop) -
-            parseFloat(style.paddingBottom));
-    };
-    lgQuery.eventListeners = {};
-    return lgQuery;
-}());
-function $LG(selector) {
-    initLgPolyfills();
-    return new lgQuery(selector);
-}
-
-var defaultDynamicOptions = [
-    'src',
-    'sources',
-    'subHtml',
-    'subHtmlUrl',
-    'html',
-    'video',
-    'poster',
-    'slideName',
-    'responsive',
-    'srcset',
-    'sizes',
-    'iframe',
-    'downloadUrl',
-    'download',
-    'width',
-    'facebookShareUrl',
-    'tweetText',
-    'iframeTitle',
-    'twitterShareUrl',
-    'pinterestShareUrl',
-    'pinterestText',
-    'fbHtml',
-    'disqusIdentifier',
-    'disqusUrl',
-];
-// Convert html data-attribute to camalcase
-function convertToData(attr) {
-    // FInd a way for lgsize
-    if (attr === 'href') {
-        return 'src';
-    }
-    attr = attr.replace('data-', '');
-    attr = attr.charAt(0).toLowerCase() + attr.slice(1);
-    attr = attr.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-    return attr;
-}
-var 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: function (url, element, insertMethod) {
-        // Fetch content from the URL
-        fetch(url)
-            .then(function (response) { return response.text(); })
-            .then(function (htmlContent) {
-            if (insertMethod === 'append') {
-                var 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: function (el, container, spacing, defaultLgSize) {
-        if (spacing === void 0) { spacing = 0; }
-        var LGel = $LG(el);
-        var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
-        if (!lgSize) {
-            return;
-        }
-        var isResponsiveSizes = lgSize.split(',');
-        // if at-least two viewport sizes are available
-        if (isResponsiveSizes[1]) {
-            var wWidth = window.innerWidth;
-            for (var i = 0; i < isResponsiveSizes.length; i++) {
-                var size_1 = isResponsiveSizes[i];
-                var responsiveWidth = parseInt(size_1.split('-')[2], 10);
-                if (responsiveWidth > wWidth) {
-                    lgSize = size_1;
-                    break;
-                }
-                // take last item as last option
-                if (i === isResponsiveSizes.length - 1) {
-                    lgSize = size_1;
-                }
-            }
-        }
-        var size = lgSize.split('-');
-        var width = parseInt(size[0], 10);
-        var height = parseInt(size[1], 10);
-        var cWidth = container.width();
-        var cHeight = container.height() - spacing;
-        var maxWidth = Math.min(cWidth, width);
-        var maxHeight = Math.min(cHeight, height);
-        var ratio = Math.min(maxWidth / width, maxHeight / height);
-        return { width: width * ratio, height: height * ratio };
-    },
-    /**
-     * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
-     * @param {jQuery Element}
-     * @returns {String} Transform CSS string
-     */
-    getTransform: function (el, container, top, bottom, imageSize) {
-        if (!imageSize) {
-            return;
-        }
-        var LGel = $LG(el).find('img').first();
-        if (!LGel.get()) {
-            return;
-        }
-        var containerRect = container.get().getBoundingClientRect();
-        var wWidth = containerRect.width;
-        // using innerWidth to include mobile safari bottom bar
-        var wHeight = container.height() - (top + bottom);
-        var elWidth = LGel.width();
-        var elHeight = LGel.height();
-        var elStyle = LGel.style();
-        var x = (wWidth - elWidth) / 2 -
-            LGel.offset().left +
-            (parseFloat(elStyle.paddingLeft) || 0) +
-            (parseFloat(elStyle.borderLeft) || 0) +
-            $LG(window).scrollLeft() +
-            containerRect.left;
-        var y = (wHeight - elHeight) / 2 -
-            LGel.offset().top +
-            (parseFloat(elStyle.paddingTop) || 0) +
-            (parseFloat(elStyle.borderTop) || 0) +
-            $LG(window).scrollTop() +
-            top;
-        var scX = elWidth / imageSize.width;
-        var scY = elHeight / imageSize.height;
-        var transform = 'translate3d(' +
-            (x *= -1) +
-            'px, ' +
-            (y *= -1) +
-            'px, 0) scale3d(' +
-            scX +
-            ', ' +
-            scY +
-            ', 1)';
-        return transform;
-    },
-    getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
-        var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
-        return "<div class=\"lg-media-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; max-width:" + iframeMaxWidth + "; height: " + iframeHeight + "; max-height:" + iframeMaxHeight + "\">\n                    <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\"  allowfullscreen=\"true\"></iframe>\n                </div>";
-    },
-    getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
-        var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
-        var sizesAttr = sizes ? "sizes=\"" + sizes + "\"" : '';
-        var imgMarkup = "<img " + altAttr + " " + srcsetAttr + "  " + sizesAttr + " class=\"lg-object lg-image\" data-index=\"" + index + "\" src=\"" + src + "\" />";
-        var sourceTag = '';
-        if (sources) {
-            var sourceObj = typeof sources === 'string' ? JSON.parse(sources) : sources;
-            sourceTag = sourceObj.map(function (source) {
-                var attrs = '';
-                Object.keys(source).forEach(function (key) {
-                    // Do not remove the first space as it is required to separate the attributes
-                    attrs += " " + key + "=\"" + source[key] + "\"";
-                });
-                return "<source " + attrs + "></source>";
-            });
-        }
-        return "" + sourceTag + imgMarkup;
-    },
-    // Get src from responsive src
-    getResponsiveSrc: function (srcItms) {
-        var rsWidth = [];
-        var rsSrc = [];
-        var src = '';
-        for (var i = 0; i < srcItms.length; i++) {
-            var _src = srcItms[i].split(' ');
-            // Manage empty space
-            if (_src[0] === '') {
-                _src.splice(0, 1);
-            }
-            rsSrc.push(_src[0]);
-            rsWidth.push(_src[1]);
-        }
-        var wWidth = window.innerWidth;
-        for (var j = 0; j < rsWidth.length; j++) {
-            if (parseInt(rsWidth[j], 10) > wWidth) {
-                src = rsSrc[j];
-                break;
-            }
-        }
-        return src;
-    },
-    isImageLoaded: function (img) {
-        if (!img)
-            return false;
-        // During the onload event, IE correctly identifies any images that
-        // weren’t downloaded as not complete. Others should too. Gecko-based
-        // browsers act like NS4 in that they report this incorrectly.
-        if (!img.complete) {
-            return false;
-        }
-        // However, they do have two very useful properties: naturalWidth and
-        // naturalHeight. These give the true size of the image. If it failed
-        // to load, either of these should be zero.
-        if (img.naturalWidth === 0) {
-            return false;
-        }
-        // No other way of checking: assume it’s ok.
-        return true;
-    },
-    getVideoPosterMarkup: function (_poster, dummyImg, videoContStyle, playVideoString, _isVideo) {
-        var videoClass = '';
-        if (_isVideo && _isVideo.youtube) {
-            videoClass = 'lg-has-youtube';
-        }
-        else if (_isVideo && _isVideo.vimeo) {
-            videoClass = 'lg-has-vimeo';
-        }
-        else {
-            videoClass = 'lg-has-html5';
-        }
-        var _dummy = dummyImg;
-        if (typeof dummyImg !== 'string') {
-            _dummy = dummyImg.outerHTML;
-        }
-        return "<div class=\"lg-video-cont " + videoClass + "\" style=\"" + videoContStyle + "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"" + playVideoString + "\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>" + playVideoString + "</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            " + _dummy + "\n            <img class=\"lg-object lg-video-poster\" src=\"" + _poster + "\" />\n        </div>";
-    },
-    getFocusableElements: function (container) {
-        var 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])');
-        var visibleElements = [].filter.call(elements, function (element) {
-            var style = window.getComputedStyle(element);
-            return style.display !== 'none' && style.visibility !== 'hidden';
-        });
-        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: function (items, extraProps, getCaptionFromTitleOrAlt, exThumbImage) {
-        var dynamicElements = [];
-        var availableDynamicOptions = __spreadArrays(defaultDynamicOptions, extraProps);
-        [].forEach.call(items, function (item) {
-            var dynamicEl = {};
-            for (var i = 0; i < item.attributes.length; i++) {
-                var attr = item.attributes[i];
-                if (attr.specified) {
-                    var dynamicAttr = convertToData(attr.name);
-                    var label = '';
-                    if (availableDynamicOptions.indexOf(dynamicAttr) > -1) {
-                        label = dynamicAttr;
-                    }
-                    if (label) {
-                        dynamicEl[label] = attr.value;
-                    }
-                }
-            }
-            var currentItem = $LG(item);
-            var alt = currentItem.find('img').first().attr('alt');
-            var title = currentItem.attr('title');
-            var 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: function () {
-        return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-    },
-    /**
-     * @desc Check the given src is video
-     * @param {String} src
-     * @return {Object} video type
-     * Ex:{ youtube  :  ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
-     *
-     * @todo - this information can be moved to dynamicEl to avoid frequent calls
-     */
-    isVideo: function (src, isHTML5VIdeo, index) {
-        if (!src) {
-            if (isHTML5VIdeo) {
-                return {
-                    html5: true,
-                };
-            }
-            else {
-                console.error('lightGallery :- data-src is not provided on slide item ' +
-                    (index + 1) +
-                    '. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
-                return;
-            }
-        }
-        var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
-        var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
-        var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
-        if (youtube) {
-            return {
-                youtube: youtube,
-            };
-        }
-        else if (vimeo) {
-            return {
-                vimeo: vimeo,
-            };
-        }
-        else if (wistia) {
-            return {
-                wistia: wistia,
-            };
-        }
-    },
-};
-
-// @ref - https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
-// @ref - https://2ality.com/2017/04/setting-up-multi-platform-packages.html
-// Unique id for each gallery
-var lgId = 0;
-var LightGallery = /** @class */ (function () {
-    function LightGallery(element, options) {
-        this.lgOpened = false;
-        this.index = 0;
-        // lightGallery modules
-        this.plugins = [];
-        // false when lightGallery load first slide content;
-        this.lGalleryOn = false;
-        // True when a slide animation is in progress
-        this.lgBusy = false;
-        this.currentItemsInDom = [];
-        // Scroll top value before lightGallery is opened
-        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();
-        // When using dynamic mode, ensure dynamicEl is an array
-        if (this.settings.dynamic &&
-            this.settings.dynamicEl !== undefined &&
-            !Array.isArray(this.settings.dynamicEl)) {
-            throw 'When using dynamic mode, you must also define dynamicEl as an Array.';
-        }
-        this.galleryItems = this.getItems();
-        this.normalizeSettings();
-        // Gallery items
-        this.init();
-        this.validateLicense();
-        return this;
-    }
-    LightGallery.prototype.generateSettings = function (options) {
-        // lightGallery settings
-        this.settings = __assign(__assign({}, lightGalleryCoreSettings), options);
-        if (this.settings.isMobile &&
-            typeof this.settings.isMobile === 'function'
-            ? this.settings.isMobile()
-            : utils.isMobile()) {
-            var mobileSettings = __assign(__assign({}, this.settings.mobileSettings), this.settings.mobileSettings);
-            this.settings = __assign(__assign({}, this.settings), mobileSettings);
-        }
-    };
-    LightGallery.prototype.normalizeSettings = function () {
-        if (this.settings.slideEndAnimation) {
-            this.settings.hideControlOnEnd = false;
-        }
-        if (!this.settings.closable) {
-            this.settings.swipeToClose = false;
-        }
-        // And reset it on close to get the correct value next time
-        this.zoomFromOrigin = this.settings.zoomFromOrigin;
-        // At the moment, Zoom from image doesn't support dynamic options
-        // @todo add zoomFromOrigin support for dynamic images
-        if (this.settings.dynamic) {
-            this.zoomFromOrigin = false;
-        }
-        if (this.settings.container) {
-            var container = this.settings.container;
-            if (typeof container === 'function') {
-                this.settings.container = container();
-            }
-            else if (typeof container === 'string') {
-                var el = document.querySelector(container);
-                this.settings.container = el !== null && el !== void 0 ? el : document.body;
-            }
-        }
-        else {
-            this.settings.container = document.body;
-        }
-        // settings.preload should not be grater than $item.length
-        this.settings.preload = Math.min(this.settings.preload, this.galleryItems.length);
-    };
-    LightGallery.prototype.init = function () {
-        var _this = this;
-        this.addSlideVideoInfo(this.galleryItems);
-        this.buildStructure();
-        this.LGel.trigger(lGEvents.init, {
-            instance: this,
-        });
-        if (this.settings.keyPress) {
-            this.keyPress();
-        }
-        setTimeout(function () {
-            _this.enableDrag();
-            _this.enableSwipe();
-            _this.triggerPosterClick();
-        }, 50);
-        this.arrow();
-        if (this.settings.mousewheel) {
-            this.mousewheel();
-        }
-        if (!this.settings.dynamic) {
-            this.openGalleryOnItemClick();
-        }
-    };
-    LightGallery.prototype.openGalleryOnItemClick = function () {
-        var _this = this;
-        var _loop_1 = function (index) {
-            var element = this_1.items[index];
-            var $element = $LG(element);
-            // Using different namespace for click because click event should not unbind if selector is same object('this')
-            // @todo manage all event listners - should have namespace that represent element
-            var uuid = lgQuery.generateUUID();
-            $element
-                .attr('data-lg-id', uuid)
-                .on("click.lgcustom-item-" + uuid, function (e) {
-                e.preventDefault();
-                var currentItemIndex = _this.settings.index || index;
-                _this.openGallery(currentItemIndex, element);
-            });
-        };
-        var this_1 = this;
-        // Using for loop instead of using bubbling as the items can be any html element.
-        for (var index = 0; index < this.items.length; index++) {
-            _loop_1(index);
-        }
-    };
-    /**
-     * Module constructor
-     * Modules are build incrementally.
-     * Gallery should be opened only once all the modules are initialized.
-     * use moduleBuildTimeout to make sure this
-     */
-    LightGallery.prototype.buildModules = function () {
-        var _this = this;
-        this.settings.plugins.forEach(function (plugin) {
-            _this.plugins.push(new plugin(_this, $LG));
-        });
-    };
-    LightGallery.prototype.validateLicense = function () {
-        if (!this.settings.licenseKey) {
-            console.error('Please provide a valid license key');
-        }
-        else if (this.settings.licenseKey === '0000-0000-000-0000') {
-            console.warn("lightGallery: " + this.settings.licenseKey + " license key is not valid for production use");
-        }
-    };
-    LightGallery.prototype.getSlideItem = function (index) {
-        return $LG(this.getSlideItemId(index));
-    };
-    LightGallery.prototype.getSlideItemId = function (index) {
-        return "#lg-item-" + this.lgId + "-" + index;
-    };
-    LightGallery.prototype.getIdName = function (id) {
-        return id + "-" + this.lgId;
-    };
-    LightGallery.prototype.getElementById = function (id) {
-        return $LG("#" + this.getIdName(id));
-    };
-    LightGallery.prototype.manageSingleSlideClassName = function () {
-        if (this.galleryItems.length < 2) {
-            this.outer.addClass('lg-single-item');
-        }
-        else {
-            this.outer.removeClass('lg-single-item');
-        }
-    };
-    LightGallery.prototype.buildStructure = function () {
-        var _this = this;
-        var container = this.$container && this.$container.get();
-        if (container) {
-            return;
-        }
-        var controls = '';
-        var subHtmlCont = '';
-        // Create controls
-        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>\n                <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 =
-                '<div class="lg-sub-html" role="status" aria-live="polite"></div>';
-        }
-        var addClasses = '';
-        if (this.settings.allowMediaOverlap) {
-            // Do not remove space before last single quote
-            addClasses += 'lg-media-overlap ';
-        }
-        var ariaLabelledby = this.settings.ariaLabelledby
-            ? 'aria-labelledby="' + this.settings.ariaLabelledby + '"'
-            : '';
-        var ariaDescribedby = this.settings.ariaDescribedby
-            ? 'aria-describedby="' + this.settings.ariaDescribedby + '"'
-            : '';
-        var containerClassName = "lg-container " + this.settings.addClass + " " + (document.body !== this.settings.container ? 'lg-inline' : '');
-        var 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>"
-            : '';
-        var maximizeIcon = this.settings.showMaximizeIcon
-            ? "<button type=\"button\" aria-label=\"" + this.settings.strings['toggleMaximize'] + "\" id=\"" + this.getIdName('lg-maximize') + "\" class=\"lg-maximize lg-icon\"></button>"
-            : '';
-        var template = "\n        <div class=\"" + containerClassName + "\" id=\"" + this.getIdName('lg-container') + "\" tabindex=\"-1\" aria-modal=\"true\" " + ariaLabelledby + " " + ariaDescribedby + " role=\"dialog\"\n        >\n            <div id=\"" + this.getIdName('lg-backdrop') + "\" class=\"lg-backdrop\"></div>\n\n            <div id=\"" + this.getIdName('lg-outer') + "\" class=\"lg-outer lg-use-css3 lg-css3 lg-hide-items " + addClasses + " \">\n\n              <div id=\"" + this.getIdName('lg-content') + "\" class=\"lg-content\">\n                <div id=\"" + this.getIdName('lg-inner') + "\" class=\"lg-inner\">\n                </div>\n                " + controls + "\n              </div>\n                <div id=\"" + this.getIdName('lg-toolbar') + "\" class=\"lg-toolbar lg-group\">\n                    " + maximizeIcon + "\n                    " + closeIcon + "\n                    </div>\n                    " + (this.settings.appendSubHtmlTo === '.lg-outer'
-            ? subHtmlCont
-            : '') + "\n                <div id=\"" + this.getIdName('lg-components') + "\" class=\"lg-components\">\n                    " + (this.settings.appendSubHtmlTo === '.lg-sub-html'
-            ? subHtmlCont
-            : '') + "\n                </div>\n            </div>\n        </div>\n        ";
-        $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');
-        var 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');
-        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, function () {
-            _this.refreshOnResize();
-        });
-        this.hideBars();
-        this.manageCloseGallery();
-        this.toggleMaximize();
-        this.initModules();
-    };
-    LightGallery.prototype.refreshOnResize = function () {
-        if (this.lgOpened) {
-            var currentGalleryItem = this.galleryItems[this.index];
-            var __slideVideoInfo = currentGalleryItem.__slideVideoInfo;
-            this.mediaContainerPosition = this.getMediaContainerPosition();
-            var _a = this.mediaContainerPosition, top_1 = _a.top, bottom = _a.bottom;
-            this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo && this.settings.videoMaxSize);
-            if (__slideVideoInfo) {
-                this.resizeVideoSlide(this.index, this.currentImageSize);
-            }
-            if (this.zoomFromOrigin && !this.isDummyImageRemoved) {
-                var imgStyle = this.getDummyImgStyles(this.currentImageSize);
-                this.outer
-                    .find('.lg-current .lg-dummy-img')
-                    .first()
-                    .attr('style', imgStyle);
-            }
-            this.LGel.trigger(lGEvents.containerResize);
-        }
-    };
-    LightGallery.prototype.resizeVideoSlide = function (index, imageSize) {
-        var lgVideoStyle = this.getVideoContStyle(imageSize);
-        var 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>
-     */
-    LightGallery.prototype.updateSlides = function (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;
-        }
-        var currentSrc = this.galleryItems[index].src;
-        this.galleryItems = items;
-        this.updateControls();
-        this.$inner.empty();
-        this.currentItemsInDom = [];
-        var _index = 0;
-        // Find the current index based on source value of the slide
-        this.galleryItems.some(function (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
-    LightGallery.prototype.getItems = function () {
-        // Gallery items
-        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) {
-                        var 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 || [];
-        }
-    };
-    LightGallery.prototype.shouldHideScrollbar = function () {
-        return (this.settings.hideScrollbar &&
-            document.body === this.settings.container);
-    };
-    LightGallery.prototype.hideScrollbar = function () {
-        if (!this.shouldHideScrollbar()) {
-            return;
-        }
-        this.bodyPaddingRight = parseFloat($LG('body').style().paddingRight);
-        var bodyRect = document.documentElement.getBoundingClientRect();
-        var scrollbarWidth = window.innerWidth - bodyRect.width;
-        $LG(document.body).css('padding-right', scrollbarWidth + this.bodyPaddingRight + 'px');
-        $LG(document.body).addClass('lg-overlay-open');
-    };
-    LightGallery.prototype.resetScrollBar = function () {
-        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);
-     * });
-     *
-     */
-    LightGallery.prototype.openGallery = function (index, element) {
-        var _this = this;
-        if (index === void 0) { index = this.settings.index; }
-        // prevent accidental double execution
-        if (this.lgOpened)
-            return;
-        this.lgOpened = true;
-        this.outer.removeClass('lg-hide-items');
-        this.hideScrollbar();
-        // Add display block, but still has opacity 0
-        this.$container.addClass('lg-show');
-        var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index);
-        this.currentItemsInDom = itemsToBeInsertedToDom;
-        var items = '';
-        itemsToBeInsertedToDom.forEach(function (item) {
-            items = items + ("<div id=\"" + item + "\" class=\"lg-item\"></div>");
-        });
-        this.$inner.append(items);
-        this.addHtml(index);
-        var transform = '';
-        this.mediaContainerPosition = this.getMediaContainerPosition();
-        var _a = this.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
-        if (!this.settings.allowMediaOverlap) {
-            this.setMediaContainerPosition(top, bottom);
-        }
-        var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
-        if (this.zoomFromOrigin && element) {
-            this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);
-            transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize);
-        }
-        if (!this.zoomFromOrigin || !transform) {
-            this.outer.addClass(this.settings.startClass);
-            this.getSlideItem(index).removeClass('lg-complete');
-        }
-        var timeout = this.settings.zoomFromOrigin
-            ? 100
-            : this.settings.backdropDuration;
-        setTimeout(function () {
-            _this.outer.addClass('lg-components-open');
-        }, timeout);
-        this.index = index;
-        this.LGel.trigger(lGEvents.beforeOpen);
-        // add class lg-current to remove initial transition
-        this.getSlideItem(index).addClass('lg-current');
-        this.lGalleryOn = false;
-        // Store the current scroll top value to scroll back after closing the gallery..
-        this.prevScrollTop = $LG(window).scrollTop();
-        setTimeout(function () {
-            // Need to check both zoomFromOrigin and transform values as we need to set set the
-            // default opening animation if user missed to add the lg-size attribute
-            if (_this.zoomFromOrigin && transform) {
-                var currentSlide_1 = _this.getSlideItem(index);
-                currentSlide_1.css('transform', transform);
-                setTimeout(function () {
-                    currentSlide_1
-                        .addClass('lg-start-progress lg-start-end-progress')
-                        .css('transition-duration', _this.settings.startAnimationDuration + 'ms');
-                    _this.outer.addClass('lg-zoom-from-image');
-                });
-                setTimeout(function () {
-                    currentSlide_1.css('transform', 'translate3d(0, 0, 0)');
-                }, 100);
-            }
-            setTimeout(function () {
-                _this.$backdrop.addClass('in');
-                _this.$container.addClass('lg-show-in');
-            }, 10);
-            setTimeout(function () {
-                if (_this.settings.trapFocus &&
-                    document.body === _this.settings.container) {
-                    _this.trapFocus();
-                }
-            }, _this.settings.backdropDuration + 50);
-            // lg-visible class resets gallery opacity to 1
-            if (!_this.zoomFromOrigin || !transform) {
-                setTimeout(function () {
-                    _this.outer.addClass('lg-visible');
-                }, _this.settings.backdropDuration);
-            }
-            // initiate slide function
-            _this.slide(index, false, false, false);
-            _this.LGel.trigger(lGEvents.afterOpen);
-        });
-        if (document.body === this.settings.container) {
-            $LG('html').addClass('lg-on');
-        }
-    };
-    /**
-     * 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
-     */
-    LightGallery.prototype.getMediaContainerPosition = function () {
-        if (this.settings.allowMediaOverlap) {
-            return {
-                top: 0,
-                bottom: 0,
-            };
-        }
-        var top = this.$toolbar.get().clientHeight || 0;
-        var subHtml = this.outer.find('.lg-components .lg-sub-html').get();
-        var captionHeight = this.settings.defaultCaptionHeight ||
-            (subHtml && subHtml.clientHeight) ||
-            0;
-        var thumbContainer = this.outer.find('.lg-thumb-outer').get();
-        var thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0;
-        var bottom = thumbHeight + captionHeight;
-        return {
-            top: top,
-            bottom: bottom,
-        };
-    };
-    LightGallery.prototype.setMediaContainerPosition = function (top, bottom) {
-        if (top === void 0) { top = 0; }
-        if (bottom === void 0) { bottom = 0; }
-        this.$content.css('top', top + 'px').css('bottom', bottom + 'px');
-    };
-    LightGallery.prototype.hideBars = function () {
-        var _this = this;
-        // Hide controllers if mouse doesn't move for some period
-        setTimeout(function () {
-            _this.outer.removeClass('lg-hide-items');
-            if (_this.settings.hideBarsDelay > 0) {
-                _this.outer.on('mousemove.lg click.lg touchstart.lg', function () {
-                    _this.outer.removeClass('lg-hide-items');
-                    clearTimeout(_this.hideBarTimeout);
-                    // Timeout will be cleared on each slide movement also
-                    _this.hideBarTimeout = setTimeout(function () {
-                        _this.outer.addClass('lg-hide-items');
-                    }, _this.settings.hideBarsDelay);
-                });
-                _this.outer.trigger('mousemove.lg');
-            }
-        }, this.settings.showBarsAfter);
-    };
-    LightGallery.prototype.initPictureFill = function ($img) {
-        if (this.settings.supportLegacyBrowser) {
-            try {
-                picturefill({
-                    elements: [$img.get()],
-                });
-            }
-            catch (e) {
-                console.warn('lightGallery :- If you want srcset or picture tag to be supported for older browser please include picturefil javascript library in your document.');
-            }
-        }
-    };
-    /**
-     *  @desc Create image counter
-     *  Ex: 1/10
-     */
-    LightGallery.prototype.counter = function () {
-        if (this.settings.counter) {
-            var counterHtml = "<div class=\"lg-counter\" role=\"status\" aria-live=\"polite\">\n                <span id=\"" + this.getIdName('lg-counter-current') + "\" class=\"lg-counter-current\">" + (this.index + 1) + " </span> /\n                <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
-     */
-    LightGallery.prototype.addHtml = function (index) {
-        var subHtml;
-        var subHtmlUrl;
-        if (this.galleryItems[index].subHtmlUrl) {
-            subHtmlUrl = this.galleryItems[index].subHtmlUrl;
-        }
-        else {
-            subHtml = this.galleryItems[index].subHtml;
-        }
-        if (!subHtmlUrl) {
-            if (subHtml) {
-                // get first letter of sub-html
-                // if first letter starts with . or # get the html form the jQuery object
-                var 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("Error processing subHtml selector \"" + subHtml + "\"");
-                        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 {
-            var currentSlide = $LG(this.getSlideItemId(index));
-            if (subHtmlUrl) {
-                utils.fetchCaptionFromUrl(subHtmlUrl, currentSlide, 'append');
-            }
-            else {
-                currentSlide.append("<div class=\"lg-sub-html\">" + subHtml + "</div>");
-            }
-        }
-        // Add lg-empty-html class if title doesn't exist
-        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: 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
-     */
-    LightGallery.prototype.preload = function (index) {
-        for (var i = 1; i <= this.settings.preload; i++) {
-            if (i >= this.galleryItems.length - index) {
-                break;
-            }
-            this.loadContent(index + i, false);
-        }
-        for (var j = 1; j <= this.settings.preload; j++) {
-            if (index - j < 0) {
-                break;
-            }
-            this.loadContent(index - j, false);
-        }
-    };
-    LightGallery.prototype.getDummyImgStyles = function (imageSize) {
-        if (!imageSize)
-            return '';
-        return "width:" + imageSize.width + "px;\n                margin-left: -" + imageSize.width / 2 + "px;\n                margin-top: -" + imageSize.height / 2 + "px;\n                height:" + imageSize.height + "px";
-    };
-    LightGallery.prototype.getVideoContStyle = function (imageSize) {
-        if (!imageSize)
-            return '';
-        return "width:" + imageSize.width + "px;\n                height:" + imageSize.height + "px";
-    };
-    LightGallery.prototype.getDummyImageContent = function ($currentSlide, index, alt) {
-        var $currentItem;
-        if (!this.settings.dynamic) {
-            $currentItem = $LG(this.items).eq(index);
-        }
-        if ($currentItem) {
-            var _dummyImgSrc = void 0;
-            if (!this.settings.exThumbImage) {
-                _dummyImgSrc = $currentItem.find('img').first().attr('src');
-            }
-            else {
-                _dummyImgSrc = $currentItem.attr(this.settings.exThumbImage);
-            }
-            if (!_dummyImgSrc)
-                return '';
-            var imgStyle = this.getDummyImgStyles(this.currentImageSize);
-            var 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 '';
-    };
-    LightGallery.prototype.setImgMarkup = function (src, $currentSlide, index) {
-        var currentGalleryItem = this.galleryItems[index];
-        var alt = currentGalleryItem.alt, srcset = currentGalleryItem.srcset, sizes = currentGalleryItem.sizes, sources = currentGalleryItem.sources;
-        // Use the thumbnail as dummy image which will be resized to actual image size and
-        // displayed on top of actual image
-        var imgContent = '';
-        var altAttr = alt ? 'alt="' + alt + '"' : '';
-        if (this.isFirstSlideWithZoomAnimation()) {
-            imgContent = this.getDummyImageContent($currentSlide, index, altAttr);
-        }
-        else {
-            imgContent = utils.getImgMarkup(index, src, altAttr, srcset, sizes, sources);
-        }
-        var picture = document.createElement('picture');
-        picture.className = 'lg-img-wrap';
-        $LG(picture).append(imgContent);
-        $currentSlide.prepend(picture);
-    };
-    LightGallery.prototype.onSlideObjectLoad = function ($slide, isHTML5VideoWithoutPoster, onLoad, onError) {
-        var mediaObject = $slide.find('.lg-object').first();
-        if (utils.isImageLoaded(mediaObject.get()) ||
-            isHTML5VideoWithoutPoster) {
-            onLoad();
-        }
-        else {
-            mediaObject.on('load.lg error.lg', function () {
-                onLoad && onLoad();
-            });
-            mediaObject.on('error.lg', function () {
-                onError && onError();
-            });
-        }
-    };
-    /**
-     *
-     * @param $el Current slide item
-     * @param index
-     * @param delay Delay is 0 except first time
-     * @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin
-     * @param isFirstSlide
-     */
-    LightGallery.prototype.onLgObjectLoad = function (currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) {
-        var _this = this;
-        this.onSlideObjectLoad(currentSlide, isHTML5VideoWithoutPoster, function () {
-            _this.triggerSlideItemLoad(currentSlide, index, delay, speed, isFirstSlide);
-        }, function () {
-            currentSlide.addClass('lg-complete lg-complete_');
-            currentSlide.html('<span class="lg-error-msg">' +
-                _this.settings.strings['mediaLoadingFailed'] +
-                '</span>');
-        });
-    };
-    LightGallery.prototype.triggerSlideItemLoad = function ($currentSlide, index, delay, speed, isFirstSlide) {
-        var _this = this;
-        var currentGalleryItem = this.galleryItems[index];
-        // Adding delay for video slides without poster for better performance and user experience
-        // Videos should start playing once once the gallery is completely loaded
-        var _speed = isFirstSlide &&
-            this.getSlideType(currentGalleryItem) === 'video' &&
-            !currentGalleryItem.poster
-            ? speed
-            : 0;
-        setTimeout(function () {
-            $currentSlide.addClass('lg-complete lg-complete_');
-            _this.LGel.trigger(lGEvents.slideItemLoad, {
-                index: index,
-                delay: delay || 0,
-                isFirstSlide: isFirstSlide,
-            });
-        }, _speed);
-    };
-    LightGallery.prototype.isFirstSlideWithZoomAnimation = function () {
-        return !!(!this.lGalleryOn &&
-            this.zoomFromOrigin &&
-            this.currentImageSize);
-    };
-    // Add video slideInfo
-    LightGallery.prototype.addSlideVideoInfo = function (items) {
-        var _this = this;
-        items.forEach(function (element, index) {
-            element.__slideVideoInfo = utils.isVideo(element.src, !!element.video, index);
-            if (element.__slideVideoInfo &&
-                _this.settings.loadYouTubePoster &&
-                !element.poster &&
-                element.__slideVideoInfo.youtube) {
-                element.poster = "//img.youtube.com/vi/" + element.__slideVideoInfo.youtube[1] + "/maxresdefault.jpg";
-            }
-        });
-    };
-    /**
-     *  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.
-     */
-    LightGallery.prototype.loadContent = function (index, rec) {
-        var _this = this;
-        var currentGalleryItem = this.galleryItems[index];
-        var $currentSlide = $LG(this.getSlideItemId(index));
-        var poster = currentGalleryItem.poster, srcset = currentGalleryItem.srcset, sizes = currentGalleryItem.sizes, sources = currentGalleryItem.sources;
-        var src = currentGalleryItem.src;
-        var video = currentGalleryItem.video;
-        var _html5Video = video && typeof video === 'string' ? JSON.parse(video) : video;
-        if (currentGalleryItem.responsive) {
-            var srcDyItms = currentGalleryItem.responsive.split(',');
-            src = utils.getResponsiveSrc(srcDyItms) || src;
-        }
-        var videoInfo = currentGalleryItem.__slideVideoInfo;
-        var lgVideoStyle = '';
-        var iframe = !!currentGalleryItem.iframe;
-        var isFirstSlide = !this.lGalleryOn;
-        // delay for adding complete class. it is 0 except first time.
-        var 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) {
-                var _a = this.mediaContainerPosition, top_2 = _a.top, bottom = _a.bottom;
-                var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom, videoInfo && this.settings.videoMaxSize);
-                lgVideoStyle = this.getVideoContStyle(videoSize);
-            }
-            if (iframe) {
-                var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle);
-                $currentSlide.prepend(markup);
-            }
-            else if (poster) {
-                var dummyImg = '';
-                var hasStartAnimation = isFirstSlide &&
-                    this.zoomFromOrigin &&
-                    this.currentImageSize;
-                if (hasStartAnimation) {
-                    dummyImg = this.getDummyImageContent($currentSlide, index, '');
-                }
-                var markup = utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, this.settings.strings['playVideo'], videoInfo);
-                $currentSlide.prepend(markup);
-            }
-            else if (videoInfo) {
-                var markup = "<div class=\"lg-video-cont \" style=\"" + lgVideoStyle + "\"></div>";
-                $currentSlide.prepend(markup);
-            }
-            else {
-                this.setImgMarkup(src, $currentSlide, index);
-                if (srcset || sources) {
-                    var $img = $currentSlide.find('.lg-object');
-                    this.initPictureFill($img);
-                }
-            }
-            if (poster || videoInfo) {
-                this.LGel.trigger(lGEvents.hasVideo, {
-                    index: index,
-                    src: src,
-                    html5Video: _html5Video,
-                    hasPoster: !!poster,
-                });
-            }
-            this.LGel.trigger(lGEvents.afterAppendSlide, { index: index });
-            if (this.lGalleryOn &&
-                this.settings.appendSubHtmlTo === '.lg-item') {
-                this.addHtml(index);
-            }
-        }
-        // For first time add some delay for displaying the start animation.
-        var _speed = 0;
-        // Do not change the delay value because it is required for zoom plugin.
-        // If gallery opened from direct url (hash) speed value should be 0
-        if (delay && !$LG(document.body).hasClass('lg-from-hash')) {
-            _speed = delay;
-        }
-        // Only for first slide and zoomFromOrigin is enabled
-        if (this.isFirstSlideWithZoomAnimation()) {
-            setTimeout(function () {
-                $currentSlide
-                    .removeClass('lg-start-end-progress lg-start-progress')
-                    .removeAttr('style');
-            }, this.settings.startAnimationDuration + 100);
-            if (!$currentSlide.hasClass('lg-loaded')) {
-                setTimeout(function () {
-                    if (_this.getSlideType(currentGalleryItem) === 'image') {
-                        var alt = currentGalleryItem.alt;
-                        var altAttr = alt ? 'alt="' + alt + '"' : '';
-                        $currentSlide
-                            .find('.lg-img-wrap')
-                            .append(utils.getImgMarkup(index, src, altAttr, srcset, sizes, currentGalleryItem.sources));
-                        if (srcset || sources) {
-                            var $img = $currentSlide.find('.lg-object');
-                            _this.initPictureFill($img);
-                        }
-                    }
-                    if (_this.getSlideType(currentGalleryItem) === 'image' ||
-                        (_this.getSlideType(currentGalleryItem) === 'video' &&
-                            poster)) {
-                        _this.onLgObjectLoad($currentSlide, index, delay, _speed, true, false);
-                        // load remaining slides once the slide is completely loaded
-                        _this.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () {
-                            _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
-                        }, function () {
-                            _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
-                        });
-                    }
-                }, this.settings.startAnimationDuration + 100);
-            }
-        }
-        // SLide content has been added to dom
-        $currentSlide.addClass('lg-loaded');
-        if (!this.isFirstSlideWithZoomAnimation() ||
-            (this.getSlideType(currentGalleryItem) === 'video' && !poster)) {
-            this.onLgObjectLoad($currentSlide, index, delay, _speed, isFirstSlide, !!(videoInfo && videoInfo.html5 && !poster));
-        }
-        // When gallery is opened once content is loaded (second time) need to add lg-complete class for css styling
-        if ((!this.zoomFromOrigin || !this.currentImageSize) &&
-            $currentSlide.hasClass('lg-complete_') &&
-            !this.lGalleryOn) {
-            setTimeout(function () {
-                $currentSlide.addClass('lg-complete');
-            }, this.settings.backdropDuration);
-        }
-        // Content loaded
-        // Need to set lGalleryOn before calling preload function
-        this.lGalleryOn = true;
-        if (rec === true) {
-            if (!$currentSlide.hasClass('lg-complete_')) {
-                $currentSlide
-                    .find('.lg-object')
-                    .first()
-                    .on('load.lg error.lg', function () {
-                    _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
-     */
-    LightGallery.prototype.loadContentOnFirstSlideLoad = function (index, $currentSlide, speed) {
-        var _this = this;
-        setTimeout(function () {
-            $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);
-    };
-    LightGallery.prototype.getItemsToBeInsertedToDom = function (index, prevIndex, numberOfItems) {
-        var _this = this;
-        if (numberOfItems === void 0) { numberOfItems = 0; }
-        var itemsToBeInsertedToDom = [];
-        // Minimum 2 items should be there
-        var possibleNumberOfItems = Math.max(numberOfItems, 3);
-        possibleNumberOfItems = Math.min(possibleNumberOfItems, this.galleryItems.length);
-        var prevIndexItem = "lg-item-" + this.lgId + "-" + prevIndex;
-        if (this.galleryItems.length <= 3) {
-            this.galleryItems.forEach(function (_element, index) {
-                itemsToBeInsertedToDom.push("lg-item-" + _this.lgId + "-" + index);
-            });
-            return itemsToBeInsertedToDom;
-        }
-        if (index < (this.galleryItems.length - 1) / 2) {
-            for (var idx = index; idx > index - possibleNumberOfItems / 2 && idx >= 0; idx--) {
-                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx);
-            }
-            var numberOfExistingItems = itemsToBeInsertedToDom.length;
-            for (var idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) {
-                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (index + idx + 1));
-            }
-        }
-        else {
-            for (var idx = index; idx <= this.galleryItems.length - 1 &&
-                idx < index + possibleNumberOfItems / 2; idx++) {
-                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx);
-            }
-            var numberOfExistingItems = itemsToBeInsertedToDom.length;
-            for (var 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;
-    };
-    LightGallery.prototype.organizeSlideItems = function (index, prevIndex) {
-        var _this = this;
-        var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, prevIndex, this.settings.numberOfSlideItemsInDom);
-        itemsToBeInsertedToDom.forEach(function (item) {
-            if (_this.currentItemsInDom.indexOf(item) === -1) {
-                _this.$inner.append("<div id=\"" + item + "\" class=\"lg-item\"></div>");
-            }
-        });
-        this.currentItemsInDom.forEach(function (item) {
-            if (itemsToBeInsertedToDom.indexOf(item) === -1) {
-                $LG("#" + item).remove();
-            }
-        });
-        return itemsToBeInsertedToDom;
-    };
-    /**
-     * Get previous index of the slide
-     */
-    LightGallery.prototype.getPreviousSlideIndex = function () {
-        var prevIndex = 0;
-        try {
-            var currentItemId = this.outer
-                .find('.lg-current')
-                .first()
-                .attr('id');
-            prevIndex = parseInt(currentItemId.split('-')[3]) || 0;
-        }
-        catch (error) {
-            prevIndex = 0;
-        }
-        return prevIndex;
-    };
-    LightGallery.prototype.setDownloadValue = function (index) {
-        if (this.settings.download) {
-            var currentGalleryItem = this.galleryItems[index];
-            var hideDownloadBtn = currentGalleryItem.downloadUrl === false ||
-                currentGalleryItem.downloadUrl === 'false';
-            if (hideDownloadBtn) {
-                this.outer.addClass('lg-hide-download');
-            }
-            else {
-                var $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);
-                }
-            }
-        }
-    };
-    LightGallery.prototype.makeSlideAnimation = function (direction, currentSlideItem, previousSlideItem) {
-        var _this = this;
-        if (this.lGalleryOn) {
-            previousSlideItem.addClass('lg-slide-progress');
-        }
-        setTimeout(function () {
-            // remove all transitions
-            _this.outer.addClass('lg-no-trans');
-            _this.outer
-                .find('.lg-item')
-                .removeClass('lg-prev-slide lg-next-slide');
-            if (direction === 'prev') {
-                //prevslide
-                currentSlideItem.addClass('lg-prev-slide');
-                previousSlideItem.addClass('lg-next-slide');
-            }
-            else {
-                // next slide
-                currentSlideItem.addClass('lg-next-slide');
-                previousSlideItem.addClass('lg-prev-slide');
-            }
-            // give 50 ms for browser to add/remove class
-            setTimeout(function () {
-                _this.outer.find('.lg-item').removeClass('lg-current');
-                currentSlideItem.addClass('lg-current');
-                // reset all transitions
-                _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);
-     *
-     */
-    LightGallery.prototype.slide = function (index, fromTouch, fromThumb, direction) {
-        var _this = this;
-        var prevIndex = this.getPreviousSlideIndex();
-        this.currentItemsInDom = this.organizeSlideItems(index, prevIndex);
-        // Prevent multiple call, Required for hsh plugin
-        if (this.lGalleryOn && prevIndex === index) {
-            return;
-        }
-        var numberOfGalleryItems = this.galleryItems.length;
-        if (!this.lgBusy) {
-            if (this.settings.counter) {
-                this.updateCurrentCounter(index);
-            }
-            var currentSlideItem = this.getSlideItem(index);
-            var previousSlideItem_1 = this.getSlideItem(prevIndex);
-            var currentGalleryItem = this.galleryItems[index];
-            var videoInfo = currentGalleryItem.__slideVideoInfo;
-            this.outer.attr('data-lg-slide-type', this.getSlideType(currentGalleryItem));
-            this.setDownloadValue(index);
-            if (videoInfo) {
-                var _a = this.mediaContainerPosition, top_3 = _a.top, bottom = _a.bottom;
-                var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom, videoInfo && this.settings.videoMaxSize);
-                this.resizeVideoSlide(index, videoSize);
-            }
-            this.LGel.trigger(lGEvents.beforeSlide, {
-                prevIndex: prevIndex,
-                index: 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_1);
-            }
-            else {
-                this.outer
-                    .find('.lg-item')
-                    .removeClass('lg-prev-slide lg-current lg-next-slide');
-                var touchPrev = void 0;
-                var touchNext = void 0;
-                if (numberOfGalleryItems > 2) {
-                    touchPrev = index - 1;
-                    touchNext = index + 1;
-                    if (index === 0 && prevIndex === numberOfGalleryItems - 1) {
-                        // next slide
-                        touchNext = 0;
-                        touchPrev = numberOfGalleryItems - 1;
-                    }
-                    else if (index === numberOfGalleryItems - 1 &&
-                        prevIndex === 0) {
-                        // prev slide
-                        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');
-            }
-            // Do not put load content in set timeout as it needs to load immediately when the gallery is opened
-            if (!this.lGalleryOn) {
-                this.loadContent(index, true);
-            }
-            else {
-                setTimeout(function () {
-                    _this.loadContent(index, true);
-                    // Add title if this.settings.appendSubHtmlTo === lg-sub-html
-                    if (_this.settings.appendSubHtmlTo !== '.lg-item') {
-                        _this.addHtml(index);
-                    }
-                }, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay));
-            }
-            setTimeout(function () {
-                _this.lgBusy = false;
-                previousSlideItem_1.removeClass('lg-slide-progress');
-                _this.LGel.trigger(lGEvents.afterSlide, {
-                    prevIndex: prevIndex,
-                    index: index,
-                    fromTouch: fromTouch,
-                    fromThumb: fromThumb,
-                });
-            }, (this.lGalleryOn ? this.settings.speed + 100 : 100) + (fromTouch ? 0 : this.settings.slideDelay));
-        }
-        this.index = index;
-    };
-    LightGallery.prototype.updateCurrentCounter = function (index) {
-        this.getElementById('lg-counter-current').html(index + 1 + '');
-    };
-    LightGallery.prototype.updateCounterTotal = function () {
-        this.getElementById('lg-counter-all').html(this.galleryItems.length + '');
-    };
-    LightGallery.prototype.getSlideType = function (item) {
-        if (item.__slideVideoInfo) {
-            return 'video';
-        }
-        else if (item.iframe) {
-            return 'iframe';
-        }
-        else {
-            return 'image';
-        }
-    };
-    LightGallery.prototype.touchMove = function (startCoords, endCoords, e) {
-        var distanceX = endCoords.pageX - startCoords.pageX;
-        var distanceY = endCoords.pageY - startCoords.pageY;
-        var allowSwipe = false;
-        if (this.swipeDirection) {
-            allowSwipe = true;
-        }
-        else {
-            if (Math.abs(distanceX) > 15) {
-                this.swipeDirection = 'horizontal';
-                allowSwipe = true;
-            }
-            else if (Math.abs(distanceY) > 15) {
-                this.swipeDirection = 'vertical';
-                allowSwipe = true;
-            }
-        }
-        if (!allowSwipe) {
-            return;
-        }
-        var $currentSlide = this.getSlideItem(this.index);
-        if (this.swipeDirection === 'horizontal') {
-            e === null || e === void 0 ? void 0 : e.preventDefault();
-            // reset opacity and transition duration
-            this.outer.addClass('lg-dragging');
-            // move current slide
-            this.setTranslate($currentSlide, distanceX, 0);
-            // move next and prev slide with current slide
-            var width = $currentSlide.get().offsetWidth;
-            var slideWidthAmount = (width * 15) / 100;
-            var gutter = slideWidthAmount - Math.abs((distanceX * 10) / 100);
-            this.setTranslate(this.outer.find('.lg-prev-slide').first(), -width + distanceX - gutter, 0);
-            this.setTranslate(this.outer.find('.lg-next-slide').first(), width + distanceX + gutter, 0);
-        }
-        else if (this.swipeDirection === 'vertical') {
-            if (this.settings.swipeToClose) {
-                e === null || e === void 0 ? void 0 : e.preventDefault();
-                this.$container.addClass('lg-dragging-vertical');
-                var opacity = 1 - Math.abs(distanceY) / window.innerHeight;
-                this.$backdrop.css('opacity', opacity);
-                var scale = 1 - Math.abs(distanceY) / (window.innerWidth * 2);
-                this.setTranslate($currentSlide, 0, distanceY, scale, scale);
-                if (Math.abs(distanceY) > 100) {
-                    this.outer
-                        .addClass('lg-hide-items')
-                        .removeClass('lg-components-open');
-                }
-            }
-        }
-    };
-    LightGallery.prototype.touchEnd = function (endCoords, startCoords, event) {
-        var _this = this;
-        var distance;
-        // keep slide animation for any mode while dragg/swipe
-        if (this.settings.mode !== 'lg-slide') {
-            this.outer.addClass('lg-slide');
-        }
-        // set transition duration
-        setTimeout(function () {
-            _this.$container.removeClass('lg-dragging-vertical');
-            _this.outer
-                .removeClass('lg-dragging lg-hide-items')
-                .addClass('lg-components-open');
-            var triggerClick = true;
-            if (_this.swipeDirection === 'horizontal') {
-                distance = endCoords.pageX - startCoords.pageX;
-                var distanceAbs = Math.abs(endCoords.pageX - startCoords.pageX);
-                if (distance < 0 &&
-                    distanceAbs > _this.settings.swipeThreshold) {
-                    _this.goToNextSlide(true);
-                    triggerClick = false;
-                }
-                else if (distance > 0 &&
-                    distanceAbs > _this.settings.swipeThreshold) {
-                    _this.goToPrevSlide(true);
-                    triggerClick = false;
-                }
-            }
-            else if (_this.swipeDirection === 'vertical') {
-                distance = Math.abs(endCoords.pageY - startCoords.pageY);
-                if (_this.settings.closable &&
-                    _this.settings.swipeToClose &&
-                    distance > 100) {
-                    _this.closeGallery();
-                    return;
-                }
-                else {
-                    _this.$backdrop.css('opacity', 1);
-                }
-            }
-            _this.outer.find('.lg-item').removeAttr('style');
-            if (triggerClick &&
-                Math.abs(endCoords.pageX - startCoords.pageX) < 5) {
-                // Trigger click if distance is less than 5 pix
-                var target = $LG(event.target);
-                if (_this.isPosterElement(target)) {
-                    _this.LGel.trigger(lGEvents.posterClick);
-                }
-            }
-            _this.swipeDirection = undefined;
-        });
-        // remove slide class once drag/swipe is completed if mode is not slide
-        setTimeout(function () {
-            if (!_this.outer.hasClass('lg-dragging') &&
-                _this.settings.mode !== 'lg-slide') {
-                _this.outer.removeClass('lg-slide');
-            }
-        }, this.settings.speed + 100);
-    };
-    LightGallery.prototype.enableSwipe = function () {
-        var _this = this;
-        var startCoords = {};
-        var endCoords = {};
-        var isMoved = false;
-        var isSwiping = false;
-        if (this.settings.enableSwipe) {
-            this.$inner.on('touchstart.lg', function (e) {
-                _this.dragOrSwipeEnabled = true;
-                var $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';
-                    _this.manageSwipeClass();
-                    startCoords = {
-                        pageX: e.touches[0].pageX,
-                        pageY: e.touches[0].pageY,
-                    };
-                }
-            });
-            this.$inner.on('touchmove.lg', function (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', function (event) {
-                if (_this.touchAction === 'swipe') {
-                    if (isMoved) {
-                        isMoved = false;
-                        _this.touchEnd(endCoords, startCoords, event);
-                    }
-                    else if (isSwiping) {
-                        var target = $LG(event.target);
-                        if (_this.isPosterElement(target)) {
-                            _this.LGel.trigger(lGEvents.posterClick);
-                        }
-                    }
-                    _this.touchAction = undefined;
-                    isSwiping = false;
-                }
-            });
-        }
-    };
-    LightGallery.prototype.enableDrag = function () {
-        var _this = this;
-        var startCoords = {};
-        var endCoords = {};
-        var isDraging = false;
-        var isMoved = false;
-        if (this.settings.enableDrag) {
-            this.outer.on('mousedown.lg', function (e) {
-                _this.dragOrSwipeEnabled = true;
-                var $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();
-                        if (!_this.lgBusy) {
-                            _this.manageSwipeClass();
-                            startCoords = {
-                                pageX: e.pageX,
-                                pageY: e.pageY,
-                            };
-                            isDraging = true;
-                            // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
-                            _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, function (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, function (event) {
-                if (!_this.lgOpened) {
-                    return;
-                }
-                var 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);
-                }
-                // Prevent execution on click
-                if (isDraging) {
-                    isDraging = false;
-                    _this.outer.removeClass('lg-grabbing').addClass('lg-grab');
-                }
-            });
-        }
-    };
-    LightGallery.prototype.triggerPosterClick = function () {
-        var _this = this;
-        this.$inner.on('click.lg', function (event) {
-            if (!_this.dragOrSwipeEnabled &&
-                _this.isPosterElement($LG(event.target))) {
-                _this.LGel.trigger(lGEvents.posterClick);
-            }
-        });
-    };
-    LightGallery.prototype.manageSwipeClass = function () {
-        var _touchNext = this.index + 1;
-        var _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>
-     */
-    LightGallery.prototype.goToNextSlide = function (fromTouch) {
-        var _this = this;
-        var _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(function () {
-                        _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>
-     *
-     */
-    LightGallery.prototype.goToPrevSlide = function (fromTouch) {
-        var _this = this;
-        var _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: 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: fromTouch,
-                    });
-                    this.slide(this.index, !!fromTouch, false, 'prev');
-                }
-                else if (this.settings.slideEndAnimation && !fromTouch) {
-                    this.outer.addClass('lg-left-end');
-                    setTimeout(function () {
-                        _this.outer.removeClass('lg-left-end');
-                    }, 400);
-                }
-            }
-        }
-    };
-    LightGallery.prototype.keyPress = function () {
-        var _this = this;
-        $LG(window).on("keydown.lg.global" + this.lgId, function (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) {
-                if (e.keyCode === 37) {
-                    e.preventDefault();
-                    _this.goToPrevSlide();
-                }
-                if (e.keyCode === 39) {
-                    e.preventDefault();
-                    _this.goToNextSlide();
-                }
-            }
-        });
-    };
-    LightGallery.prototype.arrow = function () {
-        var _this = this;
-        this.getElementById('lg-prev').on('click.lg', function () {
-            _this.goToPrevSlide();
-        });
-        this.getElementById('lg-next').on('click.lg', function () {
-            _this.goToNextSlide();
-        });
-    };
-    LightGallery.prototype.arrowDisable = function (index) {
-        // Disable arrows if settings.hideControlOnEnd is true
-        if (!this.settings.loop && this.settings.hideControlOnEnd) {
-            var $prev = this.getElementById('lg-prev');
-            var $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');
-            }
-        }
-    };
-    LightGallery.prototype.setTranslate = function ($el, xValue, yValue, scaleX, scaleY) {
-        if (scaleX === void 0) { scaleX = 1; }
-        if (scaleY === void 0) { scaleY = 1; }
-        $el.css('transform', 'translate3d(' +
-            xValue +
-            'px, ' +
-            yValue +
-            'px, 0px) scale3d(' +
-            scaleX +
-            ', ' +
-            scaleY +
-            ', 1)');
-    };
-    LightGallery.prototype.mousewheel = function () {
-        var _this = this;
-        var lastCall = 0;
-        this.outer.on('wheel.lg', function (e) {
-            if (!e.deltaY || _this.galleryItems.length < 2) {
-                return;
-            }
-            e.preventDefault();
-            var now = new Date().getTime();
-            if (now - lastCall < 1000) {
-                return;
-            }
-            lastCall = now;
-            if (e.deltaY > 0) {
-                _this.goToNextSlide();
-            }
-            else if (e.deltaY < 0) {
-                _this.goToPrevSlide();
-            }
-        });
-    };
-    LightGallery.prototype.isSlideElement = function (target) {
-        return (target.hasClass('lg-outer') ||
-            target.hasClass('lg-item') ||
-            target.hasClass('lg-img-wrap') ||
-            target.hasClass('lg-img-rotate'));
-    };
-    LightGallery.prototype.isPosterElement = function (target) {
-        var 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
-     */
-    LightGallery.prototype.toggleMaximize = function () {
-        var _this = this;
-        this.getElementById('lg-maximize').on('click.lg', function () {
-            _this.$container.toggleClass('lg-inline');
-            _this.refreshOnResize();
-        });
-    };
-    LightGallery.prototype.invalidateItems = function () {
-        for (var index = 0; index < this.items.length; index++) {
-            var element = this.items[index];
-            var $element = $LG(element);
-            $element.off("click.lgcustom-item-" + $element.attr('data-lg-id'));
-        }
-    };
-    LightGallery.prototype.trapFocus = function () {
-        var _this = this;
-        this.$container.get().focus({
-            preventScroll: true,
-        });
-        $LG(window).on("keydown.lg.global" + this.lgId, function (e) {
-            if (!_this.lgOpened) {
-                return;
-            }
-            var isTabPressed = e.key === 'Tab' || e.keyCode === 9;
-            if (!isTabPressed) {
-                return;
-            }
-            var focusableEls = utils.getFocusableElements(_this.$container.get());
-            var firstFocusableEl = focusableEls[0];
-            var 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();
-                }
-            }
-        });
-    };
-    LightGallery.prototype.manageCloseGallery = function () {
-        var _this = this;
-        if (!this.settings.closable)
-            return;
-        var mousedown = false;
-        this.getElementById('lg-close').on('click.lg', function () {
-            _this.closeGallery();
-        });
-        if (this.settings.closeOnTap) {
-            // If you drag the slide and release outside gallery gets close on chrome
-            // for preventing this check mousedown and mouseup happened on .lg-item or lg-outer
-            this.outer.on('mousedown.lg', function (e) {
-                var target = $LG(e.target);
-                if (_this.isSlideElement(target)) {
-                    mousedown = true;
-                }
-                else {
-                    mousedown = false;
-                }
-            });
-            this.outer.on('mousemove.lg', function () {
-                mousedown = false;
-            });
-            this.outer.on('mouseup.lg', function (e) {
-                var 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();
-     *
-     */
-    LightGallery.prototype.closeGallery = function (force) {
-        var _this = this;
-        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);
-        }
-        var currentItem = this.items[this.index];
-        var transform;
-        if (this.zoomFromOrigin && currentItem) {
-            var _a = this.mediaContainerPosition, top_4 = _a.top, bottom = _a.bottom;
-            var _b = this.galleryItems[this.index], __slideVideoInfo = _b.__slideVideoInfo, poster = _b.poster;
-            var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo && poster && this.settings.videoMaxSize);
-            transform = utils.getTransform(currentItem, this.outer, top_4, bottom, imageSize);
-        }
-        if (this.zoomFromOrigin && 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');
-            // lg-zoom-from-image is used for setting the opacity to 1 if zoomFromOrigin is true
-            // If the closing item doesn't have the lg-size attribute, remove this class to avoid the closing css conflicts
-            this.outer.removeClass('lg-zoom-from-image');
-        }
-        // Unbind all events added by lightGallery
-        // @todo
-        //this.$el.off('.lg.tm');
-        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');
-        // Resetting opacity to 0 isd required as  vertical swipe to close function adds inline opacity.
-        this.$backdrop.removeClass('in').css('opacity', 0);
-        var removeTimeout = this.zoomFromOrigin && transform
-            ? Math.max(this.settings.startAnimationDuration, this.settings.backdropDuration)
-            : this.settings.backdropDuration;
-        this.$container.removeClass('lg-show-in');
-        // Once the closign animation is completed and gallery is invisible
-        setTimeout(function () {
-            if (_this.zoomFromOrigin && transform) {
-                _this.outer.removeClass('lg-zoom-from-image');
-            }
-            _this.$container.removeClass('lg-show');
-            // Reset scrollbar
-            _this.resetScrollBar();
-            // Need to remove inline opacity as it is used in the stylesheet as well
-            _this.$backdrop
-                .removeAttr('style')
-                .css('transition-duration', _this.settings.backdropDuration + 'ms');
-            _this.outer.removeClass("lg-closing " + _this.settings.startClass);
-            _this.getSlideItem(_this.index).removeClass('lg-start-end-progress');
-            _this.$inner.empty();
-            if (_this.lgOpened) {
-                _this.LGel.trigger(lGEvents.afterClose, {
-                    instance: _this,
-                });
-            }
-            if (_this.$container.get()) {
-                _this.$container.get().blur();
-            }
-            _this.lgOpened = false;
-        }, removeTimeout + 100);
-        return removeTimeout + 100;
-    };
-    LightGallery.prototype.initModules = function () {
-        this.plugins.forEach(function (module) {
-            try {
-                module.init();
-            }
-            catch (err) {
-                console.warn("lightGallery:- make sure lightGallery module is properly initiated");
-            }
-        });
-    };
-    LightGallery.prototype.destroyModules = function (destroy) {
-        this.plugins.forEach(function (module) {
-            try {
-                if (destroy) {
-                    module.destroy();
-                }
-                else {
-                    module.closeGallery && module.closeGallery();
-                }
-            }
-            catch (err) {
-                console.warn("lightGallery:- make sure lightGallery module is properly destroyed");
-            }
-        });
-    };
-    /**
-     * 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();
-     *
-     */
-    LightGallery.prototype.refresh = function (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);
-    };
-    LightGallery.prototype.updateControls = function () {
-        this.addSlideVideoInfo(this.galleryItems);
-        this.updateCounterTotal();
-        this.manageSingleSlideClassName();
-    };
-    LightGallery.prototype.destroyGallery = function () {
-        this.destroyModules(true);
-        if (!this.settings.dynamic) {
-            this.invalidateItems();
-        }
-        $LG(window).off(".lg.global" + this.lgId);
-        this.LGel.off('.lg');
-        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();
-     *
-     */
-    LightGallery.prototype.destroy = function () {
-        var closeTimeout = this.closeGallery(true);
-        if (closeTimeout) {
-            setTimeout(this.destroyGallery.bind(this), closeTimeout);
-        }
-        else {
-            this.destroyGallery();
-        }
-        return closeTimeout;
-    };
-    return LightGallery;
-}());
-
-function lightGallery(el, options) {
-    return new LightGallery(el, options);
-}
-
-var LgMethods = {
-    onAfterAppendSlide: 'lgAfterAppendSlide',
-    onInit: 'lgInit',
-    onHasVideo: 'lgHasVideo',
-    onContainerResize: 'lgContainerResize',
-    onUpdateSlides: 'lgUpdateSlides',
-    onAfterAppendSubHtml: 'lgAfterAppendSubHtml',
-    onBeforeOpen: 'lgBeforeOpen',
-    onAfterOpen: 'lgAfterOpen',
-    onSlideItemLoad: 'lgSlideItemLoad',
-    onBeforeSlide: 'lgBeforeSlide',
-    onAfterSlide: 'lgAfterSlide',
-    onPosterClick: 'lgPosterClick',
-    onDragStart: 'lgDragStart',
-    onDragMove: 'lgDragMove',
-    onDragEnd: 'lgDragEnd',
-    onBeforeNextSlide: 'lgBeforeNextSlide',
-    onBeforePrevSlide: 'lgBeforePrevSlide',
-    onBeforeClose: 'lgBeforeClose',
-    onAfterClose: 'lgAfterClose',
-    onRotateLeft: 'lgRotateLeft',
-    onRotateRight: 'lgRotateRight',
-    onFlipHorizontal: 'lgFlipHorizontal',
-    onFlipVertical: 'lgFlipVertical',
-};
-var LG = function (_a) {
-    var children = _a.children, elementClassNames = _a.elementClassNames, onAfterAppendSlide = _a.onAfterAppendSlide, onInit = _a.onInit, onHasVideo = _a.onHasVideo, onContainerResize = _a.onContainerResize, onAfterAppendSubHtml = _a.onAfterAppendSubHtml, onBeforeOpen = _a.onBeforeOpen, onAfterOpen = _a.onAfterOpen, onSlideItemLoad = _a.onSlideItemLoad, onBeforeSlide = _a.onBeforeSlide, onAfterSlide = _a.onAfterSlide, onPosterClick = _a.onPosterClick, onDragStart = _a.onDragStart, onDragMove = _a.onDragMove, onDragEnd = _a.onDragEnd, onBeforeNextSlide = _a.onBeforeNextSlide, onBeforePrevSlide = _a.onBeforePrevSlide, onBeforeClose = _a.onBeforeClose, onAfterClose = _a.onAfterClose, onRotateLeft = _a.onRotateLeft, onRotateRight = _a.onRotateRight, onFlipHorizontal = _a.onFlipHorizontal, onFlipVertical = _a.onFlipVertical, restProps = __rest(_a, ["children", "elementClassNames", "onAfterAppendSlide", "onInit", "onHasVideo", "onContainerResize", "onAfterAppendSubHtml", "onBeforeOpen", "onAfterOpen", "onSlideItemLoad", "onBeforeSlide", "onAfterSlide", "onPosterClick", "onDragStart", "onDragMove", "onDragEnd", "onBeforeNextSlide", "onBeforePrevSlide", "onBeforeClose", "onAfterClose", "onRotateLeft", "onRotateRight", "onFlipHorizontal", "onFlipVertical"]);
-    var $lg = useRef(null);
-    var registerEvents = useCallback(function () {
-        if (onAfterAppendSlide && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onAfterAppendSlide, (function (event) {
-                onAfterAppendSlide(event.detail);
-            }));
-        }
-        if (onInit && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onInit, (function (event) {
-                onInit(event.detail);
-            }));
-        }
-        if (onHasVideo && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onHasVideo, (function (event) {
-                onHasVideo(event.detail);
-            }));
-        }
-        if (onContainerResize && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onContainerResize, (function (event) {
-                onContainerResize(event.detail);
-            }));
-        }
-        if (onAfterAppendSubHtml && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onAfterAppendSubHtml, (function (event) {
-                onAfterAppendSubHtml(event.detail);
-            }));
-        }
-        if (onBeforeOpen && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onBeforeOpen, (function (event) {
-                onBeforeOpen(event.detail);
-            }));
-        }
-        if (onAfterOpen && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onAfterOpen, (function (event) {
-                onAfterOpen(event.detail);
-            }));
-        }
-        if (onSlideItemLoad && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onSlideItemLoad, (function (event) {
-                onSlideItemLoad(event.detail);
-            }));
-        }
-        if (onBeforeSlide && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onBeforeSlide, (function (event) {
-                onBeforeSlide(event.detail);
-            }));
-        }
-        if (onAfterSlide && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onAfterSlide, (function (event) {
-                onAfterSlide(event.detail);
-            }));
-        }
-        if (onPosterClick && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onPosterClick, (function (event) {
-                onPosterClick(event.detail);
-            }));
-        }
-        if (onDragStart && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onDragStart, (function (event) {
-                onDragStart(event.detail);
-            }));
-        }
-        if (onDragMove && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onDragMove, (function (event) {
-                onDragMove(event.detail);
-            }));
-        }
-        if (onDragEnd && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onDragEnd, (function (event) {
-                onDragEnd(event.detail);
-            }));
-        }
-        if (onBeforeNextSlide && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onBeforeNextSlide, (function (event) {
-                onBeforeNextSlide(event.detail);
-            }));
-        }
-        if (onBeforePrevSlide && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onBeforePrevSlide, (function (event) {
-                onBeforePrevSlide(event.detail);
-            }));
-        }
-        if (onBeforeClose && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onBeforeClose, (function (event) {
-                onBeforeClose(event.detail);
-            }));
-        }
-        if (onAfterClose && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onAfterClose, (function (event) {
-                onAfterClose(event.detail);
-            }));
-        }
-        if (onRotateLeft && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onRotateLeft, (function (event) {
-                onRotateLeft(event.detail);
-            }));
-        }
-        if (onRotateRight && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onRotateRight, (function (event) {
-                onRotateRight(event.detail);
-            }));
-        }
-        if (onFlipHorizontal && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onFlipHorizontal, (function (event) {
-                onFlipHorizontal(event.detail);
-            }));
-        }
-        if (onFlipVertical && $lg && $lg.current) {
-            $lg.current.addEventListener(LgMethods.onFlipVertical, (function (event) {
-                onFlipVertical(event.detail);
-            }));
-        }
-    }, [
-        onAfterAppendSlide,
-        onAfterAppendSubHtml,
-        onAfterClose,
-        onRotateLeft,
-        onRotateRight,
-        onFlipHorizontal,
-        onFlipVertical,
-        onAfterOpen,
-        onAfterSlide,
-        onBeforeClose,
-        onBeforeNextSlide,
-        onBeforeOpen,
-        onBeforePrevSlide,
-        onBeforeSlide,
-        onContainerResize,
-        onDragEnd,
-        onDragMove,
-        onDragStart,
-        onHasVideo,
-        onInit,
-        onPosterClick,
-        onSlideItemLoad,
-    ]);
-    useEffect(function () {
-        registerEvents();
-        var lightGallery$1 = lightGallery($lg.current, restProps);
-        return function cleanup() {
-            lightGallery$1.destroy();
-        };
-    }, [registerEvents, restProps]);
-    return (createElement("div", { className: "lg-react-element " + (elementClassNames ? elementClassNames : ''), ref: $lg }, children));
-};
-
-export default LG;
-//# sourceMappingURL=Lightgallery.es5.js.map