lightgallery
Version:
lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile
557 lines (556 loc) • 23.7 kB
TypeScript
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<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;
/**
* 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
* <a href="mailto:contact@lightgalleryjs.com">contact@lightgalleryjs.com</a>.
* `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 <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 if 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, 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.
*
* <ul>
* <li>At the moment, the zoomFromOrigin option 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;
/**
* 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
* <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 defaultCaptionHeight 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 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 <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 & 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 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:
* <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 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<MobileSettings>;
/**
* 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 <a href="/docs/localization-rtl/">Localization & RTL</a>.
* @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 <a href="/docs/custom-icons/">Custom icons</a>.
* @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 <a href="/docs/getting-started/#plugins">Plugins</a>.
*/
plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[];
}
export declare const lightGalleryCoreSettings: LightGalleryCoreSettings;
export {};