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 */\n\n\n LightGallery.prototype.openGallery = function (index, element) {\n var _this = this;\n\n if (index === void 0) {\n index = this.settings.index;\n } // prevent accidental double execution\n\n\n if (this.lgOpened) return;\n this.lgOpened = true;\n this.outer.removeClass('lg-hide-items');\n this.hideScrollbar(); // Add display block, but still has opacity 0\n\n this.$container.addClass('lg-show');\n var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index);\n this.currentItemsInDom = itemsToBeInsertedToDom;\n var items = '';\n itemsToBeInsertedToDom.forEach(function (item) {\n items = items + (\"\");\n });\n this.$inner.append(items);\n this.addHtml(index);\n var transform = '';\n this.mediaContainerPosition = this.getMediaContainerPosition();\n var _a = this.mediaContainerPosition,\n top = _a.top,\n bottom = _a.bottom;\n\n if (!this.settings.allowMediaOverlap) {\n this.setMediaContainerPosition(top, bottom);\n }\n\n var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;\n\n if (this.zoomFromOrigin && element) {\n this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);\n transform = utils.getTransform(element, this.outer, top, bottom, 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\n var timeout = this.settings.zoomFromOrigin ? 100 : this.settings.backdropDuration;\n setTimeout(function () {\n _this.outer.addClass('lg-components-open');\n }, timeout);\n this.index = index;\n this.LGel.trigger(lGEvents.beforeOpen); // add class lg-current to remove initial transition\n\n this.getSlideItem(index).addClass('lg-current');\n this.lGalleryOn = false; // Store the current scroll top value to scroll back after closing the gallery..\n\n this.prevScrollTop = $LG(window).scrollTop();\n setTimeout(function () {\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 if (_this.zoomFromOrigin && transform) {\n var currentSlide_1 = _this.getSlideItem(index);\n\n currentSlide_1.css('transform', transform);\n setTimeout(function () {\n currentSlide_1.addClass('lg-start-progress lg-start-end-progress').css('transition-duration', _this.settings.startAnimationDuration + 'ms');\n\n _this.outer.addClass('lg-zoom-from-image');\n });\n setTimeout(function () {\n currentSlide_1.css('transform', 'translate3d(0, 0, 0)');\n }, 100);\n }\n\n setTimeout(function () {\n _this.$backdrop.addClass('in');\n\n _this.$container.addClass('lg-show-in');\n }, 10);\n setTimeout(function () {\n if (_this.settings.trapFocus && document.body === _this.settings.container) {\n _this.trapFocus();\n }\n }, _this.settings.backdropDuration + 50); // lg-visible class resets gallery opacity to 1\n\n if (!_this.zoomFromOrigin || !transform) {\n setTimeout(function () {\n _this.outer.addClass('lg-visible');\n }, _this.settings.backdropDuration);\n } // initiate slide function\n\n\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 /**\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 */\n\n\n LightGallery.prototype.getMediaContainerPosition = function () {\n if (this.settings.allowMediaOverlap) {\n return {\n top: 0,\n bottom: 0\n };\n }\n\n var top = this.$toolbar.get().clientHeight || 0;\n var subHtml = this.outer.find('.lg-components .lg-sub-html').get();\n var captionHeight = this.settings.defaultCaptionHeight || subHtml && subHtml.clientHeight || 0;\n var thumbContainer = this.outer.find('.lg-thumb-outer').get();\n var thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0;\n var bottom = thumbHeight + captionHeight;\n return {\n top: top,\n bottom: bottom\n };\n };\n\n LightGallery.prototype.setMediaContainerPosition = function (top, bottom) {\n if (top === void 0) {\n top = 0;\n }\n\n if (bottom === void 0) {\n bottom = 0;\n }\n\n this.$content.css('top', top + 'px').css('bottom', bottom + 'px');\n };\n\n LightGallery.prototype.hideBars = function () {\n var _this = this; // Hide controllers if mouse doesn't move for some period\n\n\n setTimeout(function () {\n _this.outer.removeClass('lg-hide-items');\n\n if (_this.settings.hideBarsDelay > 0) {\n _this.outer.on('mousemove.lg click.lg touchstart.lg', function () {\n _this.outer.removeClass('lg-hide-items');\n\n clearTimeout(_this.hideBarTimeout); // Timeout will be cleared on each slide movement also\n\n _this.hideBarTimeout = setTimeout(function () {\n _this.outer.addClass('lg-hide-items');\n }, _this.settings.hideBarsDelay);\n });\n\n _this.outer.trigger('mousemove.lg');\n }\n }, this.settings.showBarsAfter);\n };\n\n LightGallery.prototype.initPictureFill = function ($img) {\n if (this.settings.supportLegacyBrowser) {\n try {\n picturefill({\n elements: [$img.get()]\n });\n } catch (e) {\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.');\n }\n }\n };\n /**\r\n * @desc Create image counter\r\n * Ex: 1/10\r\n */\n\n\n LightGallery.prototype.counter = function () {\n if (this.settings.counter) {\n var counterHtml = \"