\n HTML5 video source = source: {\n src: string;\n type: string;\n }[];\n attributes: HTMLVideoElement;\n *
\n */\n html5Video: VideoSource;\n /**\n * True if video has poster\n */\n hasPoster: boolean;\n}\n\n/**\n * Fired when the image is rotated in anticlockwise direction\n * @name lgRotateLeft\n * @method onRotateLeft\n */\nexport interface RotateLeftDetail {\n /**\n * Index of the slide\n */\n index: number;\n}\n\n/**\n * Fired when the image is rotated in clockwise direction\n * @name lgRotateRight\n * @method onRotateRight\n */\nexport interface RotateRightDetail {\n /**\n * Index of the slide\n */\n index: number;\n}\n\n/**\n * Fired when the image is flipped horizontally\n * @name lgFlipHorizontal\n * @method onFlipHorizontal\n */\nexport interface FlipHorizontalDetail {\n /**\n * Index of the slide\n */\n index: number;\n}\n\n/**\n * Fired when the image is flipped vertically\n * @name lgFlipVertical\n * @method onFlipVertical\n */\nexport interface FlipVerticalDetail {\n /**\n * Index of the slide\n */\n index: number;\n}\n","import { GalleryItem } from './lg-utils';\nimport { LgQuery } from './lgQuery';\nimport { LightGallery } from './lightgallery';\nimport { AutoplaySettings } from './plugins/autoplay/lg-autoplay-settings';\nimport { CommentSettings } from './plugins/comment/lg-comment-settings';\nimport { FullscreenSettings } from './plugins/fullscreen/lg-fullscreen-settings';\nimport { HashSettings } from './plugins/hash/lg-hash-settings';\nimport { PagerSettings } from './plugins/pager/lg-pager-settings';\nimport { RotateSettings } from './plugins/rotate/lg-rotate-settings';\nimport { ShareSettings } from './plugins/share/lg-share-settings';\nimport { ThumbnailsSettings } from './plugins/thumbnail/lg-thumbnail-settings';\nimport { VideoSettings } from './plugins/video/lg-video-settings';\nimport { ZoomSettings } from './plugins/zoom/lg-zoom-settings';\n\ntype LightGalleryCoreMobileSettings = Exclude<\n LightGalleryCoreSettings,\n 'mobileSettings'\n>;\n\n// @todo use separate mobile settings for plugins\nexport interface MobileSettings\n extends LightGalleryCoreMobileSettings,\n Partial data-lg-size=\"1920-1280
\"\n *\n * 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,\n * lightGallery will show the default animation if data-lg-size is not available\n *\n * If you are using responsive images,\n * you can pass a comma separated list of sizes combined with a max-width (up to what size the particular image should be used)\n *\n * example -\n * data-lg-size=\"240-160-375, 400-267-480, 1600-1067\"\n * data-responsive=\"img-240.jpg 375, img-400.jpg 480\"\n * data-src=\"img-1600.jpg\"
\n *\n * In the above example, upto 375 width img.240.jpg and lg-size 240-160 will be used.\n * Similarly, upto 480 pixel width size 400-267 and img-400.jpg will be used\n * And above 480, lg-size 1600-1067 and img-1600.jpg will be used\n *\n * 0
if you don't want to hide the controls\n */\n hideBarsDelay: number;\n\n /**\n * Delay in hiding controls for the first time when gallery is opened\n */\n showBarsAfter: number;\n\n /**\n * Delay slide transitions.\n * @description This is useful if you want to do any action in the current slide before moving to next slide.\n * .lg-slide-progress
class name is added to the current slide immediately after calling the slide method.\n * But transition begins only after the delay\n * false
if option closable
is false
\n */\n swipeToClose: boolean;\n /**\n * allows clicks on black area to close gallery.\n */\n closeOnTap: boolean;\n\n /**\n * If false, close button won't be displayed.\n * Useful for creating inline galleries.\n */\n showCloseIcon: boolean;\n\n /**\n * Show maximize icon.\n * Useful for creating inline galleries.\n */\n showMaximizeIcon: boolean;\n\n /**\n * If false, will disable the ability to loop back to the beginning of the gallery from the last slide.\n */\n loop: boolean;\n\n /**\n * Whether the LightGallery could be closed by pressing the \"Esc\" key.\n */\n escKey: boolean;\n\n /**\n * Enable keyboard navigation\n */\n keyPress: boolean;\n\n /**\n * Trap focus within the lightGallery\n * @version V2.5.0\n */\n trapFocus: boolean;\n\n /**\n * If false, prev/next buttons will not be displayed.\n */\n controls: boolean;\n\n /**\n * Enable slideEnd animation\n */\n slideEndAnimation: boolean;\n\n /**\n * If true, prev/next button will be hidden on first/last image.\n * @description Note - this option will be ignored if loop
or slideEndAnimation
is set to true\n */\n hideControlOnEnd: boolean;\n\n /**\n * ability to navigate to next/prev slides on mousewheel\n */\n mousewheel: boolean;\n\n /**\n * Option to get captions from alt or title tags.\n */\n getCaptionFromTitleOrAlt: boolean;\n\n /**\n * control where the sub-html should be appended.\n * If you choose '.lg-outer', you are responsible for placing the div at the right position.\n * '.lg-outer' is useful if you want show custom HTML outside the normal gallery\n */\n appendSubHtmlTo: '.lg-sub-html' | '.lg-item' | '.lg-outer';\n\n /**\n * Set to true if the selector in \"data-sub-html\" should use the current item as its origin.\n */\n subHtmlSelectorRelative: boolean;\n\n /**\n * number of preload slides\n * @description will exicute only after the current slide is fully loaded.\n * for example, if you click on 4th image and if preload = 1 then 3rd slide and 5th\n * slide will be loaded in the background after the 4th slide is fully loaded..\n * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.\n */\n preload: number;\n\n /**\n * Control how many slide items should be kept in dom at a time\n * @description To improve performance by reducing number of gallery items in the dom,\n * lightGallery keeps only the lowest possible number of slides in the dom at a time.\n * This has a minimum value of 3\n */\n numberOfSlideItemsInDom: number;\n\n /**\n * Custom selector property instead of direct children.\n * @description Based on your markup structure, you can specify custom selectors to fetch media data for the gallery\n * Pass \"this\" to select same element\n * You can also pass HTMLCollection directly\n * Example - '.my-selector' | '#my-selector' | this | document.querySelectorAll('.my-selector')\n */\n selector: string | HTMLCollection[];\n\n /**\n * By default selector element relative to the current gallery.\n * Instead of that you can tell lightGallery to select element relative to another element.\n * Example - '.my-selector-container' | '#my-selector-container'\n * In the code this become selector = document.querySelector(this.s.selectWithin ).querySelectorAll(this.s.selector);\n */\n selectWithin: string;\n\n /**\n * Custom html for next control\n */\n nextHtml: string;\n\n /**\n * Custom html for prev control\n */\n prevHtml: string;\n\n /**\n * specify which slide should load initially\n */\n index: number;\n\n /**\n * Set width for iframe.\n */\n iframeWidth: string;\n\n /**\n * Set height for iframe.\n */\n iframeHeight: string;\n\n /**\n * Set max width for iframe.\n */\n iframeMaxWidth: string;\n\n /**\n * Set max height for iframe.\n */\n iframeMaxHeight: string;\n\n /**\n * Enable download button.\n * @description By default download url will be taken from data-src/href attribute but it supports only for modern browsers.\n * If you want you can provide another url for download via data-download-url.\n * pass false in data-download-url if you want to hide download button for the particular slide.\n */\n download: boolean;\n\n /**\n * Whether to show total number of images and index number of currently displayed image.\n */\n counter: boolean;\n\n /**\n * Where the counter should be appended\n */\n appendCounterTo: string;\n\n /**\n * By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.\n */\n swipeThreshold: number;\n\n /**\n * Enables swipe support for touch devices\n */\n enableSwipe: boolean;\n\n /**\n * Enables desktop mouse drag support\n */\n enableDrag: boolean;\n\n /**\n * LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images.\n */\n dynamic: boolean;\n\n /**\n * An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.\n */\n dynamicEl: GalleryItem[];\n\n /**\n * Fetch custom properties from the selector\n * @description this is useful for plugin development\n * By default lightGallery fetches and store all the props selectors to\n * reduce frequent dom interaction for fetching props every time.\n *\n * If you need any addition data to be fetched and stored in the galleryItems variable,\n * you can do this just by passing the prop names via extraProps\n * @example\n * HTML:\n * \n * JS:\n * lightGallery(document.getElementById('lightGallery'), {\n * extraProps: ['customProp']\n * })\n * // Note - If you are using dynamic mode, you can pass any custom prop in the galleryItem\n * lightGallery(document.getElementById('lightGallery'), {\n * dynamic: true,\n * dynamicEl: [{\n * src: 'img/img1.jpg',\n * customProp:'abc',\n * }]\n * })\n *\n */\n extraProps: string[];\n\n /**\n * Option to fetch different thumbnail image other than first image\n * @description If you want to use external image for thumbnail,\n * add the path of that image inside \"data-\" attribute\n * and set value of this option to the name of your custom attribute.\n *\n * @example\n * \n *\n * lightGallery(document.getElementById('lightGallery'), {\n * exThumbImage: 'data-external-thumb-image'\n * })\n */\n exThumbImage: string;\n\n /**\n * Function to detect mobile devices\n */\n isMobile?: () => boolean;\n\n /**\n * Separate settings for mobile devices\n * @description Note - this is applied only at the time of loading\n * by default controls and close buttons are disabled on mobile devices.\n * use this options if you want to enable them or change any other settings for mobile devices\n * Note - mobileSettings does not merge default values, You need to provide all mobileSettings including default values\n */\n mobileSettings: PartialImage 1 descriptions.
',\n * },\n * ...\n * ],\n * });\n * $dynamicGallery.addEventListener('click', function () {\n * // Starts with third item.(Optional).\n * // This is useful if you want use dynamic mode with\n * // custom thumbnails (thumbnails outside gallery),\n * dynamicGallery.openGallery(2);\n * });\n *\n */\n openGallery(index = this.settings.index, element?: HTMLElement): void {\n // prevent accidental double execution\n if (this.lgOpened) return;\n this.lgOpened = true;\n this.outer.removeClass('lg-hide-items');\n\n this.hideScrollbar();\n\n // Add display block, but still has opacity 0\n this.$container.addClass('lg-show');\n\n const itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(\n index,\n index,\n );\n this.currentItemsInDom = itemsToBeInsertedToDom;\n\n let items = '';\n itemsToBeInsertedToDom.forEach((item) => {\n items = items + ``;\n });\n\n this.$inner.append(items);\n this.addHtml(index);\n let transform: string | undefined = '';\n this.mediaContainerPosition = this.getMediaContainerPosition();\n const { top, bottom } = this.mediaContainerPosition;\n if (!this.settings.allowMediaOverlap) {\n this.setMediaContainerPosition(top, bottom);\n }\n const { __slideVideoInfo } = this.galleryItems[index];\n if (this.zoomFromOrigin && element) {\n this.currentImageSize = utils.getSize(\n element,\n this.outer,\n top + bottom,\n __slideVideoInfo && this.settings.videoMaxSize,\n );\n transform = utils.getTransform(\n element,\n this.outer,\n top,\n bottom,\n this.currentImageSize,\n );\n }\n if (!this.zoomFromOrigin || !transform) {\n this.outer.addClass(this.settings.startClass);\n this.getSlideItem(index).removeClass('lg-complete');\n }\n const timeout = this.settings.zoomFromOrigin\n ? 100\n : this.settings.backdropDuration;\n setTimeout(() => {\n this.outer.addClass('lg-components-open');\n }, timeout);\n this.index = index;\n this.LGel.trigger(lGEvents.beforeOpen);\n\n // add class lg-current to remove initial transition\n this.getSlideItem(index).addClass('lg-current');\n\n this.lGalleryOn = false;\n // Store the current scroll top value to scroll back after closing the gallery..\n this.prevScrollTop = $LG(window).scrollTop();\n\n setTimeout(() => {\n // Need to check both zoomFromOrigin and transform values as we need to set set the\n // default opening animation if user missed to add the lg-size attribute\n\n if (this.zoomFromOrigin && transform) {\n const currentSlide = this.getSlideItem(index);\n currentSlide.css('transform', transform);\n setTimeout(() => {\n currentSlide\n .addClass('lg-start-progress lg-start-end-progress')\n .css(\n 'transition-duration',\n this.settings.startAnimationDuration + 'ms',\n );\n this.outer.addClass('lg-zoom-from-image');\n });\n setTimeout(() => {\n currentSlide.css('transform', 'translate3d(0, 0, 0)');\n }, 100);\n }\n\n setTimeout(() => {\n this.$backdrop.addClass('in');\n this.$container.addClass('lg-show-in');\n }, 10);\n\n setTimeout(() => {\n if (\n this.settings.trapFocus &&\n document.body === this.settings.container\n ) {\n this.trapFocus();\n }\n }, this.settings.backdropDuration + 50);\n\n // lg-visible class resets gallery opacity to 1\n if (!this.zoomFromOrigin || !transform) {\n setTimeout(() => {\n this.outer.addClass('lg-visible');\n }, this.settings.backdropDuration);\n }\n\n // initiate slide function\n this.slide(index, false, false, false);\n\n this.LGel.trigger(lGEvents.afterOpen);\n });\n\n if (document.body === this.settings.container) {\n $LG('html').addClass('lg-on');\n }\n }\n\n /**\n * Note - Changing the position of the media on every slide transition creates a flickering effect.\n * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption.\n * if you have dynamic captions for each media,\n * you can provide an appropriate height for the captions via allowMediaOverlap option\n */\n public getMediaContainerPosition(): MediaContainerPosition {\n if (this.settings.allowMediaOverlap) {\n return {\n top: 0,\n bottom: 0,\n };\n }\n const top = this.$toolbar.get().clientHeight || 0;\n const subHtml = this.outer.find('.lg-components .lg-sub-html').get();\n const captionHeight =\n this.settings.defaultCaptionHeight ||\n (subHtml && subHtml.clientHeight) ||\n 0;\n const thumbContainer = this.outer.find('.lg-thumb-outer').get();\n const thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0;\n const bottom = thumbHeight + captionHeight;\n return {\n top,\n bottom,\n };\n }\n\n private setMediaContainerPosition(top = 0, bottom = 0): void {\n this.$content.css('top', top + 'px').css('bottom', bottom + 'px');\n }\n\n hideBars(): void {\n // Hide controllers if mouse doesn't move for some period\n setTimeout(() => {\n this.outer.removeClass('lg-hide-items');\n if (this.settings.hideBarsDelay > 0) {\n this.outer.on('mousemove.lg click.lg touchstart.lg', () => {\n this.outer.removeClass('lg-hide-items');\n\n clearTimeout(this.hideBarTimeout);\n\n // Timeout will be cleared on each slide movement also\n this.hideBarTimeout = setTimeout(() => {\n this.outer.addClass('lg-hide-items');\n }, this.settings.hideBarsDelay);\n });\n this.outer.trigger('mousemove.lg');\n }\n }, this.settings.showBarsAfter);\n }\n\n initPictureFill($img: lgQuery): void {\n if (this.settings.supportLegacyBrowser) {\n try {\n picturefill({\n elements: [$img.get()],\n });\n } catch (e) {\n console.warn(\n 'lightGallery :- If you want srcset or picture tag to be supported for older browser please include picturefil javascript library in your document.',\n );\n }\n }\n }\n\n /**\n * @desc Create image counter\n * Ex: 1/10\n */\n counter(): void {\n if (this.settings.counter) {\n const counterHtml = `