lightgallery/plugins/zoom/lg-zoom.umd.js.map

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

{"version":3,"file":"lg-zoom.umd.js","sources":["../../../src/plugins/zoom/lg-zoom-settings.ts","../../../src/lg-events.ts","../../../src/plugins/zoom/lg-zoom.ts"],"sourcesContent":["export interface ActualSizeIcons {\n    zoomIn: 'lg-zoom-in' | 'lg-actual-size';\n    zoomOut: 'lg-zoom-out' | 'lg-actual-size';\n}\n\nexport interface ZoomStrings {\n    zoomIn: string;\n    zoomOut: string;\n    viewActualSize: string;\n}\n\nexport interface ZoomSettings {\n    /**\n     * Value of zoom should be incremented/decremented\n     */\n    scale: number;\n\n    /**\n     * Enable/Disable zoom option\n     */\n    zoom: boolean;\n\n    /**\n     * Enable actual size icon.\n     */\n    actualSize: boolean;\n\n    /**\n     * Once the slide transition is completed, how much time should take zoom plugin to activate\n     * @description Some css styles will be added to the images if zoom is enabled.\n     * So it might conflict if you add any custom styles to the images such as the initial transition while opening the gallery.\n     * So you can delay adding zoom related styles to the images by changing the value of enableZoomAfter.\n     */\n    enableZoomAfter: number;\n\n    /**\n     * Show zoom in, zoom out icons\n     */\n    showZoomInOutIcons: boolean;\n\n    /**\n     * Actual size icons classnames.\n     * Specify classnames for both ZoomIn and ZoomOut states\n     * You can use `actualSizeIcons: { zoomIn: 'lg-actual-size', zoomOut: 'lg-zoom-out' }`\n     * to show actual size icons instead of zoom in and zoom out icons.\n     */\n    actualSizeIcons: ActualSizeIcons;\n\n    /**\n     * Custom translation strings for aria-labels\n     */\n    zoomPluginStrings: ZoomStrings;\n}\n\nexport const zoomSettings: ZoomSettings = {\n    scale: 1,\n    zoom: true,\n    actualSize: true,\n    showZoomInOutIcons: false,\n    actualSizeIcons: {\n        zoomIn: 'lg-zoom-in',\n        zoomOut: 'lg-zoom-out',\n    } as ActualSizeIcons,\n    enableZoomAfter: 300,\n    zoomPluginStrings: {\n        zoomIn: 'Zoom in',\n        zoomOut: 'Zoom out',\n        viewActualSize: 'View actual size',\n    } as ZoomStrings,\n};\n","import { LightGallery } from './lightgallery';\nimport { VideoSource } from './plugins/video/types';\n\n/**\n * List of lightGallery events\n * All events should be documented here\n * Below interfaces are used to build the website documentations\n * */\nexport const lGEvents: {\n    [key: string]: string;\n} = {\n    afterAppendSlide: 'lgAfterAppendSlide',\n    init: 'lgInit',\n    hasVideo: 'lgHasVideo',\n    containerResize: 'lgContainerResize',\n    updateSlides: 'lgUpdateSlides',\n    afterAppendSubHtml: 'lgAfterAppendSubHtml',\n    beforeOpen: 'lgBeforeOpen',\n    afterOpen: 'lgAfterOpen',\n    slideItemLoad: 'lgSlideItemLoad',\n    beforeSlide: 'lgBeforeSlide',\n    afterSlide: 'lgAfterSlide',\n    posterClick: 'lgPosterClick',\n    dragStart: 'lgDragStart',\n    dragMove: 'lgDragMove',\n    dragEnd: 'lgDragEnd',\n    beforeNextSlide: 'lgBeforeNextSlide',\n    beforePrevSlide: 'lgBeforePrevSlide',\n    beforeClose: 'lgBeforeClose',\n    afterClose: 'lgAfterClose',\n    rotateLeft: 'lgRotateLeft',\n    rotateRight: 'lgRotateRight',\n    flipHorizontal: 'lgFlipHorizontal',\n    flipVertical: 'lgFlipVertical',\n    autoplay: 'lgAutoplay',\n    autoplayStart: 'lgAutoplayStart',\n    autoplayStop: 'lgAutoplayStop',\n};\n\n// Follow the below format for the event documentation\n// @method is the method name when event is used with Angular/React components\n\n/**\n * Fired only once when lightGallery is initialized\n * @name lgInit\n * @method onInit\n * @example\n *   const lg = document.getElementById('custom-events-demo');\n *   // Perform any action on lightGallery initialization.\n *   // Init event returns the plugin instance that can be used to call any lightGalley public method\n *   let pluginInstance = null;\n *   lg.addEventListener('lgInit', (event) => {\n *      pluginInstance = event.detail.instance;\n *   });\n *   lightGallery(lg);\n * @see <a href=\"/docs/methods\">Methods<a>\n */\nexport interface InitDetail {\n    /**\n     * lightGallery plugin instance\n     */\n    instance: LightGallery;\n}\n\n/**\n * Fired when the slide content has been inserted into it's slide container.\n * @name lgAfterAppendSlide\n * @method onAfterAppendSlide\n */\nexport interface AfterAppendSlideEventDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired immediately before opening the gallery\n * @name lgBeforeOpen\n * @method onBeforeOpen\n */\nexport interface BeforeOpenDetail {}\n\n/**\n * Fired immediately after opening the gallery\n * @name lgAfterOpen\n * @method onAfterOpen\n */\nexport interface AfterOpenDetail {}\n\n/**\n * Fired once the media inside the slide has been completely loaded .\n * @name lgSlideItemLoad\n * @method onSlideItemLoad\n */\nexport interface SlideItemLoadDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * For the first slide, lightGallery adds some delay for displaying the loaded slide item.\n     * This delay is required for the transition effect when the slide item is displayed\n     * Respect the delay when you use this event\n     */\n    delay: number;\n\n    // Will be true for the first slide\n    isFirstSlide: boolean;\n}\n\n/**\n * Fired immediately before each slide transition.\n * @name lgBeforeSlide\n * @method onBeforeSlide\n * @example\n *   const lg = document.getElementById('custom-events-demo');\n *   // Perform any action before each slide transition\n *   lg.addEventListener('lgBeforeSlide', (event) => {\n *       const { index, prevIndex } = event.detail;\n *       alert(index, prevIndex);\n *   });\n *   lightGallery(lg);\n */\nexport interface BeforeSlideDetail {\n    /**\n     * Index of the previous slide\n     */\n    prevIndex: number;\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n    /**\n     * true if slide function called via thumbnail click\n     */\n    fromThumb: boolean;\n}\n\n/**\n * Fired immediately after each slide transition.\n * @name lgAfterSlide\n * @method onAfterSlide\n */\nexport interface AfterSlideDetail {\n    /**\n     * Index of the previous slide\n     */\n    prevIndex: number;\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n    /**\n     * true if slide function called via thumbnail click\n     */\n    fromThumb: boolean;\n}\n\n/**\n * Fired when the video poster is clicked.\n * @name lgPosterClick\n * @method onPosterClick\n */\nexport interface PosterClickDetail {}\n\n/**\n * Fired when the drag event to move to different slide starts.\n * @name lgDragStart\n * @method onDragStart\n */\nexport interface DragStartDetail {}\n\n/**\n * Fired periodically during the drag operation.\n * @name lgDragMove\n * @method onDragMove\n */\nexport interface DragMoveDetail {}\n\n/**\n * Fired when the user has finished the drag operation\n * @name lgDragEnd\n * @method onDragEnd\n */\nexport interface DragEndDetail {}\n\n/**\n * Fired immediately before the start of the close process.\n * @name lgBeforeClose\n * @method onBeforeClose\n */\nexport interface BeforeCloseDetail {}\n\n/**\n * Fired immediately once lightGallery is closed.\n * @name lgAfterClose\n * @method onAfterClose\n */\nexport interface AfterCloseDetail {\n    /**\n     * lightGallery plugin instance\n     */\n    instance: LightGallery;\n}\n\n/**\n * Fired immediately before each \"next\" slide transition\n * @name lgBeforeNextSlide\n * @method onBeforeNextSlide\n */\nexport interface BeforeNextSlideDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n}\n\n/**\n * Fired immediately before each \"prev\" slide transition\n * @name lgBeforePrevSlide\n * @method onBeforePrevSlide\n */\nexport interface BeforePrevSlideDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n    /**\n     * true if slide function called via touch event or mouse drag\n     */\n    fromTouch: boolean;\n}\n\n/**\n * Fired when the sub-html content (ex : title/ description) has been appended into the slide.\n * @name lgAfterAppendSubHtml\n * @method onAfterAppendSubHtml\n */\nexport interface AfterAppendSubHtmlDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired when the lightGallery container has been resized.\n * @name lgContainerResize\n * @method onContainerResize\n */\nexport interface ContainerResizeDetail {\n    /**\n     * Index of the slide\n     */\n    index: number;\n}\n\n/**\n * Fired when lightGallery detects video slide\n * @name lgHasVideo\n * @method onHasVideo\n */\nexport interface HasVideoDetail {\n    /**\n     * Index of the slide,\n     */\n    index: number;\n    /**\n     * Video source\n     */\n    src: string;\n    /**\n     * HTML5 video source if available\n     * <p>\n       HTML5 video source = source: {\n            src: string;\n            type: string;\n        }[];\n        attributes: HTMLVideoElement;\n     * </p>\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            ? `<button id=\"${this.core.getIdName(\n                  'lg-zoom-in',\n              )}\" type=\"button\" aria-label=\"${\n                  this.settings.zoomPluginStrings['zoomIn']\n              }\" class=\"lg-zoom-in lg-icon\"></button><button id=\"${this.core.getIdName(\n                  'lg-zoom-out',\n              )}\" type=\"button\" aria-label=\"${\n                  this.settings.zoomPluginStrings['zoomIn']\n              }\" class=\"lg-zoom-out lg-icon\"></button>`\n            : '';\n\n        if (this.settings.actualSize) {\n            zoomIcons += `<button id=\"${this.core.getIdName(\n                'lg-actual-size',\n            )}\" type=\"button\" aria-label=\"${\n                this.settings.zoomPluginStrings['viewActualSize']\n            }\" class=\"${\n                this.settings.actualSizeIcons.zoomIn\n            } lg-icon\"></button>`;\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<typeof setTimeout> | null = null;\n\n        this.core.outer.on('dblclick.lg', (event) => {\n            if (!this.$LG(event.target).hasClass('lg-image')) {\n                return;\n            }\n            this.setActualSize(this.core.index, event);\n        });\n\n        this.core.outer.on('touchstart.lg', (event) => {\n            const $target = this.$LG(event.target);\n            if (event.touches.length === 1 && $target.hasClass('lg-image')) {\n                if (!tapped) {\n                    tapped = setTimeout(() => {\n                        tapped = null;\n                    }, 300);\n                } else {\n                    clearTimeout(tapped);\n                    tapped = null;\n                    event.preventDefault();\n                    this.setActualSize(this.core.index, event);\n                }\n            }\n        });\n\n        this.core.LGel.on(\n            `${lGEvents.containerResize}.zoom ${lGEvents.rotateRight}.zoom ${lGEvents.rotateLeft}.zoom ${lGEvents.flipHorizontal}.zoom ${lGEvents.flipVertical}.zoom`,\n            () => {\n                if (\n                    !this.core.lgOpened ||\n                    !this.isImageSlide(this.core.index) ||\n                    this.core.touchAction\n                ) {\n                    return;\n                }\n                const _LGel = this.core\n                    .getSlideItem(this.core.index)\n                    .find('.lg-img-wrap')\n                    .first();\n                this.top = 0;\n                this.left = 0;\n                this.setZoomEssentials();\n                this.setZoomSwipeStyles(_LGel, { x: 0, y: 0 });\n                this.positionChanged = true;\n            },\n        );\n        // Update zoom on resize and orientationchange\n        this.$LG(window).on(`scroll.lg.zoom.global${this.core.lgId}`, () => {\n            if (!this.core.lgOpened) return;\n            this.scrollTop = this.$LG(window).scrollTop();\n        });\n\n        this.core.getElementById('lg-zoom-out').on('click.lg', () => {\n            // Allow zoom only on image\n            if (!this.isImageSlide(this.core.index)) {\n                return;\n            }\n\n            let timeout = 0;\n            if (this.imageReset) {\n                this.resetImageTranslate(this.core.index);\n                timeout = 50;\n            }\n            setTimeout(() => {\n                let scale = this.scale - this.settings.scale;\n\n                if (scale < 1) {\n                    scale = 1;\n                }\n                this.beginZoom(scale);\n                this.zoomImage(scale, -this.settings.scale, true, true);\n            }, timeout);\n        });\n\n        this.core.getElementById('lg-zoom-in').on('click.lg', () => {\n            this.zoomIn();\n        });\n\n        this.core.getElementById('lg-actual-size').on('click.lg', () => {\n            this.setActualSize(this.core.index);\n        });\n\n        this.core.LGel.on(`${lGEvents.beforeOpen}.zoom`, () => {\n            this.core.outer.find('.lg-item').removeClass('lg-zoomable');\n        });\n        this.core.LGel.on(`${lGEvents.afterOpen}.zoom`, () => {\n            this.scrollTop = this.$LG(window).scrollTop();\n\n            // Set the initial value center\n            this.pageX = this.core.outer.width() / 2;\n            this.pageY = this.core.outer.height() / 2 + this.scrollTop;\n\n            this.scale = 1;\n        });\n\n        // Reset zoom on slide change\n        this.core.LGel.on(\n            `${lGEvents.afterSlide}.zoom`,\n            (event: CustomEvent) => {\n                const { prevIndex } = event.detail;\n                this.scale = 1;\n                this.positionChanged = false;\n                this.resetZoom(prevIndex);\n                this.resetImageTranslate(prevIndex);\n                if (this.isImageSlide(this.core.index)) {\n                    this.setZoomEssentials();\n                }\n            },\n        );\n\n        // Drag option after zoom\n        this.zoomDrag();\n\n        this.pinchZoom();\n\n        this.zoomSwipe();\n\n        // Store the zoomable timeout value just to clear it while closing\n        this.zoomableTimeout = false;\n        this.positionChanged = false;\n    }\n\n    zoomIn(): void {\n        // Allow zoom only on image\n        if (!this.isImageSlide(this.core.index)) {\n            return;\n        }\n\n        let scale = this.scale + this.settings.scale;\n\n        scale = this.getScale(scale);\n        this.beginZoom(scale);\n        this.zoomImage(\n            scale,\n            Math.min(this.settings.scale, scale - this.scale),\n            true,\n            true,\n        );\n    }\n\n    // Reset zoom effect\n    resetZoom(index?: number): void {\n        this.core.outer.removeClass('lg-zoomed lg-zoom-drag-transition');\n        const $actualSize = this.core.getElementById('lg-actual-size');\n        const $item = this.core.getSlideItem(\n            index !== undefined ? index : this.core.index,\n        );\n        $actualSize\n            .removeClass(this.settings.actualSizeIcons.zoomOut)\n            .addClass(this.settings.actualSizeIcons.zoomIn);\n        $item.find('.lg-img-wrap').first().removeAttr('style');\n        $item.find('.lg-image').first().removeAttr('style');\n        this.scale = 1;\n        this.left = 0;\n        this.top = 0;\n\n        // Reset pagx pagy values to center\n        this.setPageCords();\n    }\n\n    getTouchDistance(e: TouchEvent): number {\n        return Math.sqrt(\n            (e.touches[0].pageX - e.touches[1].pageX) *\n                (e.touches[0].pageX - e.touches[1].pageX) +\n                (e.touches[0].pageY - e.touches[1].pageY) *\n                    (e.touches[0].pageY - e.touches[1].pageY),\n        );\n    }\n\n    pinchZoom(): void {\n        let startDist = 0;\n        let pinchStarted = false;\n        let initScale = 1;\n        let prevScale = 0;\n\n        let $item = this.core.getSlideItem(this.core.index);\n\n        this.core.outer.on('touchstart.lg', (e) => {\n            $item = this.core.getSlideItem(this.core.index);\n            if (!this.isImageSlide(this.core.index)) {\n                return;\n            }\n            if (e.touches.length === 2) {\n                e.preventDefault();\n                if (this.core.outer.hasClass('lg-first-slide-loading')) {\n                    return;\n                }\n                initScale = this.scale || 1;\n                this.core.outer.removeClass(\n                    'lg-zoom-drag-transition lg-zoom-dragging',\n                );\n\n                this.setPageCords(e);\n                this.resetImageTranslate(this.core.index);\n\n                this.core.touchAction = 'pinch';\n\n                startDist = this.getTouchDistance(e);\n            }\n        });\n\n        this.core.$inner.on('touchmove.lg', (e) => {\n            if (\n                e.touches.length === 2 &&\n                this.core.touchAction === 'pinch' &&\n                (this.$LG(e.target).hasClass('lg-item') ||\n                    $item.get().contains(e.target))\n            ) {\n                e.preventDefault();\n                const endDist = this.getTouchDistance(e);\n\n                const distance = startDist - endDist;\n                if (!pinchStarted && Math.abs(distance) > 5) {\n                    pinchStarted = true;\n                }\n                if (pinchStarted) {\n                    prevScale = this.scale;\n                    const _scale = Math.max(1, initScale + -distance * 0.02);\n                    this.scale =\n                        Math.round((_scale + Number.EPSILON) * 100) / 100;\n                    const diff = this.scale - prevScale;\n                    this.zoomImage(\n                        this.scale,\n                        Math.round((diff + Number.EPSILON) * 100) / 100,\n                        false,\n                        false,\n                    );\n                }\n            }\n        });\n\n        this.core.$inner.on('touchend.lg', (e) => {\n            if (\n                this.core.touchAction === 'pinch' &&\n                (this.$LG(e.target).hasClass('lg-item') ||\n                    $item.get().contains(e.target))\n            ) {\n                pinchStarted = false;\n                startDist = 0;\n                if (this.scale <= 1) {\n                    this.resetZoom();\n                } else {\n                    const actualSizeScale = this.getCurrentImageActualSizeScale();\n\n                    if (this.scale >= actualSizeScale) {\n                        let scaleDiff = actualSizeScale - this.scale;\n                        if (scaleDiff === 0) {\n                            scaleDiff = 0.01;\n                        }\n                        this.zoomImage(actualSizeScale, scaleDiff, false, true);\n                    }\n                    this.manageActualPixelClassNames();\n\n                    this.core.outer.addClass('lg-zoomed');\n                }\n                this.core.touchAction = undefined;\n            }\n        });\n    }\n\n    touchendZoom(\n        startCoords: Coords,\n        endCoords: Coords,\n        allowX: boolean,\n        allowY: boolean,\n        touchDuration: number,\n    ): void {\n        let distanceXnew = endCoords.x - startCoords.x;\n        let distanceYnew = endCoords.y - startCoords.y;\n\n        let speedX = Math.abs(distanceXnew) / touchDuration + 1;\n        let speedY = Math.abs(distanceYnew) / touchDuration + 1;\n\n        if (speedX > 2) {\n            speedX += 1;\n        }\n\n        if (speedY > 2) {\n            speedY += 1;\n        }\n\n        distanceXnew = distanceXnew * speedX;\n        distanceYnew = distanceYnew * speedY;\n\n        const _LGel = this.core\n            .getSlideItem(this.core.index)\n            .find('.lg-img-wrap')\n            .first();\n        const distance: Coords = {} as Coords;\n\n        distance.x = this.left + distanceXnew;\n        distance.y = this.top + distanceYnew;\n\n        const possibleSwipeCords = this.getPossibleSwipeDragCords();\n\n        if (Math.abs(distanceXnew) > 15 || Math.abs(distanceYnew) > 15) {\n            if (allowY) {\n                if (\n                    this.isBeyondPossibleTop(\n                        distance.y,\n                        possibleSwipeCords.minY,\n                    )\n                ) {\n                    distance.y = possibleSwipeCords.minY;\n                } else if (\n                    this.isBeyondPossibleBottom(\n                        distance.y,\n                        possibleSwipeCords.maxY,\n                    )\n                ) {\n                    distance.y = possibleSwipeCords.maxY;\n                }\n            }\n\n            if (allowX) {\n                if (\n                    this.isBeyondPossibleLeft(\n                        distance.x,\n                        possibleSwipeCords.minX,\n                    )\n                ) {\n                    distance.x = possibleSwipeCords.minX;\n                } else if (\n                    this.isBeyondPossibleRight(\n                        distance.x,\n                        possibleSwipeCords.maxX,\n                    )\n                ) {\n                    distance.x = possibleSwipeCords.maxX;\n                }\n            }\n\n            if (allowY) {\n                this.top = distance.y;\n            } else {\n                distance.y = this.top;\n            }\n\n            if (allowX) {\n                this.left = distance.x;\n            } else {\n                distance.x = this.left;\n            }\n\n            this.setZoomSwipeStyles(_LGel, distance);\n\n            this.positionChanged = true;\n        }\n    }\n\n    getZoomSwipeCords(\n        startCoords: Coords,\n        endCoords: Coords,\n        allowX: boolean,\n        allowY: boolean,\n        possibleSwipeCords: PossibleCords,\n    ): Coords {\n        const distance: Coords = {} as Coords;\n        if (allowY) {\n            distance.y = this.top + (endCoords.y - startCoords.y);\n            if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) {\n                const diffMinY = possibleSwipeCords.minY - distance.y;\n                distance.y = possibleSwipeCords.minY - diffMinY / 6;\n            } else if (\n                this.isBeyondPossibleBottom(distance.y, possibleSwipeCords.maxY)\n            ) {\n                const diffMaxY = distance.y - possibleSwipeCords.maxY;\n                distance.y = possibleSwipeCords.maxY + diffMaxY / 6;\n            }\n        } else {\n            distance.y = this.top;\n        }\n\n        if (allowX) {\n            distance.x = this.left + (endCoords.x - startCoords.x);\n            if (\n                this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)\n            ) {\n                const diffMinX = possibleSwipeCords.minX - distance.x;\n                distance.x = possibleSwipeCords.minX - diffMinX / 6;\n            } else if (\n                this.isBeyondPossibleRight(distance.x, possibleSwipeCords.maxX)\n            ) {\n                const difMaxX = distance.x - possibleSwipeCords.maxX;\n                distance.x = possibleSwipeCords.maxX + difMaxX / 6;\n            }\n        } else {\n            distance.x = this.left;\n        }\n\n        return distance;\n    }\n\n    private isBeyondPossibleLeft(x: number, minX: number) {\n        return x >= minX;\n    }\n    private isBeyondPossibleRight(x: number, maxX: number) {\n        return x <= maxX;\n    }\n    private isBeyondPossibleTop(y: number, minY: number) {\n        return y >= minY;\n    }\n    private isBeyondPossibleBottom(y: number, maxY: number) {\n        return y <= maxY;\n    }\n\n    isImageSlide(index: number): boolean {\n        const currentItem = this.core.galleryItems[index];\n        return this.core.getSlideType(currentItem) === 'image';\n    }\n\n    getPossibleSwipeDragCords(scale?: number): PossibleCords {\n        const $image = this.core\n            .getSlideItem(this.core.index)\n            .find('.lg-image')\n            .first();\n\n        const { bottom } = this.core.mediaContainerPosition;\n\n        const imgRect = $image.get().getBoundingClientRect();\n\n        let imageHeight = imgRect.height;\n        let imageWidth = imgRect.width;\n\n        if (scale) {\n            imageHeight = imageHeight + scale * imageHeight;\n            imageWidth = imageWidth + scale * imageWidth;\n        }\n\n        const minY = (imageHeight - this.containerRect.height) / 2;\n        const maxY = (this.containerRect.height - imageHeight) / 2 + bottom;\n\n        const minX = (imageWidth - this.containerRect.width) / 2;\n\n        const maxX = (this.containerRect.width - imageWidth) / 2;\n\n        const possibleSwipeCords = {\n            minY: minY,\n            maxY: maxY,\n            minX: minX,\n            maxX: maxX,\n        };\n        return possibleSwipeCords;\n    }\n\n    setZoomSwipeStyles(\n        LGel: lgQuery,\n        distance: { x: number; y: number },\n    ): void {\n        LGel.css(\n            'transform',\n            'translate3d(' + distance.x + 'px, ' + distance.y + 'px, 0)',\n        );\n    }\n\n    zoomSwipe(): void {\n        let startCoords = {} as Coords;\n        let endCoords = {} as Coords;\n        let isMoved = false;\n\n        // Allow x direction drag\n        let allowX = false;\n\n        // Allow Y direction drag\n        let allowY = false;\n\n        let startTime: Date = new Date();\n        let endTime: Date = new Date();\n        let possibleSwipeCords: PossibleCords;\n\n        let _LGel: lgQuery;\n\n        let $item = this.core.getSlideItem(this.core.index);\n\n        this.core.$inner.on('touchstart.lg', (e) => {\n            // Allow zoom only on image\n            if (!this.isImageSlide(this.core.index)) {\n                return;\n            }\n            $item = this.core.getSlideItem(this.core.index);\n            if (\n                (this.$LG(e.target).hasClass('lg-item') ||\n                    $item.get().contains(e.target)) &&\n                e.touches.length === 1 &&\n                this.core.outer.hasClass('lg-zoomed')\n            ) {\n                e.preventDefault();\n                startTime = new Date();\n                this.core.touchAction = 'zoomSwipe';\n                _LGel = this.core\n                    .getSlideItem(this.core.index)\n                    .find('.lg-img-wrap')\n                    .first();\n\n                const dragAllowedAxises = this.getDragAllowedAxises(0);\n\n                allowY = dragAllowedAxises.allowY;\n                allowX = dragAllowedAxises.allowX;\n                if (allowX || allowY) {\n                    startCoords = this.getSwipeCords(e);\n                }\n\n                possibleSwipeCords = this.getPossibleSwipeDragCords();\n\n                // reset opacity and transition duration\n                this.core.outer.addClass(\n                    'lg-zoom-dragging lg-zoom-drag-transition',\n                );\n            }\n        });\n\n        this.core.$inner.on('touchmove.lg', (e) => {\n            if (\n                e.touches.length === 1 &&\n                this.core.touchAction === 'zoomSwipe' &&\n                (this.$LG(e.target).hasClass('lg-item') ||\n                    $item.get().contains(e.target))\n            ) {\n                e.preventDefault();\n                this.core.touchAction = 'zoomSwipe';\n\n                endCoords = this.getSwipeCords(e);\n\n                const distance = this.getZoomSwipeCords(\n                    startCoords,\n                    endCoords,\n                    allowX,\n                    allowY,\n                    possibleSwipeCords,\n                );\n\n                if (\n                    Math.abs(endCoords.x - startCoords.x) > 15 ||\n                    Math.abs(endCoords.y - startCoords.y) > 15\n                ) {\n                    isMoved = true;\n                    this.setZoomSwipeStyles(_LGel, distance);\n                }\n            }\n        });\n\n        this.core.$inner.on('touchend.lg', (e) => {\n            if (\n                this.core.touchAction === 'zoomSwipe' &&\n                (this.$LG(e.target).hasClass('lg-item') ||\n                    $item.get().contains(e.target))\n            ) {\n                e.preventDefault();\n                this.core.touchAction = undefined;\n                this.core.outer.removeClass('lg-zoom-dragging');\n                if (!isMoved) {\n                    return;\n                }\n                isMoved = false;\n                endTime = new Date();\n                const touchDuration = endTime.valueOf() - startTime.valueOf();\n                this.touchendZoom(\n                    startCoords,\n                    endCoords,\n                    allowX,\n                    allowY,\n                    touchDuration,\n                );\n            }\n        });\n    }\n\n    zoomDrag(): void {\n        let startCoords: Coords = {} as Coords;\n        let endCoords: Coords = {} as Coords;\n        let isDragging = false;\n        let isMoved = false;\n\n        // Allow x direction drag\n        let allowX = false;\n\n        // Allow Y direction drag\n        let allowY = false;\n\n        let startTime: number | Date;\n        let endTime;\n\n        let possibleSwipeCords: PossibleCords;\n\n        let _LGel: lgQuery;\n\n        this.core.outer.on('mousedown.lg.zoom', (e) => {\n            // Allow zoom only on image\n            if (!this.isImageSlide(this.core.index)) {\n                return;\n            }\n            const $item = this.core.getSlideItem(this.core.index);\n            if (\n                this.$LG(e.target).hasClass('lg-item') ||\n                $item.get().contains(e.target)\n            ) {\n                startTime = new Date();\n                _LGel = this.core\n                    .getSlideItem(this.core.index)\n                    .find('.lg-img-wrap')\n                    .first();\n\n                const dragAllowedAxises = this.getDragAllowedAxises(0);\n\n                allowY = dragAllowedAxises.allowY;\n                allowX = dragAllowedAxises.allowX;\n\n                if (this.core.outer.hasClass('lg-zoomed')) {\n                    if (\n                        this.$LG(e.target).hasClass('lg-object') &&\n                        (allowX || allowY)\n                    ) {\n                        e.preventDefault();\n                        startCoords = this.getDragCords(e);\n\n                        possibleSwipeCords = this.getPossibleSwipeDragCords();\n\n                        isDragging = true;\n\n                        this.core.outer\n                            .removeClass('lg-grab')\n                            .addClass(\n                                'lg-grabbing lg-zoom-drag-transition lg-zoom-dragging',\n                            );\n                        // reset opacity and transition duration\n                    }\n                }\n            }\n        });\n\n        this.$LG(window).on(\n            `mousemove.lg.zoom.global${this.core.lgId}`,\n            (e) => {\n                if (isDragging) {\n                    isMoved = true;\n                    endCoords = this.getDragCords(e);\n\n                    const distance = this.getZoomSwipeCords(\n                        startCoords,\n                        endCoords,\n                        allowX,\n                        allowY,\n                        possibleSwipeCords,\n                    );\n\n                    this.setZoomSwipeStyles(_LGel, distance);\n                }\n            },\n        );\n\n        this.$LG(window).on(`mouseup.lg.zoom.global${this.core.lgId}`, (e) => {\n            if (isDragging) {\n                endTime = new Date();\n                isDragging = false;\n                this.core.outer.removeClass('lg-zoom-dragging');\n\n                // Fix for chrome mouse move on click\n                if (\n                    isMoved &&\n                    (startCoords.x !== endCoords.x ||\n                        startCoords.y !== endCoords.y)\n                ) {\n                    endCoords = this.getDragCords(e);\n\n                    const touchDuration =\n                        endTime.valueOf() - startTime.valueOf();\n                    this.touchendZoom(\n                        startCoords,\n                        endCoords,\n                        allowX,\n                        allowY,\n                        touchDuration,\n                    );\n                }\n\n                isMoved = false;\n            }