File: /home/dnlightw-124/dn.lightweb.kr/node_modules/glightbox/index.d.ts
// Type definitions for Glightbox 3.2.1
// Project: https://github.com/biati-digital/glightbox/blob/master/README.md
// Definitions by: Ngoc Tu Nguyen <https://github.com/tomasvn>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
declare namespace Glightbox {
/**
* Youtube iframe api
* @see https://developers.google.com/youtube/player_parameters
*/
interface YoutubeOptions {
/**
* Whether to use an alternative version of Youtube without cookies
*/
noCookie?: boolean;
/**
* Show related videos
*/
rel?: number;
/**
* Show video title
* @see https://google.com/youtube/player_parameters#release_notes_08_23_2018
*
* @deprecated
*/
showinfo?: number;
/**
* Show or hide annotations
*/
iv_load_policy?: number;
}
/**
* Vimeo embed video api
*
* @see https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters
*/
interface VimeoOptions {
/**
* Show the byline on the video.
*/
byline?: boolean;
/**
* Show the author’s profile image (portrait)
*/
portrait?: boolean;
/**
* Show the video’s title.
*/
title?: boolean;
/**
* Enable or disable the background of the player
*/
transparent?: boolean;
}
interface Config {
/**
* Set aspect ratio
*/
ratio?: string;
/**
* Toggles whether fullscreen should be enabled or
* whether to use native iOS fullscreen when entering
* fullscreen
*/
fullscreen?: Record<'enabled' | 'iosNative', boolean>;
youtube?: YoutubeOptions;
vimeo?: VimeoOptions
}
interface PlyrOptions {
/**
* Get Plyr.js css files from cdn
*/
css?: string;
/**
* Get Plyr.js js files from cdn
*/
js?: string;
config?: Config;
}
interface Options {
/**
* Name of the selector for example '.glightbox' or 'data-glightbox'
* or '*[data-glightbox]'
*
* @default '.glightbox'
*/
selector?: string;
/**
* Instead of passing a selector you can pass all the items
* that you want in the gallery.
*
* @default null
*/
elements?: [] | null;
/**
* Name of the skin, it will add a class to the lightbox
* so you can style it with css.
*
* @default 'clean'
*/
skin?: string;
/**
* Name of the effect on lightbox open. (zoom, fade, none)
*
* @default 'zoom'
*/
openEffect?: string;
/**
* Name of the effect on lightbox close. (zoom, fade, none)
*
* @default 'zoom'
*/
closeEffect?: string;
/**
* Name of the effect on slide change. (slide, fade, zoom, none)
*
* @default 'slide'
*/
slideEffect?: string;
/**
* More text for descriptions on mobile devices.
*
* @default 'See more'
*/
moreText?: string;
/**
* Number of characters to display on the description before adding
* the moreText link (only for mobiles),
* if 0 it will display the entire description.
*
* @default 60
*/
moreLength?: number;
/**
* Show or hide the close button.
*
* @default true
*/
closeButton?: boolean;
/**
* Enable or disable the touch navigation (swipe).
*
* @default true
*/
touchNavigation?: boolean;
/**
* Image follow axis when dragging on mobile.
*
* @default true
*/
touchFollowAxis?: boolean;
/**
* Enable or disable the keyboard navigation.
*
* @default true
*/
keyboardNavigation?: boolean;
/**
* Close the lightbox when clicking outside the active slide.
*
* @default true
*/
closeOnOutsideClick?: boolean;
/**
* Start lightbox at defined index.
*
* @default 0
*/
startAt?: number;
/**
* Default width for inline elements and iframes
*
* @default '900px'
*/
width?: string;
/**
* Default height for inline elements and iframes
*
* @default '506px'
*/
height?: string;
/**
* Default width for videos.
*
* @default '560px'
*/
videosWidth?: string;
/**
* Global position for slides description
*
* @default 'bottom'
*/
descPosition?: string;
/**
* Loop slides on end.
*
* @default false
*/
loop?: Exclude<boolean, undefined>;
/**
* Enable or disable zoomable images
*
* @default true
*/
zoomable?: boolean;
/**
* Enable or disable mouse drag to go prev and next slide
*
* @default true
*/
draggable?: boolean;
/**
* Used with draggable. Number of pixels the user
* has to drag to go to prev or next slide.
*
* @default 40
*/
dragToleranceX?: number;
/**
* Used with draggable. Number of pixels the user has to drag
* up or down to close the lightbox
*
* @default 65
*/
dragToleranceY?: number;
/**
* If true the slide will automatically change to prev/next or close
* if dragToleranceX or dragToleranceY is reached,
* otherwise it will wait till the mouse is released.
*
* @default false
*/
dragAutoSnap?: boolean;
/**
* Enable or disable preloading.
*
* @default true
*/
preload?: boolean;
/**
* Set your own svg icons.
*/
svg?: Record<'close' | 'next' | 'prev', string>;
/**
* Define or adjust lightbox animations.
*
* @see:
*/
cssEffects?: Record<string, Record<'in' | 'out', string>>;
/**
* You can completely change the html of GLightbox.
*/
lightboxHTML?: string;
/**
* You can completely change the html of the individual slide.
*/
slideHTML?: string;
/**
* Autoplay videos on open.
*
* @default true
*/
autoplayVideos?: boolean;
/**
* If true video will be focused on play to allow
* keyboard sortcuts for the player, this will deactivate
* prev and next arrows to change slide.
*
*/
autofocusVideos?: boolean;
plyr?: PlyrOptions;
}
type EventTypes =
| "open"
| "close"
| "slide_before_change"
| "slide_changed"
| "slide_before_load"
| "slide_after_load"
| "slide_inserted"
| "slide_removed"
interface SlideConfig {
href?: string;
sizes?: string;
srcset?: string;
title?: string;
type?: "image" | "video" | "inline";
videoProvider?: string;
description?: string;
alt?: string;
descPosition?: 'bottom' | 'top' | 'left' | 'right';
effect?: string;
width?: string;
height?: string;
content?: boolean;
zoomable?: boolean;
draggable?: boolean;
}
interface BaseData {
index?: number;
slide?: Element;
slideNode?: Element;
slideConfig?: SlideConfig;
slideIndex?: number;
trigger?: Element;
player?: null | Record<any, any>;
}
type Payload<T extends EventTypes> = {
slide_before_change: {
prev: BaseData;
current: BaseData;
};
slide_changed: {
prev: BaseData;
current: BaseData;
};
slide_before_load: BaseData;
slide_after_load: BaseData;
slide_inserted: BaseData;
slide_removed: number;
}[T]
}
declare class GlightboxInit {
constructor(options: Glightbox.Options);
/**
* Initialize lightbox
*/
private init(): void;
/**
* Open lightbox
*/
public open(element?: Element, startAt?: number): void
/**
* Open at specific index
*/
public openAt(index?: number): void;
/**
* Set Slide
*/
private showSlide(index?: number, first?: boolean): void;
/**
* Preload slides
*/
private preloadSlide(index: number): null;
/**
* Load previous slide
* calls goToslide
*/
public prevSlide(): void;
/**
* Load next slide
* calls goToslide
*/
public nextSlide(): void;
/**
* Go to slide
* calls set slide
*/
public goToSlide(index?: number): void;
/**
* Insert slide
*/
insertSlide(config?: Record<any, any>, index?: number): void;
/**
* Remove slide
*/
public removeSlide(index?: number): boolean | undefined;
/**
* Slide In
*/
private slideAnimateIn(slide: Element, first: boolean): null;
/**
* Slide out
*/
private slideAnimateOut(): void;
/**
* Get all defined players
*/
getAllPlayers(): Record<string, any>;
/**
* Get player at index
*/
getSlidePlayerInstance(index: number): boolean | Record<any, any>;
/**
* Stop video at specified
* node or index
*/
stopSlideVideo(slide: Element | number): void;
/**
* Stop player at specified index
*/
slidePlayerPause(slide: Element | number): void;
/**
* Stop video at specified
* node or index
*
* @deprecated use slidePlayerPause instead
*/
stopSlide(slide: Element | number): void;
/**
* Play video at specified
* node or index
*/
playSlideVideo(slide: Element | number): void;
/**
* Play media player at specified
* node or index
*/
slidePlayerPlay(slide: Element | number): void;
/**
* Set the entire elements
* in the gallery, it replaces all
* the existing elements
* with the specified list
*/
setElements(elements: any[]): void;
/**
* Return the index
* of the specified node,
* this node is for example an image, link, etc.
* that when clicked it opens the lightbox
* its position in the elements array can change
* when using insertSlide or removeSlide so we
* need to find it in the elements list
*/
private getElementIndex(node: Node): boolean | number;
/**
* Get elements
* returns an array containing all
* the elements that must be displayed in the
* lightbox
*/
private getElements(): any[];
/**
* Return only the elements
* from a specific gallery
*/
private getGalleryElements(list: any[], gallery: any[]): any[];
/**
* Get selector
*/
private getSelector(): boolean | string;
/**
* Get the active slide
*/
public getActiveSlide(): Element;
/**
* Get the active index
*/
public getActiveSlideIndex(): number | undefined;
/**
* Get the defined
* effects as string
*/
private getAnimationClasses(): string;
/**
* Build the structure
*/
private build(): null;
/**
* Handle resize
* Create only to handle
* when the height of the screen
* is lower than the slide content
* this helps to resize videos vertically
* and images with description
*/
private resize(slide?: null): void;
/**
* Reload Lightbox
* reload and apply events to nodes
*/
public reload(): void;
/**
* Update navigation classes on slide change
*/
private updateNavigationClasses(): void;
/**
* Handle loop config
*/
private loop(): void;
/**
* Close Lightbox
* closes the lightbox and removes the slides
* and some classes
*/
public close(): boolean | undefined;
/**
* Destroy lightbox
* and all events
*/
public destroy(): void;
/**
* Set event
*/
public on(eventName: Glightbox.EventTypes, callback: () => void, once?: boolean): void;
/**
* Set event once
*/
public once(eventName: Glightbox.EventTypes, callback: () => void): void;
/**
* Triggers an specific event
* with data
*/
public trigger<T extends Glightbox.EventTypes>(eventName: T, data?: Glightbox.Payload<T>): void;
/**
* Removes all events
* set using the API
*/
private clearAllEvents(): void;
/**
* Get Version
*/
version(): string;
}
declare function GLightbox(options: Glightbox.Options): InstanceType<typeof GlightboxInit>
export = GLightbox;
export as namespace GLightbox;