lightgallery/lightgallery.d.ts

lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile

import { LightGalleryAllSettings, LightGallerySettings } from './lg-settings';
import { GalleryItem, ImageSize } from './lg-utils';
import { lgQuery } from './lgQuery';
import { Coords, MediaContainerPosition, SlideDirection } from './types';
export declare class LightGallery {
    settings: LightGalleryAllSettings;
    galleryItems: GalleryItem[];
    lgId: number;
    el: HTMLElement;
    LGel: lgQuery;
    lgOpened: boolean;
    index: number;
    plugins: any[];
    lGalleryOn: boolean;
    lgBusy: boolean;
    touchAction?: 'swipe' | 'zoomSwipe' | 'pinch';
    swipeDirection?: 'horizontal' | 'vertical';
    hideBarTimeout: any;
    currentItemsInDom: string[];
    outer: lgQuery;
    items: any;
    $backdrop: lgQuery;
    $lgComponents: lgQuery;
    $container: lgQuery;
    $inner: lgQuery;
    $content: lgQuery;
    $toolbar: lgQuery;
    prevScrollTop: number;
    bodyPaddingRight: number;
    private zoomFromOrigin;
    private currentImageSize?;
    private isDummyImageRemoved;
    private dragOrSwipeEnabled;
    mediaContainerPosition: {
        top: number;
        bottom: number;
    };
    constructor(element: HTMLElement, options?: LightGallerySettings);
    private generateSettings;
    private normalizeSettings;
    init(): void;
    openGalleryOnItemClick(): void;
    /**
     * Module constructor
     * Modules are build incrementally.
     * Gallery should be opened only once all the modules are initialized.
     * use moduleBuildTimeout to make sure this
     */
    buildModules(): void;
    validateLicense(): void;
    getSlideItem(index: number): lgQuery;
    getSlideItemId(index: number): string;
    getIdName(id: string): string;
    getElementById(id: string): lgQuery;
    manageSingleSlideClassName(): void;
    buildStructure(): void;
    refreshOnResize(): void;
    resizeVideoSlide(index: number, imageSize?: ImageSize): void;
    /**
     * Update slides dynamically.
     * Add, edit or delete slides dynamically when lightGallery is opened.
     * Modify the current gallery items and pass it via updateSlides method
     * @note
     * - Do not mutate existing lightGallery items directly.
     * - Always pass new list of gallery items
     * - You need to take care of thumbnails outside the gallery if any
     * - user this method only if you want to update slides when the gallery is opened. Otherwise, use `refresh()` method.
     * @param items Gallery items
     * @param index After the update operation, which slide gallery should navigate to
     * @category lGPublicMethods
     * @example
     * const plugin = lightGallery();
     *
     * // Adding slides dynamically
     * let galleryItems = [
     * // Access existing lightGallery items
     * // galleryItems are automatically generated internally from the gallery HTML markup
     * // or directly from galleryItems when dynamic gallery is used
     *   ...plugin.galleryItems,
     *     ...[
     *       {
     *         src: 'img/img-1.png',
     *           thumb: 'img/thumb1.png',
     *         },
     *     ],
     *   ];
     *   plugin.updateSlides(
     *     galleryItems,
     *     plugin.index,
     *   );
     *
     *
     * // Remove slides dynamically
     * galleryItems = JSON.parse(
     *   JSON.stringify(updateSlideInstance.galleryItems),
     * );
     * galleryItems.shift();
     * updateSlideInstance.updateSlides(galleryItems, 1);
     * @see <a href="/demos/update-slides/">Demo</a>
     */
    updateSlides(items: GalleryItem[], index: number): void;
    getItems(): GalleryItem[];
    shouldHideScrollbar(): boolean;
    hideScrollbar(): void;
    resetScrollBar(): void;
    /**
     * Open lightGallery.
     * Open gallery with specific slide by passing index of the slide as parameter.
     * @category lGPublicMethods
     * @param {Number} index  - index of the slide
     * @param {HTMLElement} element - Which image lightGallery should zoom from
     *
     * @example
     * const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
     * const dynamicGallery = lightGallery($dynamicGallery, {
     *     dynamic: true,
     *     dynamicEl: [
     *         {
     *              src: 'img/1.jpg',
     *              thumb: 'img/thumb-1.jpg',
     *              subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
     *         },
     *         ...
     *     ],
     * });
     * $dynamicGallery.addEventListener('click', function () {
     *     // Starts with third item.(Optional).
     *     // This is useful if you want use dynamic mode with
     *     // custom thumbnails (thumbnails outside gallery),
     *     dynamicGallery.openGallery(2);
     * });
     *
     */
    openGallery(index?: number, element?: HTMLElement): void;
    /**
     * Note - Changing the position of the media on every slide transition creates a flickering effect.
     * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption.
     * if you have dynamic captions for each media,
     * you can provide an appropriate height for the captions via allowMediaOverlap option
     */
    getMediaContainerPosition(): MediaContainerPosition;
    private setMediaContainerPosition;
    hideBars(): void;
    initPictureFill($img: lgQuery): void;
    /**
     *  @desc Create image counter
     *  Ex: 1/10
     */
    counter(): void;
    /**
     *  @desc add sub-html into the slide
     *  @param {Number} index - index of the slide
     */
    addHtml(index: number): void;
    /**
     *  @desc Preload slides
     *  @param {Number} index - index of the slide
     * @todo preload not working for the first slide, Also, should work for the first and last slide as well
     */
    preload(index: number): void;
    getDummyImgStyles(imageSize?: ImageSize): string;
    getVideoContStyle(imageSize?: ImageSize): string;
    getDummyImageContent($currentSlide: lgQuery, index: number, alt: string): string;
    setImgMarkup(src: string, $currentSlide: lgQuery, index: number): void;
    onSlideObjectLoad($slide: lgQuery, isHTML5VideoWithoutPoster: boolean, onLoad: () => void, onError: () => void): void;
    /**
     *
     * @param $el Current slide item
     * @param index
     * @param delay Delay is 0 except first time
     * @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin
     * @param isFirstSlide
     */
    onLgObjectLoad(currentSlide: lgQuery, index: number, delay: number, speed: number, isFirstSlide: boolean, isHTML5VideoWithoutPoster: boolean): void;
    triggerSlideItemLoad($currentSlide: lgQuery, index: number, delay: number, speed: number, isFirstSlide: boolean): void;
    isFirstSlideWithZoomAnimation(): boolean;
    addSlideVideoInfo(items: GalleryItem[]): void;
    /**
     *  Load slide content into slide.
     *  This is used to load content into slides that is not visible too
     *  @param {Number} index - index of the slide.
     *  @param {Boolean} rec - if true call loadcontent() function again.
     */
    loadContent(index: number, rec: boolean): void;
    /**
     * @desc Remove dummy image content and load next slides
     * Called only for the first time if zoomFromOrigin animation is enabled
     * @param index
     * @param $currentSlide
     * @param speed
     */
    loadContentOnFirstSlideLoad(index: number, $currentSlide: lgQuery, speed: number): void;
    getItemsToBeInsertedToDom(index: number, prevIndex: number, numberOfItems?: number): string[];
    organizeSlideItems(index: number, prevIndex: number): string[];
    /**
     * Get previous index of the slide
     */
    getPreviousSlideIndex(): number;
    setDownloadValue(index: number): void;
    makeSlideAnimation(direction: 'next' | 'prev', currentSlideItem: lgQuery, previousSlideItem: lgQuery): void;
    /**
     * Goto a specific slide.
     * @param {Number} index - index of the slide
     * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
     * @param {Boolean} fromThumb - true if slide function called via thumbnail click
     * @param {String} direction - Direction of the slide(next/prev)
     * @category lGPublicMethods
     * @example
     *  const plugin = lightGallery();
     *  // to go to 3rd slide
     *  plugin.slide(2);
     *
     */
    slide(index: number, fromTouch?: boolean, fromThumb?: boolean, direction?: SlideDirection | false): void;
    updateCurrentCounter(index: number): void;
    updateCounterTotal(): void;
    getSlideType(item: GalleryItem): 'video' | 'iframe' | 'image';
    touchMove(startCoords: Coords, endCoords: Coords, e?: TouchEvent): void;
    touchEnd(endCoords: Coords, startCoords: Coords, event: TouchEvent): void;
    enableSwipe(): void;
    enableDrag(): void;
    triggerPosterClick(): void;
    manageSwipeClass(): void;
    /**
     * Go to next slide
     * @param {Boolean} fromTouch - true if slide function called via touch event
     * @category lGPublicMethods
     * @example
     *  const plugin = lightGallery();
     *  plugin.goToNextSlide();
     * @see <a href="/demos/methods/">Demo</a>
     */
    goToNextSlide(fromTouch?: boolean): void;
    /**
     * Go to previous slides
     * @param {Boolean} fromTouch - true if slide function called via touch event
     * @category lGPublicMethods
     * @example
     *  const plugin = lightGallery({});
     *  plugin.goToPrevSlide();
     * @see <a href="/demos/methods/">Demo</a>
     *
     */
    goToPrevSlide(fromTouch?: boolean): void;
    keyPress(): void;
    arrow(): void;
    arrowDisable(index: number): void;
    setTranslate($el: lgQuery, xValue: number, yValue: number, scaleX?: number, scaleY?: number): void;
    mousewheel(): void;
    isSlideElement(target: lgQuery): boolean;
    isPosterElement(target: lgQuery): boolean;
    /**
     * Maximize minimize inline gallery.
     * @category lGPublicMethods
     */
    toggleMaximize(): void;
    invalidateItems(): void;
    trapFocus(): void;
    manageCloseGallery(): void;
    /**
     * Close lightGallery if it is opened.
     *
     * @description If closable is false in the settings, you need to pass true via closeGallery method to force close gallery
     * @return returns the estimated time to close gallery completely including the close animation duration
     * @category lGPublicMethods
     * @example
     *  const plugin = lightGallery();
     *  plugin.closeGallery();
     *
     */
    closeGallery(force?: boolean): number;
    initModules(): void;
    destroyModules(destroy?: true): void;
    /**
     * Refresh lightGallery with new set of children.
     *
     * @description This is useful to update the gallery when the child elements are changed without calling destroy method.
     *
     * If you are using dynamic mode, you can pass the modified array of dynamicEl as the first parameter to refresh the dynamic gallery
     * @see <a href="/demos/dynamic-mode/">Demo</a>
     * @category lGPublicMethods
     * @example
     *  const plugin = lightGallery();
     *  // Delete or add children, then call
     *  plugin.refresh();
     *
     */
    refresh(galleryItems?: GalleryItem[]): void;
    updateControls(): void;
    private destroyGallery;
    /**
     * Destroy lightGallery.
     * Destroy lightGallery and its plugin instances completely
     *
     * @description This method also calls CloseGallery function internally. Returns the time takes to completely close and destroy the instance.
     * In case if you want to re-initialize lightGallery right after destroying it, initialize it only once the destroy process is completed.
     * You can use refresh method most of the times.
     * @category lGPublicMethods
     * @example
     *  const plugin = lightGallery();
     *  plugin.destroy();
     *
     */
    destroy(): number;
}