lightgallery 2.9.0 → 3.0.0-beta.2

package/{lg-settings.d.ts → dist/types/lg-settings.d.ts}

@@ -1,425 +1,555 @@
-import { GalleryItem } from './lg-utils';
-import { LgQuery } from './lgQuery';
-import { LightGallery } from './lightgallery';
-import { AutoplaySettings } from './plugins/autoplay/lg-autoplay-settings';
-import { CommentSettings } from './plugins/comment/lg-comment-settings';
-import { FullscreenSettings } from './plugins/fullscreen/lg-fullscreen-settings';
-import { HashSettings } from './plugins/hash/lg-hash-settings';
-import { MediumZoomSettings } from './plugins/mediumZoom/lg-medium-zoom-settings';
-import { PagerSettings } from './plugins/pager/lg-pager-settings';
-import { RotateSettings } from './plugins/rotate/lg-rotate-settings';
-import { ShareSettings } from './plugins/share/lg-share-settings';
-import { ThumbnailsSettings } from './plugins/thumbnail/lg-thumbnail-settings';
-import { VideoSettings } from './plugins/video/lg-video-settings';
-import { ZoomSettings } from './plugins/zoom/lg-zoom-settings';
-declare type LightGalleryCoreMobileSettings = Exclude<LightGalleryCoreSettings, 'mobileSettings'>;
-export interface MobileSettings extends LightGalleryCoreMobileSettings, Partial<ZoomSettings>, Partial<ThumbnailsSettings>, Partial<VideoSettings>, Partial<AutoplaySettings>, Partial<CommentSettings>, Partial<FullscreenSettings>, Partial<HashSettings>, Partial<PagerSettings>, Partial<RotateSettings>, Partial<ShareSettings> {
-}
-export interface LightGalleryCoreStrings {
-    closeGallery: string;
-    toggleMaximize: string;
-    previousSlide: string;
-    nextSlide: string;
-    download: string;
-    playVideo: string;
-    mediaLoadingFailed: string;
-}
-export declare type LightGalleryAllSettings = LightGalleryCoreSettings & ZoomSettings & ThumbnailsSettings & VideoSettings & AutoplaySettings & CommentSettings & FullscreenSettings & HashSettings & PagerSettings & RotateSettings & ShareSettings & MediumZoomSettings;
-export declare type LightGallerySettings = Partial<LightGalleryAllSettings>;
-export interface LightGalleryCoreSettings {
-    /**
-     * Type of transition between images.
-     */
-    mode: 'lg-slide' | 'lg-fade' | 'lg-zoom-in' | 'lg-zoom-in-big' | 'lg-zoom-out' | 'lg-zoom-out-big' | 'lg-zoom-out-in' | 'lg-zoom-in-out' | 'lg-soft-zoom' | 'lg-scale-up' | 'lg-slide-circular' | 'lg-slide-circular-vertical' | 'lg-slide-vertical' | 'lg-slide-vertical-growth' | 'lg-slide-skew-only' | 'lg-slide-skew-only-rev' | 'lg-slide-skew-only-y' | 'lg-slide-skew-only-y-rev' | 'lg-slide-skew' | 'lg-slide-skew-rev' | 'lg-slide-skew-cross' | 'lg-slide-skew-cross-rev' | 'lg-slide-skew-ver' | 'lg-slide-skew-ver-rev' | 'lg-slide-skew-ver-cross' | 'lg-slide-skew-ver-cross-rev' | 'lg-lollipop' | 'lg-lollipop-rev' | 'lg-rotate' | 'lg-rotate-rev' | 'lg-tube';
-    /**
-     * Slide animation CSS easing property
-     */
-    easing: string;
-    /**
-     *Transition duration (in ms).
-     */
-    speed: number;
-    /**
-     * If you are using lightGallery for commercial projects, you need to purchase a commercial license
-     * to get the license key. For projects that are compatible with GPLv3 license,
-     * please contact us for getting a license key at <a href="mailto:contact@lightgalleryjs.com">contact@lightgalleryjs.com</a>.
-     * If you want to test lightGallery before purchasing a commercial license, you can
-     * use `0000-0000-000-0000` as a temporary license key
-     */
-    licenseKey: string;
-    /**
-     * Height of the gallery.
-     * example '100%' , '300px'
-     */
-    height: string;
-    /**
-     * Width of the gallery.
-     * example '100%' , '300px'
-     */
-    width: string;
-    /**
-     * Add custom class for gallery container
-     * This can be used to set different style for different galleries
-     */
-    addClass: string;
-    /**
-     * Start animation class for the gallery.
-     * @description
-     * <ul>
-     * <li>startClass will be empty zoomFromOrigin is true.</li>
-     * <li>This can be used to change the starting effect when the image is loaded</li>
-     * <li>This is also applied when navigating to new slides</li>
-     * </ul>
-     */
-    startClass: string;
-    /**
-     * Enable zoom from origin effect.
-     * @description You need to know the original image size upfront and provide it via data-lg-size attribute as <code> data-lg-size="1920-1280</code>"
-     *
-     * If you don't know, the size of a few images in the list, you can skip the data-lg-size attribute for the particular slides,
-     * lightGallery will show the default animation if data-lg-size is not available
-     *
-     * If you are using responsive images,
-     * you can pass a comma separated list of sizes combined with a max-width (up to what size the particular image should be used)
-     *
-     * example -
-     * <code> data-lg-size="240-160-375, 400-267-480, 1600-1067"
-     * data-responsive="img-240.jpg 375, img-400.jpg 480"
-     * data-src="img-1600.jpg" </code>
-     *
-     * In the above example, upto 375 width img.240.jpg and lg-size 240-160 will be used.
-     * Similarly, upto 480 pixel width size 400-267 and img-400.jpg will be used
-     * And above 480, lg-size 1600-1067 and img-1600.jpg will be used
-     *
-     * <ul>
-     * <li>At the moment, zoomFromOrigin options is supported only for image slides.</li>
-     * <li>Will be false if dynamic option is enabled or galleryID found in the URL.</li>
-     * <li>startClass will be empty if zoomFromOrigin is true to avoid css conflicts.</li>
-     * </ul>
-     */
-    zoomFromOrigin: boolean;
-    /**
-     * Zoom from image animation duration
-     */
-    startAnimationDuration: number;
-    /**
-     * Backdrop transition duration.
-     * Note - Do not change the value of backdrop via css.
-     */
-    backdropDuration: number;
-    /**
-     * Configure where the gallery should be appended.
-     * Useful to create inline galleries and more
-     * It is an empty string in the default settings and later assigned to document.body to avoid accessing document for SSR
-     */
-    container: HTMLElement | (() => HTMLElement | null) | (string | null);
-    /**
-     * Delay for hiding gallery controls in ms.
-     * Pass <code>0</code> if you don't want to hide the controls
-     */
-    hideBarsDelay: number;
-    /**
-     * Delay in hiding controls for the first time when gallery is opened
-     */
-    showBarsAfter: number;
-    /**
-     * Delay slide transitions.
-     * @description This is useful if you want to do any action in the current slide before moving to next slide.
-     * <section>
-     * For example, fading out the captions before going to next slide.
-     * <code>.lg-slide-progress</code> class name is added to the current slide immediately after calling the slide method.
-     * But transition begins only after the delay
-     * </section>
-     */
-    slideDelay: number;
-    /**
-     * Support legacy browsers
-     * @description Currently this is used only for adding support to srcset attribute via picturefill library
-     * If true lightGallery will show warning message to include picturefill library
-     */
-    supportLegacyBrowser: boolean;
-    /**
-     * If true, toolbar, captions and thumbnails will not overlap with media element
-     * This will not effect thumbnails if animateThumb is false
-     * Also, toggle thumbnails button is not displayed if allowMediaOverlap is false
-     * <section>
-     * 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.
-     * </section>
-     * <section>
-     * if you have dynamic captions for each media,
-     * you can provide an appropriate height for the captions via allowMediaOverlap option
-     * </section>
-     */
-    allowMediaOverlap: boolean;
-    /**
-     * Video max size.
-     * @description This can be over-written by passing specific size via data-lg-size attribute
-     * Recommended video resolution and & aspect ratios <a href="https://support.google.com/youtube/answer/6375112">https://support.google.com/youtube/answer/6375112</a>
-     */
-    videoMaxSize: string;
-    /**
-     * Automatically load poster image for YouTube videos
-     */
-    loadYouTubePoster: boolean;
-    /**
-     * Height of the caption for calculating allowMediaOverlap positions
-     * Note - this is only used to find the position of media item if allowMediaOverlap is true.
-     * Not for setting height of the captions
-     * Set 0 if you want to calculate the height of captions dynamically
-     */
-    defaultCaptionHeight: number;
-    /**
-     * aria-labelledby attribute fot gallery
-     */
-    ariaLabelledby: string;
-    /**
-     * aria-describedby attribute for gallery
-     */
-    ariaDescribedby: string;
-    /**
-     * Hide scrollbar when gallery is opened
-     * @version V2.5.0
-     */
-    hideScrollbar: boolean;
-    /**
-     * Reset to previous scrollPosition when lightGallery is closed
-     * @description By default, lightGallery doesn't hide the scrollbar for a smooth opening transition.
-     * If a user changes the scroll position, lightGallery resets it to the previous value
-     * @version V2.5.0
-     */
-    resetScrollPosition: boolean;
-    /**
-     * If false user won't be able to close the gallery at all
-     * This is useful for creating inline galleries.
-     */
-    closable: boolean;
-    /**
-     * allows vertical drag/swipe to close gallery
-     * <code>false</code> if option <code>closable</code> is <code>false</code>
-     */
-    swipeToClose: boolean;
-    /**
-     * allows clicks on black area to close gallery.
-     */
-    closeOnTap: boolean;
-    /**
-     * If false, close button won't be displayed.
-     * Useful for creating inline galleries.
-     */
-    showCloseIcon: boolean;
-    /**
-     * Show maximize icon.
-     * Useful for creating inline galleries.
-     */
-    showMaximizeIcon: boolean;
-    /**
-     * If false, will disable the ability to loop back to the beginning of the gallery from the last slide.
-     */
-    loop: boolean;
-    /**
-     * Whether the LightGallery could be closed by pressing the "Esc" key.
-     */
-    escKey: boolean;
-    /**
-     * Enable keyboard navigation
-     */
-    keyPress: boolean;
-    /**
-     * Trap focus within the lightGallery
-     * @version V2.5.0
-     */
-    trapFocus: boolean;
-    /**
-     * If false, prev/next buttons will not be displayed.
-     */
-    controls: boolean;
-    /**
-     * Enable slideEnd animation
-     */
-    slideEndAnimation: boolean;
-    /**
-     * If true, prev/next button will be hidden on first/last image.
-     * @description Note - this option will be ignored if <code>loop</code> or <code>slideEndAnimation</code> is set to true
-     */
-    hideControlOnEnd: boolean;
-    /**
-     * ability to navigate to next/prev slides on mousewheel
-     */
-    mousewheel: boolean;
-    /**
-     * Option to get captions from alt or title tags.
-     */
-    getCaptionFromTitleOrAlt: boolean;
-    /**
-     * control where the sub-html should be appended.
-     * If you choose '.lg-outer', you are responsible for placing the div at the right position.
-     * '.lg-outer' is useful if you want show custom HTML outside the normal gallery
-     */
-    appendSubHtmlTo: '.lg-sub-html' | '.lg-item' | '.lg-outer';
-    /**
-     * Set to true if the selector in "data-sub-html" should use the current item as its origin.
-     */
-    subHtmlSelectorRelative: boolean;
-    /**
-     * number of preload slides
-     * @description will exicute only after the current slide is fully loaded.
-     * for example, if you click on 4th image and if preload = 1 then 3rd slide and 5th
-     * slide will be loaded in the background after the 4th slide is fully loaded..
-     * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.
-     */
-    preload: number;
-    /**
-     * Control how many slide items should be kept in dom at a time
-     * @description To improve performance by reducing number of gallery items in the dom,
-     * lightGallery keeps only the lowest possible number of slides in the dom at a time.
-     * This has a minimum value of 3
-     */
-    numberOfSlideItemsInDom: number;
-    /**
-     * Custom selector property instead of direct children.
-     * @description Based on your markup structure, you can specify custom selectors to fetch media data for the gallery
-     * Pass "this" to select same element
-     * You can also pass HTMLCollection directly
-     * Example - '.my-selector' | '#my-selector' | this | document.querySelectorAll('.my-selector')
-     */
-    selector: string | HTMLCollection[];
-    /**
-     * By default selector element relative to the current gallery.
-     * Instead of that you can tell lightGallery to select element relative to another element.
-     * Example - '.my-selector-container' | '#my-selector-container'
-     * In the code this become selector =  document.querySelector(this.s.selectWithin ).querySelectorAll(this.s.selector);
-     */
-    selectWithin: string;
-    /**
-     * Custom html for next control
-     */
-    nextHtml: string;
-    /**
-     * Custom html for prev control
-     */
-    prevHtml: string;
-    /**
-     * specify which slide should load initially
-     */
-    index: number;
-    /**
-     * Set width for iframe.
-     */
-    iframeWidth: string;
-    /**
-     * Set height for iframe.
-     */
-    iframeHeight: string;
-    /**
-     * Set max width for iframe.
-     */
-    iframeMaxWidth: string;
-    /**
-     * Set max height for iframe.
-     */
-    iframeMaxHeight: string;
-    /**
-     * Enable download button.
-     * @description By default download url will be taken from data-src/href attribute but it supports only for modern browsers.
-     * If you want you can provide another url for download via data-download-url.
-     * pass false in data-download-url if you want to hide download button for the particular slide.
-     */
-    download: boolean;
-    /**
-     * Whether to show total number of images and index number of currently displayed image.
-     */
-    counter: boolean;
-    /**
-     * Where the counter should be appended
-     */
-    appendCounterTo: string;
-    /**
-     * By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.
-     */
-    swipeThreshold: number;
-    /**
-     * Enables swipe support for touch devices
-     */
-    enableSwipe: boolean;
-    /**
-     * Enables desktop mouse drag support
-     */
-    enableDrag: boolean;
-    /**
-     * LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images.
-     */
-    dynamic: boolean;
-    /**
-     * An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.
-     */
-    dynamicEl: GalleryItem[];
-    /**
-     * Fetch custom properties from the selector
-     * @description this is useful for plugin development
-     * By default lightGallery fetches and store all the props selectors to
-     * reduce frequent dom interaction for fetching props every time.
-     *
-     * If you need any addition data to be fetched and stored in the galleryItems variable,
-     * you can do this just by passing the prop names via extraProps
-     * @example
-     * HTML:
-     * <div id="lightGallery">
-     *     <a href="a.jpg" data-custom-prop="abc"><img src="thumb.jpg" /></a>
-     *     <a href="a.jpg" data-custom-prop="xyz"><img src="thumb.jpg" /></a>
-     * </div>
-     * JS:
-     * lightGallery(document.getElementById('lightGallery'), {
-     *     extraProps: ['customProp']
-     * })
-     * // Note - If you are using dynamic mode, you can pass any custom prop in the galleryItem
-     * lightGallery(document.getElementById('lightGallery'), {
-     *     dynamic: true,
-     *     dynamicEl: [{
-     *         src: 'img/img1.jpg',
-     *         customProp:'abc',
-     *     }]
-     * })
-     *
-     */
-    extraProps: string[];
-    /**
-     * Option to fetch different thumbnail image other than first image
-     * @description If you want to use external image for thumbnail,
-     * add the path of that image inside "data-" attribute
-     * and set value of this option to the name of your custom attribute.
-     *
-     * @example
-     * <div id="lightGallery">
-     *     <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
-     * </div>
-     *
-     * lightGallery(document.getElementById('lightGallery'), {
-     *     exThumbImage: 'data-external-thumb-image'
-     * })
-     */
-    exThumbImage: string;
-    /**
-     * Function to detect mobile devices
-     */
-    isMobile?: () => boolean;
-    /**
-     * Separate settings for mobile devices
-     * @description Note - this is applied only at the time of loading
-     * by default controls and close buttons are disabled on mobile devices.
-     * use this options if you want to enable them or change any other settings for mobile devices
-     * Note - mobileSettings does not merge default values, You need to provide all mobileSettings including default values
-     */
-    mobileSettings: Partial<MobileSettings>;
-    /**
-     * Customize string.
-     * @description This can be useful if you want to localize the lightGallery strings to other languages.
-     * Use your own service to translate the strings and pass it via settings.strings
-     * You can find dedicated strings option for all lightGallery modules in their respective documentation.
-     * Note - You need to provide values for all the strings. For example, even if you just want to change the closeGallery string, you need to provide all the other strings as well.
-     */
-    strings: LightGalleryCoreStrings;
-    plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[];
-}
-export declare const lightGalleryCoreSettings: LightGalleryCoreSettings;
-export {};
+import { VirtualizationSettings } from '@lightgallery/headless';
+import { LgIcons } from './lg-icons';
+import { GalleryItem } from './lg-utils';
+import { LgQuery } from './lgQuery';
+import { LightGallery } from './lightgallery';
+import { AutoplaySettings } from './plugins/autoplay/lg-autoplay-settings';
+import { CommentSettings } from './plugins/comment/lg-comment-settings';
+import { FullscreenSettings } from './plugins/fullscreen/lg-fullscreen-settings';
+import { HashSettings } from './plugins/hash/lg-hash-settings';
+import { JustifiedSettings } from './plugins/justified/lg-justified-settings';
+import { MediumZoomSettings } from './plugins/mediumZoom/lg-medium-zoom-settings';
+import { PagerSettings } from './plugins/pager/lg-pager-settings';
+import { RotateSettings } from './plugins/rotate/lg-rotate-settings';
+import { ShareSettings } from './plugins/share/lg-share-settings';
+import { ThumbnailsSettings } from './plugins/thumbnail/lg-thumbnail-settings';
+import { VideoSettings } from './plugins/video/lg-video-settings';
+import { ZoomSettings } from './plugins/zoom/lg-zoom-settings';
+type LightGalleryCoreMobileSettings = Exclude<LightGalleryCoreSettings, 'mobileSettings'>;
+export interface MobileSettings extends LightGalleryCoreMobileSettings, Partial<ZoomSettings>, Partial<ThumbnailsSettings>, Partial<VideoSettings>, Partial<AutoplaySettings>, Partial<CommentSettings>, Partial<FullscreenSettings>, Partial<HashSettings>, Partial<PagerSettings>, Partial<RotateSettings>, Partial<ShareSettings> {
+}
+export interface LightGalleryCoreStrings {
+    closeGallery: string;
+    toggleMaximize: string;
+    previousSlide: string;
+    nextSlide: string;
+    download: string;
+    playVideo: string;
+    mediaLoadingFailed: string;
+    /** Accessible name of the gallery dialog when `ariaLabelledby` is not set. */
+    galleryLabel: string;
+    /**
+     * Template announced to assistive technology on every slide change.
+     * `{index}` and `{total}` are replaced with the 1-based slide position
+     * and the slide count; the slide caption, when present, is appended.
+     */
+    slideAnnouncement: string;
+    /** Label of the toolbar's More options menu button. */
+    moreOptions: string;
+    /** Share plugin: share button label. */
+    share: string;
+    /** Thumbnail plugin: strip toggle button label. */
+    toggleThumbnails: string;
+    /** Autoplay plugin: slideshow toggle button label. */
+    toggleAutoplay: string;
+    /** Fullscreen plugin: fullscreen toggle button label. */
+    toggleFullscreen: string;
+    /** Zoom plugin: zoom-in button label. */
+    zoomIn: string;
+    /** Zoom plugin: zoom-out button label. */
+    zoomOut: string;
+    /** Zoom plugin: actual-size button label. */
+    viewActualSize: string;
+    /** Rotate plugin: rotate-left button label. */
+    rotateLeft: string;
+    /** Rotate plugin: rotate-right button label. */
+    rotateRight: string;
+    /** Rotate plugin: horizontal flip button label. */
+    flipHorizontal: string;
+    /** Rotate plugin: vertical flip button label. */
+    flipVertical: string;
+    /** Comment plugin: comments toggle button label. */
+    toggleComments: string;
+}
+export type LightGalleryAllSettings = LightGalleryCoreSettings & ZoomSettings & ThumbnailsSettings & VideoSettings & AutoplaySettings & CommentSettings & FullscreenSettings & HashSettings & JustifiedSettings & PagerSettings & RotateSettings & ShareSettings & MediumZoomSettings;
+export type LightGallerySettings = Partial<Omit<LightGalleryAllSettings, 'strings'>> & {
+    strings?: Partial<LightGalleryCoreStrings>;
+};
+export interface LightGalleryCoreSettings {
+    /**
+     * Type of transition between images.
+     */
+    mode: 'lg-slide' | 'lg-fade' | 'lg-zoom-in' | 'lg-zoom-in-big' | 'lg-zoom-out' | 'lg-zoom-out-big' | 'lg-zoom-out-in' | 'lg-zoom-in-out' | 'lg-soft-zoom' | 'lg-scale-up' | 'lg-slide-circular' | 'lg-slide-circular-vertical' | 'lg-slide-vertical' | 'lg-slide-vertical-growth' | 'lg-slide-skew-only' | 'lg-slide-skew-only-rev' | 'lg-slide-skew-only-y' | 'lg-slide-skew-only-y-rev' | 'lg-slide-skew' | 'lg-slide-skew-rev' | 'lg-slide-skew-cross' | 'lg-slide-skew-cross-rev' | 'lg-slide-skew-ver' | 'lg-slide-skew-ver-rev' | 'lg-slide-skew-ver-cross' | 'lg-slide-skew-ver-cross-rev' | 'lg-lollipop' | 'lg-lollipop-rev' | 'lg-rotate' | 'lg-rotate-rev' | 'lg-tube';
+    /**
+     * Slide animation CSS easing property
+     */
+    easing: string;
+    /**
+     *Transition duration (in ms).
+     */
+    speed: number;
+    /**
+     * If you are using lightGallery for commercial projects, you need to purchase a commercial license
+     * to get the license key. For projects that are compatible with GPLv3 license,
+     * please contact us for getting a license key at <a href="mailto:contact@lightgalleryjs.com">contact@lightgalleryjs.com</a>.
+     * If you want to test lightGallery before purchasing a commercial license, you can
+     * use `0000-0000-000-0000` as a temporary license key. It does not limit any
+     * feature; it only logs a console warning. lightGallery 3 keys start with `LIG`;
+     * a key from v1 or v2 logs a warning asking you to upgrade.
+     * See <a href="/docs/license/">License</a>.
+     */
+    licenseKey: string;
+    /**
+     * Height of the gallery.
+     * example '100%' , '300px'
+     */
+    height: string;
+    /**
+     * Width of the gallery.
+     * example '100%' , '300px'
+     */
+    width: string;
+    /**
+     * Add custom class for gallery container
+     * This can be used to set different style for different galleries
+     */
+    addClass: string;
+    /**
+     * Start animation class for the gallery.
+     * @description
+     * <ul>
+     * <li>startClass will be empty zoomFromOrigin is true.</li>
+     * <li>This can be used to change the starting effect when the image is loaded</li>
+     * <li>This is also applied when navigating to new slides</li>
+     * </ul>
+     */
+    startClass: string;
+    /**
+     * Enable zoom from origin effect.
+     * @description You need to know the original image size upfront and provide it via data-lg-size attribute as <code> data-lg-size="1920-1280</code>"
+     *
+     * If you don't know, the size of a few images in the list, you can skip the data-lg-size attribute for the particular slides,
+     * lightGallery will show the default animation if data-lg-size is not available
+     *
+     * If you are using responsive images,
+     * you can pass a comma separated list of sizes combined with a max-width (up to what size the particular image should be used)
+     *
+     * example -
+     * <code> data-lg-size="240-160-375, 400-267-480, 1600-1067"
+     * data-responsive="img-240.jpg 375, img-400.jpg 480"
+     * data-src="img-1600.jpg" </code>
+     *
+     * In the above example, upto 375 width img.240.jpg and lg-size 240-160 will be used.
+     * Similarly, upto 480 pixel width size 400-267 and img-400.jpg will be used
+     * And above 480, lg-size 1600-1067 and img-1600.jpg will be used
+     *
+     * When the gallery closes on a slide that has no thumbnail to return to
+     * (the trigger is hidden or collapsed, as with the overflow items behind a
+     * "+9 photos" tile, it has no data-lg-size, or the gallery is dynamic), the
+     * slide shrinks to the centre of the stage and fades out instead of flying
+     * to the thumbnail.
+     *
+     * <ul>
+     * <li>At the moment, zoomFromOrigin options is supported only for image slides.</li>
+     * <li>The opening flight is skipped if dynamic option is enabled or galleryID found in the URL.</li>
+     * <li>startClass will be empty if zoomFromOrigin is true to avoid css conflicts.</li>
+     * </ul>
+     */
+    zoomFromOrigin: boolean;
+    /**
+     * Zoom from image animation duration
+     */
+    startAnimationDuration: number;
+    /**
+     * Backdrop transition duration.
+     * Note - Do not change the value of backdrop via css.
+     */
+    backdropDuration: number;
+    /**
+     * Configure where the gallery should be appended.
+     * Useful to create inline galleries and more
+     * It is an empty string in the default settings and later assigned to document.body to avoid accessing document for SSR
+     */
+    container: HTMLElement | (() => HTMLElement | null) | (string | null);
+    /**
+     * Delay for hiding gallery controls in ms.
+     * Pass <code>0</code> if you don't want to hide the controls
+     */
+    hideBarsDelay: number;
+    /**
+     * Delay in hiding controls for the first time when gallery is opened
+     */
+    showBarsAfter: number;
+    /**
+     * Delay slide transitions.
+     * @description This is useful if you want to do any action in the current slide before moving to next slide.
+     * <section>
+     * For example, fading out the captions before going to next slide.
+     * <code>.lg-slide-progress</code> class name is added to the current slide immediately after calling the slide method.
+     * But transition begins only after the delay
+     * </section>
+     */
+    slideDelay: number;
+    /**
+     * Support legacy browsers
+     * @description Currently this is used only for adding support to srcset attribute via picturefill library
+     * If true lightGallery will show warning message to include picturefill library
+     */
+    supportLegacyBrowser: boolean;
+    /**
+     * If true, toolbar, captions and thumbnails will not overlap with media element
+     * This will not effect thumbnails if animateThumb is false
+     * Also, toggle thumbnails button is not displayed if allowMediaOverlap is false
+     * <section>
+     * 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.
+     * </section>
+     * <section>
+     * if you have dynamic captions for each media,
+     * you can provide an appropriate height for the captions via allowMediaOverlap option
+     * </section>
+     */
+    allowMediaOverlap: boolean;
+    /**
+     * Video max size.
+     * @description This can be over-written by passing specific size via data-lg-size attribute
+     * Recommended video resolution and & aspect ratios <a href="https://support.google.com/youtube/answer/6375112">https://support.google.com/youtube/answer/6375112</a>
+     */
+    videoMaxSize: string;
+    /**
+     * Automatically load poster image for YouTube videos
+     */
+    loadYouTubePoster: boolean;
+    /**
+     * Height of the caption for calculating allowMediaOverlap positions
+     * Note - this is only used to find the position of media item if allowMediaOverlap is true.
+     * Not for setting height of the captions
+     * Set 0 if you want to calculate the height of captions dynamically
+     */
+    defaultCaptionHeight: number;
+    /**
+     * aria-labelledby attribute fot gallery
+     */
+    ariaLabelledby: string;
+    /**
+     * aria-describedby attribute for gallery
+     */
+    ariaDescribedby: string;
+    /**
+     * Large-gallery virtualization. Off when undefined, the classic
+     * behavior: every thumbnail renders and the mounted-slide window is
+     * numberOfSlideItemsInDom.
+     * @description slides overrides the mounted-slide pool size; thumbs
+     * turns on thumbnail-strip windowing (only the visible thumbs plus an
+     * overscan render, with spacers preserving the strip geometry), a
+     * number is the overscan thumb count per side, 'auto' derives one
+     * extra viewport per side. The window advances at commit points
+     * (release, slide change, resize), never per pointer move.
+     * See <a href="/docs/virtualization/">Virtualization</a>.
+     * @version V3.0.0
+     */
+    virtualization?: VirtualizationSettings;
+    /**
+     * Announce slide changes to assistive technology through a dedicated
+     * polite live region (strings.slideAnnouncement + the slide caption).
+     * @description While enabled, the counter and caption bar are not
+     * separate live regions, the announcer is the single source of
+     * slide-change announcements. Set to false to restore the previous
+     * behavior (live counter and caption, no announcer).
+     * See <a href="/docs/accessibility/">Accessibility</a>.
+     * @version V3.0.0
+     */
+    ariaAnnouncements: boolean;
+    /**
+     * Hide scrollbar when gallery is opened
+     * @version V2.5.0
+     */
+    hideScrollbar: boolean;
+    /**
+     * Reset to previous scrollPosition when lightGallery is closed
+     * @description By default, lightGallery doesn't hide the scrollbar for a smooth opening transition.
+     * If a user changes the scroll position, lightGallery resets it to the previous value
+     * @version V2.5.0
+     */
+    resetScrollPosition: boolean;
+    /**
+     * If false user won't be able to close the gallery at all
+     * This is useful for creating inline galleries.
+     */
+    closable: boolean;
+    /**
+     * allows vertical drag/swipe to close gallery
+     * <code>false</code> if option <code>closable</code> is <code>false</code>
+     */
+    swipeToClose: boolean;
+    /**
+     * allows clicks on black area to close gallery.
+     */
+    closeOnTap: boolean;
+    /**
+     * If false, close button won't be displayed.
+     * Useful for creating inline galleries.
+     */
+    showCloseIcon: boolean;
+    /**
+     * Show maximize icon.
+     * Useful for creating inline galleries.
+     */
+    showMaximizeIcon: boolean;
+    /**
+     * Keep the toolbar on one row.
+     * @description When the toolbar buttons do not fit beside the counter,
+     * the lowest-priority ones move into a "More options" menu. Set to
+     * false to let the buttons wrap onto a second row instead.
+     * See <a href="/docs/settings/#toolbarOverflow">toolbarOverflow</a>.
+     * @version V3.0.0
+     */
+    toolbarOverflow: boolean;
+    /**
+     * Show the toolbar buttons that repeat a touch gesture.
+     * @description Zoom in, zoom out and actual size do what pinch and
+     * double-tap already do. On by default, and turned off on touch
+     * devices through mobileSettings.
+     * See <a href="/docs/settings/#showGestureButtons">showGestureButtons</a>.
+     * @version V3.0.0
+     */
+    showGestureButtons: boolean;
+    /**
+     * If false, will disable the ability to loop back to the beginning of the gallery from the last slide.
+     */
+    loop: boolean;
+    /**
+     * Whether the LightGallery could be closed by pressing the "Esc" key.
+     */
+    escKey: boolean;
+    /**
+     * Enable keyboard navigation
+     */
+    keyPress: boolean;
+    /**
+     * Trap focus within the lightGallery
+     * @version V2.5.0
+     */
+    trapFocus: boolean;
+    /**
+     * If false, prev/next buttons will not be displayed.
+     */
+    controls: boolean;
+    /**
+     * Enable slideEnd animation
+     */
+    slideEndAnimation: boolean;
+    /**
+     * If true, prev/next button will be hidden on first/last image.
+     * @description Note - this option will be ignored if <code>loop</code> or <code>slideEndAnimation</code> is set to true
+     */
+    hideControlOnEnd: boolean;
+    /**
+     * ability to navigate to next/prev slides on mousewheel
+     */
+    mousewheel: boolean;
+    /**
+     * Gallery reading direction: keyboard arrows, swipe advance and the
+     * slide/thumbnail transforms follow it. Visual mirroring is the
+     * opt-in lg-rtl.css layer - load it whenever this resolves to 'rtl'.
+     * 'auto' inherits the computed direction of the gallery element;
+     * the default stays 'ltr' so upgrades never change behavior on
+     * existing pages.
+     * See <a href="/docs/localization-rtl/">Localization &amp; RTL</a>.
+     * @version V3.0.0
+     */
+    direction: 'ltr' | 'rtl' | 'auto';
+    /**
+     * Option to get captions from alt or title tags.
+     */
+    getCaptionFromTitleOrAlt: boolean;
+    /**
+     * control where the sub-html should be appended.
+     * If you choose '.lg-outer', you are responsible for placing the div at the right position.
+     * '.lg-outer' is useful if you want show custom HTML outside the normal gallery
+     */
+    appendSubHtmlTo: '.lg-sub-html' | '.lg-item' | '.lg-outer';
+    /**
+     * Set to true if the selector in "data-sub-html" should use the current item as its origin.
+     */
+    subHtmlSelectorRelative: boolean;
+    /**
+     * number of preload slides
+     * @description will exicute only after the current slide is fully loaded.
+     * for example, if you click on 4th image and if preload = 1 then 3rd slide and 5th
+     * slide will be loaded in the background after the 4th slide is fully loaded..
+     * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.
+     */
+    preload: number;
+    /**
+     * Control how many slide items should be kept in dom at a time
+     * @description To improve performance by reducing number of gallery items in the dom,
+     * lightGallery keeps only the lowest possible number of slides in the dom at a time.
+     * This has a minimum value of 3
+     */
+    numberOfSlideItemsInDom: number;
+    /**
+     * Custom selector property instead of direct children.
+     * @description Based on your markup structure, you can specify custom selectors to fetch media data for the gallery
+     * Pass "this" to select same element
+     * You can also pass HTMLCollection directly
+     * Example - '.my-selector' | '#my-selector' | this | document.querySelectorAll('.my-selector')
+     */
+    selector: string | HTMLCollection[];
+    /**
+     * By default selector element relative to the current gallery.
+     * Instead of that you can tell lightGallery to select element relative to another element.
+     * Example - '.my-selector-container' | '#my-selector-container'
+     * In the code this become selector =  document.querySelector(this.s.selectWithin ).querySelectorAll(this.s.selector);
+     */
+    selectWithin: string;
+    /**
+     * Custom html for next control
+     */
+    nextHtml: string;
+    /**
+     * Custom html for prev control
+     */
+    prevHtml: string;
+    /**
+     * specify which slide should load initially
+     */
+    index: number;
+    /**
+     * Set width for iframe.
+     */
+    iframeWidth: string;
+    /**
+     * Set height for iframe.
+     */
+    iframeHeight: string;
+    /**
+     * Set max width for iframe.
+     */
+    iframeMaxWidth: string;
+    /**
+     * Set max height for iframe.
+     */
+    iframeMaxHeight: string;
+    /**
+     * Enable download button.
+     * @description By default download url will be taken from data-src/href attribute but it supports only for modern browsers.
+     * If you want you can provide another url for download via data-download-url.
+     * pass false in data-download-url if you want to hide download button for the particular slide.
+     */
+    download: boolean;
+    /**
+     * Whether to show total number of images and index number of currently displayed image.
+     */
+    counter: boolean;
+    /**
+     * Where the counter should be appended
+     */
+    appendCounterTo: string;
+    /**
+     * By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.
+     */
+    swipeThreshold: number;
+    /**
+     * Release velocity (px/ms, measured over the gesture's final ~100ms)
+     * at which a short swipe still changes slides, a flick.
+     * @version V3.0.0
+     */
+    flickVelocity: number;
+    /**
+     * Pinching down on an un-zoomed image and releasing closes the
+     * gallery (iOS Photos). Guarded: a pinch that went past fit zoom at
+     * any point is a zoom correction and never closes. Requires
+     * `closable` and the zoom plugin.
+     * @version V3.0.0
+     */
+    pinchToClose: boolean;
+    /**
+     * Enables swipe support for touch devices
+     */
+    enableSwipe: boolean;
+    /**
+     * Enables desktop mouse drag support
+     */
+    enableDrag: boolean;
+    /**
+     * LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images.
+     */
+    dynamic: boolean;
+    /**
+     * An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.
+     */
+    dynamicEl: GalleryItem[];
+    /**
+     * Fetch custom properties from the selector
+     * @description this is useful for plugin development
+     * By default lightGallery fetches and store all the props selectors to
+     * reduce frequent dom interaction for fetching props every time.
+     *
+     * If you need any addition data to be fetched and stored in the galleryItems variable,
+     * you can do this just by passing the prop names via extraProps
+     * @example
+     * HTML:
+     * <div id="lightGallery">
+     *     <a href="a.jpg" data-custom-prop="abc"><img src="thumb.jpg" /></a>
+     *     <a href="a.jpg" data-custom-prop="xyz"><img src="thumb.jpg" /></a>
+     * </div>
+     * JS:
+     * lightGallery(document.getElementById('lightGallery'), {
+     *     extraProps: ['customProp']
+     * })
+     * // Note - If you are using dynamic mode, you can pass any custom prop in the galleryItem
+     * lightGallery(document.getElementById('lightGallery'), {
+     *     dynamic: true,
+     *     dynamicEl: [{
+     *         src: 'img/img1.jpg',
+     *         customProp:'abc',
+     *     }]
+     * })
+     *
+     */
+    extraProps: string[];
+    /**
+     * Option to fetch different thumbnail image other than first image
+     * @description If you want to use external image for thumbnail,
+     * add the path of that image inside "data-" attribute
+     * and set value of this option to the name of your custom attribute.
+     *
+     * @example
+     * <div id="lightGallery">
+     *     <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
+     * </div>
+     *
+     * lightGallery(document.getElementById('lightGallery'), {
+     *     exThumbImage: 'data-external-thumb-image'
+     * })
+     */
+    exThumbImage: string;
+    /**
+     * Function to detect mobile devices
+     */
+    isMobile?: () => boolean;
+    /**
+     * Separate settings for mobile devices
+     * @description Note - this is applied only at the time of loading
+     * by default controls and close buttons are disabled on mobile devices.
+     * use this options if you want to enable them or change any other settings for mobile devices
+     * Note - mobileSettings does not merge default values, You need to provide all mobileSettings including default values
+     */
+    mobileSettings: Partial<MobileSettings>;
+    /**
+     * Customize string.
+     * @description This can be useful if you want to localize the lightGallery strings to other languages.
+     * Use your own service to translate the strings and pass it via settings.strings
+     * Every core and plugin label lives here; the per-plugin `*PluginStrings` objects are deprecated.
+     * Strings merge per-key over the defaults, override only the keys
+     * you need (the old provide-everything requirement is gone).
+     * See <a href="/docs/localization-rtl/">Localization &amp; RTL</a>.
+     */
+    strings: LightGalleryCoreStrings;
+    /**
+     * Custom icons: SVG markup per icon name, rendered instead of the
+     * built-in SVG icon set, bring your own icons without touching CSS.
+     * @description Omitted names keep the built-in icon. State-pair
+     * buttons (`maximize`/`minimize`, `autoplayPlay`/`autoplayPause`,
+     * `fullscreen`/`fullscreenExit`) need both names provided; a
+     * half-provided pair keeps the built-in pair. Size and color follow
+     * the button (`1em`/`currentColor`-friendly SVGs recommended).
+     * See <a href="/docs/custom-icons/">Custom icons</a>.
+     * @version V3.0.0
+     */
+    icons: LgIcons;
+    plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[];
+}
+export declare const lightGalleryCoreSettings: LightGalleryCoreSettings;
+export {};