Image 1 descriptions.
',\r\n * },\r\n * ...\r\n * ],\r\n * });\r\n * $dynamicGallery.addEventListener('click', function () {\r\n * // Starts with third item.(Optional).\r\n * // This is useful if you want use dynamic mode with\r\n * // custom thumbnails (thumbnails outside gallery),\r\n * dynamicGallery.openGallery(2);\r\n * });\r\n *\r\n */\r\n LightGallery.prototype.openGallery = function (index, element) {\r\n var _this = this;\r\n if (index === void 0) { index = this.settings.index; }\r\n // prevent accidental double execution\r\n if (this.lgOpened)\r\n return;\r\n this.lgOpened = true;\r\n this.outer.get().focus();\r\n this.outer.removeClass('lg-hide-items');\r\n // Add display block, but still has opacity 0\r\n this.$container.addClass('lg-show');\r\n var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index);\r\n this.currentItemsInDom = itemsToBeInsertedToDom;\r\n var items = '';\r\n itemsToBeInsertedToDom.forEach(function (item) {\r\n items = items + (\"\");\r\n });\r\n this.$inner.append(items);\r\n this.addHtml(index);\r\n var transform = '';\r\n this.mediaContainerPosition = this.getMediaContainerPosition();\r\n var _a = this.mediaContainerPosition, top = _a.top, bottom = _a.bottom;\r\n if (!this.settings.allowMediaOverlap) {\r\n this.setMediaContainerPosition(top, bottom);\r\n }\r\n var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;\r\n if (this.zoomFromOrigin && element) {\r\n this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);\r\n transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize);\r\n }\r\n if (!this.zoomFromOrigin || !transform) {\r\n this.outer.addClass(this.settings.startClass);\r\n this.getSlideItem(index).removeClass('lg-complete');\r\n }\r\n var timeout = this.settings.zoomFromOrigin\r\n ? 100\r\n : this.settings.backdropDuration;\r\n setTimeout(function () {\r\n _this.outer.addClass('lg-components-open');\r\n }, timeout);\r\n this.index = index;\r\n this.LGel.trigger(lGEvents.beforeOpen);\r\n // add class lg-current to remove initial transition\r\n this.getSlideItem(index).addClass('lg-current');\r\n this.lGalleryOn = false;\r\n // Store the current scroll top value to scroll back after closing the gallery..\r\n this.prevScrollTop = $LG(window).scrollTop();\r\n setTimeout(function () {\r\n // Need to check both zoomFromOrigin and transform values as we need to set set the\r\n // default opening animation if user missed to add the lg-size attribute\r\n if (_this.zoomFromOrigin && transform) {\r\n var currentSlide_1 = _this.getSlideItem(index);\r\n currentSlide_1.css('transform', transform);\r\n setTimeout(function () {\r\n currentSlide_1\r\n .addClass('lg-start-progress lg-start-end-progress')\r\n .css('transition-duration', _this.settings.startAnimationDuration + 'ms');\r\n _this.outer.addClass('lg-zoom-from-image');\r\n });\r\n setTimeout(function () {\r\n currentSlide_1.css('transform', 'translate3d(0, 0, 0)');\r\n }, 100);\r\n }\r\n setTimeout(function () {\r\n _this.$backdrop.addClass('in');\r\n _this.$container.addClass('lg-show-in');\r\n }, 10);\r\n // lg-visible class resets gallery opacity to 1\r\n if (!_this.zoomFromOrigin || !transform) {\r\n setTimeout(function () {\r\n _this.outer.addClass('lg-visible');\r\n }, _this.settings.backdropDuration);\r\n }\r\n // initiate slide function\r\n _this.slide(index, false, false, false);\r\n _this.LGel.trigger(lGEvents.afterOpen);\r\n });\r\n if (document.body === this.settings.container) {\r\n $LG('html').addClass('lg-on');\r\n }\r\n };\r\n /**\r\n * Note - Changing the position of the media on every slide transition creates a flickering effect.\r\n * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption.\r\n * if you have dynamic captions for each media,\r\n * you can provide an appropriate height for the captions via allowMediaOverlap option\r\n */\r\n LightGallery.prototype.getMediaContainerPosition = function () {\r\n if (this.settings.allowMediaOverlap) {\r\n return {\r\n top: 0,\r\n bottom: 0,\r\n };\r\n }\r\n var top = this.$toolbar.get().clientHeight || 0;\r\n var subHtml = this.outer.find('.lg-components .lg-sub-html').get();\r\n var captionHeight = this.settings.defaultCaptionHeight ||\r\n (subHtml && subHtml.clientHeight) ||\r\n 0;\r\n var thumbContainer = this.outer.find('.lg-thumb-outer').get();\r\n var thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0;\r\n var bottom = thumbHeight + captionHeight;\r\n return {\r\n top: top,\r\n bottom: bottom,\r\n };\r\n };\r\n LightGallery.prototype.setMediaContainerPosition = function (top, bottom) {\r\n if (top === void 0) { top = 0; }\r\n if (bottom === void 0) { bottom = 0; }\r\n this.$content.css('top', top + 'px').css('bottom', bottom + 'px');\r\n };\r\n LightGallery.prototype.hideBars = function () {\r\n var _this = this;\r\n // Hide controllers if mouse doesn't move for some period\r\n setTimeout(function () {\r\n _this.outer.removeClass('lg-hide-items');\r\n if (_this.settings.hideBarsDelay > 0) {\r\n _this.outer.on('mousemove.lg click.lg touchstart.lg', function () {\r\n _this.outer.removeClass('lg-hide-items');\r\n clearTimeout(_this.hideBarTimeout);\r\n // Timeout will be cleared on each slide movement also\r\n _this.hideBarTimeout = setTimeout(function () {\r\n _this.outer.addClass('lg-hide-items');\r\n }, _this.settings.hideBarsDelay);\r\n });\r\n _this.outer.trigger('mousemove.lg');\r\n }\r\n }, this.settings.showBarsAfter);\r\n };\r\n LightGallery.prototype.initPictureFill = function ($img) {\r\n if (this.settings.supportLegacyBrowser) {\r\n try {\r\n picturefill({\r\n elements: [$img.get()],\r\n });\r\n }\r\n catch (e) {\r\n console.warn('lightGallery :- If you want srcset or picture tag to be supported for older browser please include picturefil javascript library in your document.');\r\n }\r\n }\r\n };\r\n /**\r\n * @desc Create image counter\r\n * Ex: 1/10\r\n */\r\n LightGallery.prototype.counter = function () {\r\n if (this.settings.counter) {\r\n var counterHtml = \"