\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- \n *
- startClass will be empty zoomFromOrigin is true. \n *
- This can be used to change the starting effect when the image is loaded \n *
- This is also applied when navigating to new slides \n *
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 * - \n *
- At the moment, zoomFromOrigin options is supported only for image slides. \n *
- Will be false if dynamic option is enabled or galleryID found in the URL. \n *
- startClass will be empty if zoomFromOrigin is true to avoid css conflicts. \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 * ![](\"thumb.jpg\")
\n * \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 * ![](\"a.jpg\")
\n * \n * \n * \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: Partial\n * \n * \n *
\n *\n * lightGallery(document.getElementById('lightGallery'), {\n * exThumbImage: 'data-external-thumb-image'\n * })\n * @data-attr data-*\n */\n thumb?: string;\n\n /**\n * alt attribute for the image\n * @data-attr alt\n */\n alt?: string;\n\n /**\n * Title attribute for the video\n * @data-attr title\n */\n title?: string;\n\n /**\n * Title for iframe\n * @data-attr data-iframe-title\n */\n iframeTitle?: string;\n\n /**\n * Caption for the slide\n * @description You can either pass the HTML markup or the ID or class name of the element which contains the captions\n * @data-attr data-sub-html\n */\n subHtml?: string;\n\n /**\n * url of the file which contain the sub html.\n * @description Note - Does not support Internet Explorer browser\n * @data-attr data-sub-html-url\n */\n subHtmlUrl?: string;\n\n /**\n * Video source\n * @data-attr data-video\n */\n video?: VideoSource;\n\n /**\n * Poster url\n * @data-attr data-poster\n */\n poster?: string;\n\n /**\n * Custom slide name to use in the url when hash plugin is enabled\n * @data-attr data-slide-name\n */\n slideName?: string;\n\n /**\n * List of images and viewport's max width separated by comma.\n * @description Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.\n * @data-attr data-responsive\n */\n responsive?: string;\n\n /**\n * srcset attribute values for the main image\n * @data-attr data-srcset\n */\n srcset?: string;\n\n /**\n * srcset sizes attribute for the main image\n * @data-attr data-sizes\n */\n sizes?: string;\n\n /**\n * Set true is you want to open your url in an iframe\n * @data-attr data-iframe\n */\n iframe?: boolean;\n\n /**\n * Download url for your image/video.\n * @description Pass false if you want to disable the download button.\n * @data-attr data-download-url\n */\n downloadUrl?: string | boolean;\n\n /**\n * Name of the file after it is downloaded.\n * @description The HTML value of the download attribute.\n * There are no restrictions on allowed values, and the browser will automatically\n * detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).\n * More info\n * @data-attr data-download\n */\n download?: string | boolean;\n\n /**\n * Actual size of the image in px.\n * @description This is used in zoom plugin to see the actual size of the image when double taped on the image.\n * @data-attr data-width\n */\n width?: string;\n\n /**\n * Facebook share URL.\n * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken.\n * @data-attr data-facebook-share-url\n */\n facebookShareUrl?: string;\n\n /**\n * Tweet text\n * @data-attr data-tweet-text\n */\n tweetText?: string;\n\n /**\n * Twitter share URL.\n * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.\n * @data-attr data-twitter-share-url\n */\n twitterShareUrl?: string;\n\n /**\n * Pinterest share URL.\n * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.\n * Note?: Pinterest requires absolute URL\n * @data-attr data-pinterest-share-url\n */\n pinterestShareUrl?: string;\n\n /**\n * Description for Pinterest post.\n * @data-attr data-pinterest-text\n */\n pinterestText?: string;\n\n /**\n * Facebook comments body html\n * @description Please refer facebook official documentation for generating the HTML markup\n * @example\n * \n * \n \n
`;\n },\n\n getImgMarkup(\n index: number,\n src: string,\n altAttr: string,\n srcset?: string,\n sizes?: string,\n sources?: ImageSources[],\n ): string {\n const srcsetAttr = srcset ? `srcset=\"${srcset}\"` : '';\n const sizesAttr = sizes ? `sizes=\"${sizes}\"` : '';\n const imgMarkup = `\n \n ${dummyImg || ''}\n ![](\"${_poster}\")
\n
`;\n },\n\n getFocusableElements(container: HTMLElement): NodeListOf\n \n\n
\n `;\n\n $LG(this.settings.container).append(template);\n\n if (document.body !== this.settings.container) {\n $LG(this.settings.container).css('position', 'relative');\n }\n\n this.outer = this.getElementById('lg-outer');\n this.$lgComponents = this.getElementById('lg-components');\n this.$backdrop = this.getElementById('lg-backdrop');\n this.$container = this.getElementById('lg-container');\n this.$inner = this.getElementById('lg-inner');\n this.$content = this.getElementById('lg-content');\n this.$toolbar = this.getElementById('lg-toolbar');\n\n this.$backdrop.css(\n 'transition-duration',\n this.settings.backdropDuration + 'ms',\n );\n\n let outerClassNames = `${this.settings.mode} `;\n\n this.manageSingleSlideClassName();\n\n if (this.settings.enableDrag) {\n outerClassNames += 'lg-grab ';\n }\n\n this.outer.addClass(outerClassNames);\n\n this.$inner.css('transition-timing-function', this.settings.easing);\n this.$inner.css('transition-duration', this.settings.speed + 'ms');\n\n if (this.settings.download) {\n this.$toolbar.append(\n ``,\n );\n }\n\n this.counter();\n\n $LG(window).on(\n `resize.lg.global${this.lgId} orientationchange.lg.global${this.lgId}`,\n () => {\n this.refreshOnResize();\n },\n );\n\n this.hideBars();\n\n this.manageCloseGallery();\n this.toggleMaximize();\n\n this.initModules();\n }\n\n refreshOnResize(): void {\n if (this.lgOpened) {\n const currentGalleryItem = this.galleryItems[this.index];\n const { __slideVideoInfo } = currentGalleryItem;\n\n this.mediaContainerPosition = this.getMediaContainerPosition();\n const { top, bottom } = this.mediaContainerPosition;\n this.currentImageSize = utils.getSize(\n this.items[this.index],\n this.outer,\n top + bottom,\n __slideVideoInfo && this.settings.videoMaxSize,\n );\n if (__slideVideoInfo) {\n this.resizeVideoSlide(this.index, this.currentImageSize);\n }\n if (this.zoomFromOrigin && !this.isDummyImageRemoved) {\n const imgStyle = this.getDummyImgStyles(this.currentImageSize);\n this.outer\n .find('.lg-current .lg-dummy-img')\n .first()\n .attr('style', imgStyle);\n }\n this.LGel.trigger(lGEvents.containerResize);\n }\n }\n\n resizeVideoSlide(index: number, imageSize?: ImageSize): void {\n const lgVideoStyle = this.getVideoContStyle(imageSize);\n const currentSlide = this.getSlideItem(index);\n currentSlide.find('.lg-video-cont').attr('style', lgVideoStyle);\n }\n\n /**\n * Update slides dynamically.\n * Add, edit or delete slides dynamically when lightGallery is opened.\n * Modify the current gallery items and pass it via updateSlides method\n * @note\n * - Do not mutate existing lightGallery items directly.\n * - Always pass new list of gallery items\n * - You need to take care of thumbnails outside the gallery if any\n * - user this method only if you want to update slides when the gallery is opened. Otherwise, use `refresh()` method.\n * @param items Gallery items\n * @param index After the update operation, which slide gallery should navigate to\n * @category lGPublicMethods\n * @example\n * const plugin = lightGallery();\n *\n * // Adding slides dynamically\n * let galleryItems = [\n * // Access existing lightGallery items\n * // galleryItems are automatically generated internally from the gallery HTML markup\n * // or directly from galleryItems when dynamic gallery is used\n * ...plugin.galleryItems,\n * ...[\n * {\n * src: 'img/img-1.png',\n * thumb: 'img/thumb1.png',\n * },\n * ],\n * ];\n * plugin.updateSlides(\n * galleryItems,\n * plugin.index,\n * );\n *\n *\n * // Remove slides dynamically\n * galleryItems = JSON.parse(\n * JSON.stringify(updateSlideInstance.galleryItems),\n * );\n * galleryItems.shift();\n * updateSlideInstance.updateSlides(galleryItems, 1);\n * @see Demo\n */\n updateSlides(items: GalleryItem[], index: number): void {\n if (this.index > items.length - 1) {\n this.index = items.length - 1;\n }\n if (items.length === 1) {\n this.index = 0;\n }\n if (!items.length) {\n this.closeGallery();\n return;\n }\n const currentSrc = this.galleryItems[index].src;\n this.galleryItems = items;\n this.updateControls();\n this.$inner.empty();\n this.currentItemsInDom = [];\n\n let _index = 0;\n // Find the current index based on source value of the slide\n this.galleryItems.some((galleryItem, itemIndex) => {\n if (galleryItem.src === currentSrc) {\n _index = itemIndex;\n return true;\n }\n return false;\n });\n\n this.currentItemsInDom = this.organizeSlideItems(_index, -1);\n this.loadContent(_index, true);\n this.getSlideItem(_index).addClass('lg-current');\n\n this.index = _index;\n this.updateCurrentCounter(_index);\n this.LGel.trigger(lGEvents.updateSlides);\n }\n\n // Get gallery items based on multiple conditions\n getItems(): GalleryItem[] {\n // Gallery items\n this.items = [];\n if (!this.settings.dynamic) {\n if (this.settings.selector === 'this') {\n this.items.push(this.el);\n } else if (this.settings.selector) {\n if (typeof this.settings.selector === 'string') {\n if (this.settings.selectWithin) {\n const selectWithin = $LG(this.settings.selectWithin);\n this.items = selectWithin\n .find(this.settings.selector)\n .get();\n } else {\n this.items = this.el.querySelectorAll(\n this.settings.selector,\n );\n }\n } else {\n this.items = this.settings.selector;\n }\n } else {\n this.items = this.el.children;\n }\n return utils.getDynamicOptions(\n this.items,\n this.settings.extraProps,\n this.settings.getCaptionFromTitleOrAlt,\n this.settings.exThumbImage,\n );\n } else {\n return this.settings.dynamicEl || [];\n }\n }\n\n shouldHideScrollbar(): boolean {\n return (\n this.settings.hideScrollbar &&\n document.body === this.settings.container\n );\n }\n\n hideScrollbar(): void {\n if (!this.shouldHideScrollbar()) {\n return;\n }\n this.bodyPaddingRight = parseFloat($LG('body').style().paddingRight);\n const bodyRect = document.documentElement.getBoundingClientRect();\n const scrollbarWidth = window.innerWidth - bodyRect.width;\n\n $LG(document.body).css(\n 'padding-right',\n scrollbarWidth + this.bodyPaddingRight + 'px',\n );\n $LG(document.body).addClass('lg-overlay-open');\n }\n\n resetScrollBar(): void {\n if (!this.shouldHideScrollbar()) {\n return;\n }\n $LG(document.body).css('padding-right', this.bodyPaddingRight + 'px');\n $LG(document.body).removeClass('lg-overlay-open');\n }\n\n /**\n * Open lightGallery.\n * Open gallery with specific slide by passing index of the slide as parameter.\n * @category lGPublicMethods\n * @param {Number} index - index of the slide\n * @param {HTMLElement} element - Which image lightGallery should zoom from\n *\n * @example\n * const $dynamicGallery = document.getElementById('dynamic-gallery-demo');\n * const dynamicGallery = lightGallery($dynamicGallery, {\n * dynamic: true,\n * dynamicEl: [\n * {\n * src: 'img/1.jpg',\n * thumb: 'img/thumb-1.jpg',\n * subHtml: '\n\n
\n \n
\n \n ${\n this.settings.appendSubHtmlTo === '.lg-outer'\n ? subHtmlCont\n : ''\n }\n \n
\n ${controls}\n \n ${\n this.settings.appendSubHtmlTo === '.lg-sub-html'\n ? subHtmlCont\n : ''\n }\n
\n Image 1 title
Image 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 = `\n ${this.index + 1} /\n ${\n this.galleryItems.length\n }
`;\n this.outer.find(this.settings.appendCounterTo).append(counterHtml);\n }\n }\n\n /**\n * @desc add sub-html into the slide\n * @param {Number} index - index of the slide\n */\n addHtml(index: number): void {\n let subHtml;\n let subHtmlUrl;\n if (this.galleryItems[index].subHtmlUrl) {\n subHtmlUrl = this.galleryItems[index].subHtmlUrl;\n } else {\n subHtml = this.galleryItems[index].subHtml;\n }\n\n if (!subHtmlUrl) {\n if (subHtml) {\n // get first letter of sub-html\n // if first letter starts with . or # get the html form the jQuery object\n const fL = subHtml.substring(0, 1);\n if (fL === '.' || fL === '#') {\n if (\n this.settings.subHtmlSelectorRelative &&\n !this.settings.dynamic\n ) {\n subHtml = $LG(this.items)\n .eq(index)\n .find(subHtml)\n .first()\n .html();\n } else {\n subHtml = $LG(subHtml).first().html();\n }\n }\n } else {\n subHtml = '';\n }\n }\n\n if (this.settings.appendSubHtmlTo !== '.lg-item') {\n if (subHtmlUrl) {\n this.outer.find('.lg-sub-html').load(subHtmlUrl);\n } else {\n this.outer.find('.lg-sub-html').html(subHtml as string);\n }\n } else {\n const currentSlide = $LG(this.getSlideItemId(index));\n if (subHtmlUrl) {\n currentSlide.load(subHtmlUrl);\n } else {\n currentSlide.append(\n `${subHtml}
`,\n );\n }\n }\n\n // Add lg-empty-html class if title doesn't exist\n if (typeof subHtml !== 'undefined' && subHtml !== null) {\n if (subHtml === '') {\n this.outer\n .find(this.settings.appendSubHtmlTo)\n .addClass('lg-empty-html');\n } else {\n this.outer\n .find(this.settings.appendSubHtmlTo)\n .removeClass('lg-empty-html');\n }\n }\n\n this.LGel.trigger\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 { ZoomSettings, zoomSettings } from './lg-zoom-settings';\nimport { LgQuery, lgQuery } from '../../lgQuery';\nimport { LightGallery } from '../../lightgallery';\nimport { lGEvents } from '../../lg-events';\n\ninterface Coords {\n x: number;\n y: number;\n}\n\ninterface DragAllowedAxises {\n allowX: boolean;\n allowY: boolean;\n}\ninterface ZoomTouchEvent {\n pageX: number;\n touches: { pageY: number; pageX: number }[];\n pageY: number;\n}\ninterface PossibleCords {\n minX: number;\n minY: number;\n maxX: number;\n maxY: number;\n}\n\nconst ZOOM_TRANSITION_DURATION = 500;\n\nexport default class Zoom {\n private core: LightGallery;\n private settings: ZoomSettings;\n private $LG!: LgQuery;\n private imageReset!: number | boolean;\n zoomableTimeout: any;\n positionChanged!: boolean;\n pageX!: number;\n pageY!: number;\n scale!: number;\n\n containerRect!: ClientRect;\n dragAllowedAxises!: DragAllowedAxises;\n top!: number;\n left!: number;\n scrollTop!: number;\n constructor(instance: LightGallery, $LG: LgQuery) {\n // get lightGallery core plugin instance\n this.core = instance;\n this.$LG = $LG;\n\n this.settings = { ...zoomSettings, ...this.core.settings };\n\n return this;\n }\n\n // Append Zoom controls. Actual size, Zoom-in, Zoom-out\n buildTemplates(): void {\n let zoomIcons = this.settings.showZoomInOutIcons\n ? ``\n : '';\n\n if (this.settings.actualSize) {\n zoomIcons += ``;\n }\n\n this.core.outer.addClass('lg-use-transition-for-zoom');\n\n this.core.$toolbar.first().append(zoomIcons);\n }\n\n /**\n * @desc Enable zoom option only once the image is completely loaded\n * If zoomFromOrigin is true, Zoom is enabled once the dummy image has been inserted\n *\n * Zoom styles are defined under lg-zoomable CSS class.\n */\n enableZoom(event: CustomEvent): void {\n // delay will be 0 except first time\n let _speed = this.settings.enableZoomAfter + event.detail.delay;\n\n // set _speed value 0 if gallery opened from direct url and if it is first slide\n if (\n this.$LG('body').first().hasClass('lg-from-hash') &&\n event.detail.delay\n ) {\n // will execute only once\n _speed = 0;\n } else {\n // Remove lg-from-hash to enable starting animation.\n this.$LG('body').first().removeClass('lg-from-hash');\n }\n\n this.zoomableTimeout = setTimeout(() => {\n if (!this.isImageSlide(this.core.index)) {\n return;\n }\n this.core.getSlideItem(event.detail.index).addClass('lg-zoomable');\n if (event.detail.index === this.core.index) {\n this.setZoomEssentials();\n }\n }, _speed + 30);\n }\n\n enableZoomOnSlideItemLoad(): void {\n // Add zoomable class\n this.core.LGel.on(\n `${lGEvents.slideItemLoad}.zoom`,\n this.enableZoom.bind(this),\n );\n }\n\n getDragCords(e: MouseEvent): Coords {\n return {\n x: e.pageX,\n y: e.pageY,\n };\n }\n getSwipeCords(e: TouchEvent): Coords {\n const x = e.touches[0].pageX;\n const y = e.touches[0].pageY;\n return {\n x,\n y,\n };\n }\n\n getDragAllowedAxises(scale: number, scaleDiff?: number): DragAllowedAxises {\n const $image = this.core\n .getSlideItem(this.core.index)\n .find('.lg-image')\n .first()\n .get();\n\n let height = 0;\n let width = 0;\n const rect = $image.getBoundingClientRect();\n if (scale) {\n height = $image.offsetHeight * scale;\n width = $image.offsetWidth * scale;\n } else if (scaleDiff) {\n height = rect.height + scaleDiff * rect.height;\n width = rect.width + scaleDiff * rect.width;\n } else {\n height = rect.height;\n width = rect.width;\n }\n const allowY = height > this.containerRect.height;\n const allowX = width > this.containerRect.width;\n return {\n allowX,\n allowY,\n };\n }\n\n setZoomEssentials(): void {\n this.containerRect = this.core.$content.get().getBoundingClientRect();\n }\n\n /**\n * @desc Image zoom\n * Translate the wrap and scale the image to get better user experience\n *\n * @param {String} scale - Zoom decrement/increment value\n */\n zoomImage(\n scale: number,\n scaleDiff: number,\n reposition: boolean,\n resetToMax: boolean,\n ): void {\n if (Math.abs(scaleDiff) <= 0) return;\n\n const offsetX = this.containerRect.width / 2 + this.containerRect.left;\n\n const offsetY =\n this.containerRect.height / 2 +\n this.containerRect.top +\n this.scrollTop;\n\n let originalX;\n let originalY;\n\n if (scale === 1) {\n this.positionChanged = false;\n }\n\n const dragAllowedAxises = this.getDragAllowedAxises(0, scaleDiff);\n\n const { allowY, allowX } = dragAllowedAxises;\n if (this.positionChanged) {\n originalX = this.left / (this.scale - scaleDiff);\n originalY = this.top / (this.scale - scaleDiff);\n this.pageX = offsetX - originalX;\n this.pageY = offsetY - originalY;\n\n this.positionChanged = false;\n }\n\n const possibleSwipeCords = this.getPossibleSwipeDragCords(scaleDiff);\n\n let x;\n let y;\n let _x = offsetX - this.pageX;\n let _y = offsetY - this.pageY;\n\n if (scale - scaleDiff > 1) {\n const scaleVal = (scale - scaleDiff) / Math.abs(scaleDiff);\n _x =\n (scaleDiff < 0 ? -_x : _x) +\n this.left * (scaleVal + (scaleDiff < 0 ? -1 : 1));\n _y =\n (scaleDiff < 0 ? -_y : _y) +\n this.top * (scaleVal + (scaleDiff < 0 ? -1 : 1));\n x = _x / scaleVal;\n y = _y / scaleVal;\n } else {\n const scaleVal = (scale - scaleDiff) * scaleDiff;\n x = _x * scaleVal;\n y = _y * scaleVal;\n }\n\n if (reposition) {\n if (allowX) {\n if (this.isBeyondPossibleLeft(x, possibleSwipeCords.minX)) {\n x = possibleSwipeCords.minX;\n } else if (\n this.isBeyondPossibleRight(x, possibleSwipeCords.maxX)\n ) {\n x = possibleSwipeCords.maxX;\n }\n } else {\n if (scale > 1) {\n if (x < possibleSwipeCords.minX) {\n x = possibleSwipeCords.minX;\n } else if (x > possibleSwipeCords.maxX) {\n x = possibleSwipeCords.maxX;\n }\n }\n }\n // @todo fix this\n if (allowY) {\n if (this.isBeyondPossibleTop(y, possibleSwipeCords.minY)) {\n y = possibleSwipeCords.minY;\n } else if (\n this.isBeyondPossibleBottom(y, possibleSwipeCords.maxY)\n ) {\n y = possibleSwipeCords.maxY;\n }\n } else {\n // If the translate value based on index of beyond the viewport, utilize the available space to prevent image being cut out\n if (scale > 1) {\n //If image goes beyond viewport top, use the minim possible translate value\n if (y < possibleSwipeCords.minY) {\n y = possibleSwipeCords.minY;\n } else if (y > possibleSwipeCords.maxY) {\n y = possibleSwipeCords.maxY;\n }\n }\n }\n }\n\n this.setZoomStyles({\n x: x,\n y: y,\n scale,\n });\n\n this.left = x;\n this.top = y;\n\n if (resetToMax) {\n this.setZoomImageSize();\n }\n }\n\n resetImageTranslate(index: number): void {\n if (!this.isImageSlide(index)) {\n return;\n }\n const $image = this.core.getSlideItem(index).find('.lg-image').first();\n this.imageReset = false;\n $image.removeClass(\n 'reset-transition reset-transition-y reset-transition-x',\n );\n this.core.outer.removeClass('lg-actual-size');\n $image.css('width', 'auto').css('height', 'auto');\n setTimeout(() => {\n $image.removeClass('no-transition');\n }, 10);\n }\n\n setZoomImageSize(): void {\n const $image = this.core\n .getSlideItem(this.core.index)\n .find('.lg-image')\n .first();\n\n setTimeout(() => {\n const actualSizeScale = this.getCurrentImageActualSizeScale();\n\n if (this.scale >= actualSizeScale) {\n $image.addClass('no-transition');\n this.imageReset = true;\n }\n }, ZOOM_TRANSITION_DURATION);\n\n setTimeout(() => {\n const actualSizeScale = this.getCurrentImageActualSizeScale();\n\n if (this.scale >= actualSizeScale) {\n const dragAllowedAxises = this.getDragAllowedAxises(this.scale);\n\n $image\n .css(\n 'width',\n ($image.get() as HTMLImageElement).naturalWidth + 'px',\n )\n .css(\n 'height',\n ($image.get() as HTMLImageElement).naturalHeight + 'px',\n );\n\n this.core.outer.addClass('lg-actual-size');\n\n if (dragAllowedAxises.allowX && dragAllowedAxises.allowY) {\n $image.addClass('reset-transition');\n } else if (\n dragAllowedAxises.allowX &&\n !dragAllowedAxises.allowY\n ) {\n $image.addClass('reset-transition-x');\n } else if (\n !dragAllowedAxises.allowX &&\n dragAllowedAxises.allowY\n ) {\n $image.addClass('reset-transition-y');\n }\n }\n }, ZOOM_TRANSITION_DURATION + 50);\n }\n\n /**\n * @desc apply scale3d to image and translate to image wrap\n * @param {style} X,Y and scale\n */\n setZoomStyles(style: { x: number; y: number; scale: number }): void {\n const $imageWrap = this.core\n .getSlideItem(this.core.index)\n .find('.lg-img-wrap')\n .first();\n const $image = this.core\n .getSlideItem(this.core.index)\n .find('.lg-image')\n .first();\n const $dummyImage = this.core.outer\n .find('.lg-current .lg-dummy-img')\n .first();\n this.scale = style.scale;\n $image.css(\n 'transform',\n 'scale3d(' + style.scale + ', ' + style.scale + ', 1)',\n );\n\n $dummyImage.css(\n 'transform',\n 'scale3d(' + style.scale + ', ' + style.scale + ', 1)',\n );\n\n const transform =\n 'translate3d(' + style.x + 'px, ' + style.y + 'px, 0)';\n $imageWrap.css('transform', transform);\n }\n\n /**\n * @param index - Index of the current slide\n * @param event - event will be available only if the function is called on clicking/taping the imags\n */\n setActualSize(index: number, event?: ZoomTouchEvent): void {\n const currentItem = this.core.galleryItems[this.core.index];\n this.resetImageTranslate(index);\n setTimeout(() => {\n // Allow zoom only on image\n if (\n !currentItem.src ||\n this.core.outer.hasClass('lg-first-slide-loading')\n ) {\n return;\n }\n const scale = this.getCurrentImageActualSizeScale();\n const prevScale = this.scale;\n if (this.core.outer.hasClass('lg-zoomed')) {\n this.scale = 1;\n } else {\n this.scale = this.getScale(scale);\n }\n this.setPageCords(event);\n\n this.beginZoom(this.scale);\n this.zoomImage(this.scale, this.scale - prevScale, true, true);\n\n setTimeout(() => {\n this.core.outer.removeClass('lg-grabbing').addClass('lg-grab');\n }, 10);\n }, 50);\n }\n\n getNaturalWidth(index: number): number {\n const $image = this.core.getSlideItem(index).find('.lg-image').first();\n\n const naturalWidth = this.core.galleryItems[index].width;\n return naturalWidth\n ? parseFloat(naturalWidth)\n : undefined || ($image.get() as any).naturalWidth;\n }\n\n getActualSizeScale(naturalWidth: number, width: number): number {\n let _scale;\n let scale;\n if (naturalWidth >= width) {\n _scale = naturalWidth / width;\n scale = _scale || 2;\n } else {\n scale = 1;\n }\n return scale;\n }\n\n getCurrentImageActualSizeScale(): number {\n const $image = this.core\n .getSlideItem(this.core.index)\n .find('.lg-image')\n .first();\n const width = $image.get().offsetWidth;\n const naturalWidth = this.getNaturalWidth(this.core.index) || width;\n return this.getActualSizeScale(naturalWidth, width);\n }\n\n getPageCords(event?: ZoomTouchEvent): Coords {\n const cords: Coords = {} as Coords;\n if (event) {\n cords.x = event.pageX || event.touches[0].pageX;\n cords.y = event.pageY || event.touches[0].pageY;\n } else {\n const containerRect = this.core.$content\n .get()\n .getBoundingClientRect();\n cords.x = containerRect.width / 2 + containerRect.left;\n cords.y =\n containerRect.height / 2 + this.scrollTop + containerRect.top;\n }\n return cords;\n }\n\n setPageCords(event?: ZoomTouchEvent): void {\n const pageCords = this.getPageCords(event);\n\n this.pageX = pageCords.x;\n this.pageY = pageCords.y;\n }\n\n manageActualPixelClassNames(): void {\n const $actualSize = this.core.getElementById('lg-actual-size');\n $actualSize\n .removeClass(this.settings.actualSizeIcons.zoomIn)\n .addClass(this.settings.actualSizeIcons.zoomOut);\n }\n\n // If true, zoomed - in else zoomed out\n beginZoom(scale: number): boolean {\n this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging');\n if (scale > 1) {\n this.core.outer.addClass('lg-zoomed');\n this.manageActualPixelClassNames();\n } else {\n this.resetZoom();\n }\n return scale > 1;\n }\n\n getScale(scale: number): number {\n const actualSizeScale = this.getCurrentImageActualSizeScale();\n if (scale < 1) {\n scale = 1;\n } else if (scale > actualSizeScale) {\n scale = actualSizeScale;\n }\n return scale;\n }\n\n init(): void {\n if (!this.settings.zoom) {\n return;\n }\n this.buildTemplates();\n this.enableZoomOnSlideItemLoad();\n\n let tapped: ReturnType