import { VirtualizationSettings } from './headless/index'; 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; export interface MobileSettings extends LightGalleryCoreMobileSettings, Partial, Partial, Partial, Partial, Partial, Partial, Partial, Partial, Partial, Partial { } 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> & { strings?: Partial; }; 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; /** * License key. lightGallery is free under the GPLv3; projects that keep * their source proprietary need a commercial license, and its key arrives * by email. Open-source projects can request a key at * contact@lightgalleryjs.com. * `0000-0000-000-0000` is a temporary key for evaluation: 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 License. */ 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 *
    *
  • startClass will be empty if zoomFromOrigin is true.
    • *
  • This can be used to change the starting effect when the image is loaded
    • *
  • This is also applied when navigating to new slides
    • *
*/ 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 data-lg-size="1920-1280" * * 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 - * 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" * * In the above example, up to 375 width img-240.jpg and lg-size 240-160 will be used. * Similarly, up to 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. * *
    *
  • At the moment, the zoomFromOrigin option is supported only for image slides.
    • *
  • The opening flight is skipped if dynamic option is enabled or galleryID found in the URL.
    • *
  • startClass will be empty if zoomFromOrigin is true to avoid css conflicts.
    • *
*/ 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 0 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. *
* For example, fading out the captions before going to next slide. * .lg-slide-progress class name is added to the current slide immediately after calling the slide method. * But transition begins only after the delay *
*/ slideDelay: number; /** * If true, toolbar, captions and thumbnails will not overlap with media element * This will not affect thumbnails if animateThumb is false * Also, toggle thumbnails button is not displayed if allowMediaOverlap is false *
* 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 defaultCaptionHeight option *
*/ 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 https://support.google.com/youtube/answer/6375112 */ 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 for 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 Virtualization. * @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 Accessibility. * @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 * false if option closable is false */ 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 toolbarOverflow. * @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 showGestureButtons. * @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 loop or slideEndAnimation 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 Localization & RTL. * @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 to 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 execute 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 the selector element is 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 becomes 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 is supported only in 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 stores all the props selectors to * reduce frequent dom interaction for fetching props every time. * * If you need any additional data to be fetched and stored in the galleryItems variable, * you can do this just by passing the prop names via extraProps * @example * HTML: *
* * *
* 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 *
* *
* * 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 option 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; /** * Customize strings. * @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 Localization & RTL. * @version V3.0.0 */ 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 Custom icons. * @version V3.0.0 */ icons: LgIcons; /** * The plugins to enable for this gallery, as the constructors exported * by each plugin entry, for example `[lgZoom, lgThumbnail]`. A plugin's * settings do nothing until the plugin is listed here. * See Plugins. */ plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[]; } export declare const lightGalleryCoreSettings: LightGalleryCoreSettings; export {};