Undo removal of res directory

res/css/lg-autoplay.css

@@ -0,0 +1,42 @@
+.lg-progress-bar {
+  background-color: #333;
+  height: 5px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1083;
+  opacity: 0;
+  will-change: opacity;
+  -webkit-transition: opacity 0.08s ease 0s;
+  -moz-transition: opacity 0.08s ease 0s;
+  -o-transition: opacity 0.08s ease 0s;
+  transition: opacity 0.08s ease 0s;
+}
+
+.lg-progress-bar .lg-progress {
+  background-color: #a90707;
+  height: 5px;
+  width: 0;
+}
+
+.lg-progress-bar.lg-start .lg-progress {
+  width: 100%;
+}
+
+.lg-show-autoplay .lg-progress-bar {
+  opacity: 1;
+}
+
+.lg-autoplay-button:after {
+  content: '\e01d';
+}
+
+.lg-show-autoplay .lg-autoplay-button:after {
+  content: '\e01a';
+}
+
+.lg-single-item .lg-autoplay-button {
+  opacity: 0.75;
+  pointer-events: none;
+}

res/css/lg-comments.css

@@ -0,0 +1,132 @@
+.lg-comment-box {
+  width: 420px;
+  max-width: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: #fff;
+  will-change: transform;
+  -moz-transform: translate3d(100%, 0, 0);
+  -o-transform: translate3d(100%, 0, 0);
+  -ms-transform: translate3d(100%, 0, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-comment-box .lg-comment-title {
+  margin: 0;
+  color: #fff;
+  font-size: 18px;
+}
+
+.lg-comment-box .lg-comment-header {
+  background-color: #000;
+  padding: 12px 20px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.lg-comment-box .lg-comment-body {
+  height: 100% !important;
+  padding-top: 43px !important;
+  width: 100% !important;
+}
+
+.lg-comment-box .fb-comments {
+  height: 100%;
+  width: 100%;
+  background: url("../images/loading.gif") no-repeat scroll center center #fff;
+  overflow-y: auto;
+  display: inline-block;
+}
+
+.lg-comment-box .fb-comments[fb-xfbml-state='rendered'] {
+  background-image: none;
+}
+
+.lg-comment-box .fb-comments > span {
+  max-width: 100%;
+}
+
+.lg-comment-box .lg-comment-close {
+  position: absolute;
+  right: 5px;
+  top: 12px;
+  cursor: pointer;
+  font-size: 20px;
+  color: #999;
+  will-change: color;
+  -webkit-transition: color 0.2s linear;
+  -o-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+}
+
+.lg-comment-box .lg-comment-close:hover {
+  color: #fff;
+}
+
+.lg-comment-box .lg-comment-close:after {
+  content: '\e070';
+}
+
+.lg-comment-box iframe {
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+.lg-comment-box #disqus_thread {
+  padding: 0 20px;
+}
+
+.lg-outer .lg-comment-overlay {
+  background-color: rgba(0, 0, 0, 0.25);
+  bottom: 0;
+  cursor: default;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1081;
+  opacity: 0;
+  visibility: hidden;
+  will-change: visibility, opacity;
+  -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+}
+
+.lg-outer .lg-comment-toggle:after {
+  content: '\e908';
+}
+
+.lg-outer.lg-comment-active .lg-comment-overlay {
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+  -moz-transform: translate3d(0, 0px, 0);
+  -o-transform: translate3d(0, 0px, 0);
+  -ms-transform: translate3d(0, 0px, 0);
+  -webkit-transform: translate3d(0, 0px, 0);
+  transform: translate3d(0, 0px, 0);
+  opacity: 1;
+  visibility: visible;
+}
+
+.lg-outer.lg-comment-active .lg-comment-toggle {
+  color: #fff;
+}
+
+.lg-outer.lg-comment-active .lg-comment-box {
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}

res/css/lg-fullscreen.css

@@ -0,0 +1,7 @@
+.lg-fullscreen:after {
+  content: "\e20c";
+}
+
+.lg-fullscreen-on .lg-fullscreen:after {
+  content: "\e20d";
+}

res/css/lg-medium-zoom.css

@@ -0,0 +1,15 @@
+.lg-medium-zoom-item {
+  cursor: zoom-in;
+}
+
+.lg-medium-zoom .lg-outer {
+  cursor: zoom-out;
+}
+
+.lg-medium-zoom .lg-outer.lg-grab img.lg-object {
+  cursor: zoom-out;
+}
+
+.lg-medium-zoom .lg-outer.lg-grabbing img.lg-object {
+  cursor: zoom-out;
+}

res/css/lg-pager.css

@@ -0,0 +1,90 @@
+.lg-outer .lg-pager-outer {
+  text-align: center;
+  z-index: 1080;
+  height: 10px;
+  margin-bottom: 10px;
+}
+
+.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
+  overflow: visible;
+}
+
+.lg-outer.lg-single-item .lg-pager-outer {
+  display: none;
+}
+
+.lg-outer .lg-pager-cont {
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+  margin: 0 5px;
+}
+
+.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
+  box-shadow: 0 0 0 2px white inset;
+}
+
+.lg-outer .lg-pager-thumb-cont {
+  background-color: #fff;
+  color: #fff;
+  bottom: 100%;
+  height: 83px;
+  left: 0;
+  margin-bottom: 20px;
+  margin-left: -60px;
+  opacity: 0;
+  padding: 5px;
+  position: absolute;
+  width: 120px;
+  border-radius: 3px;
+  will-change: transform, opacity;
+  -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
+  -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
+  -webkit-transform: translate3d(0, 5px, 0);
+  transform: translate3d(0, 5px, 0);
+}
+
+.lg-outer .lg-pager-thumb-cont img {
+  width: 100%;
+  height: 100%;
+}
+
+.lg-outer .lg-pager {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
+  display: block;
+  height: 12px;
+  -webkit-transition: box-shadow 0.3s ease 0s;
+  -o-transition: box-shadow 0.3s ease 0s;
+  transition: box-shadow 0.3s ease 0s;
+  width: 12px;
+}
+
+.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
+  box-shadow: 0 0 0 8px white inset;
+}
+
+.lg-outer .lg-caret {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px dashed;
+  bottom: -10px;
+  display: inline-block;
+  height: 0;
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  vertical-align: middle;
+  width: 0;
+}

res/css/lg-relative-caption.css

@@ -0,0 +1,16 @@
+.lg-relative-caption .lg-outer .lg-sub-html {
+  white-space: normal;
+  bottom: auto;
+  padding: 0;
+  background-image: none;
+}
+
+.lg-relative-caption .lg-outer .lg-relative-caption-item {
+  opacity: 0;
+  padding: 16px 0;
+  transition: 0.5s opacity ease;
+}
+
+.lg-relative-caption .lg-outer .lg-show-caption .lg-relative-caption-item {
+  opacity: 1;
+}

res/css/lg-rotate.css

@@ -0,0 +1,42 @@
+.lg-outer .lg-img-rotate {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-outer[data-lg-slide-type='video'] .lg-rotate-left,
+.lg-outer[data-lg-slide-type='video'] .lg-rotate-right,
+.lg-outer[data-lg-slide-type='video'] .lg-flip-ver,
+.lg-outer[data-lg-slide-type='video'] .lg-flip-hor, .lg-outer[data-lg-slide-type='iframe'] .lg-rotate-left,
+.lg-outer[data-lg-slide-type='iframe'] .lg-rotate-right,
+.lg-outer[data-lg-slide-type='iframe'] .lg-flip-ver,
+.lg-outer[data-lg-slide-type='iframe'] .lg-flip-hor {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.lg-rotate-left:after {
+  content: '\e900';
+}
+
+.lg-rotate-right:after {
+  content: '\e901';
+}
+
+.lg-icon.lg-flip-hor, .lg-icon.lg-flip-ver {
+  font-size: 26px;
+}
+
+.lg-flip-ver:after {
+  content: '\e903';
+}
+
+.lg-flip-hor:after {
+  content: '\e902';
+}

res/css/lg-share.css

@@ -0,0 +1,143 @@
+.lg-outer .lg-dropdown-overlay {
+  background-color: rgba(0, 0, 0, 0.25);
+  bottom: 0;
+  cursor: default;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1081;
+  opacity: 0;
+  visibility: hidden;
+  will-change: visibility, opacity;
+  -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+}
+
+.lg-outer.lg-dropdown-active .lg-dropdown,
+.lg-outer.lg-dropdown-active .lg-dropdown-overlay {
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+  -moz-transform: translate3d(0, 0px, 0);
+  -o-transform: translate3d(0, 0px, 0);
+  -ms-transform: translate3d(0, 0px, 0);
+  -webkit-transform: translate3d(0, 0px, 0);
+  transform: translate3d(0, 0px, 0);
+  opacity: 1;
+  visibility: visible;
+}
+
+.lg-outer.lg-dropdown-active .lg-share {
+  color: #fff;
+}
+
+.lg-outer .lg-dropdown {
+  background-color: #fff;
+  border-radius: 2px;
+  font-size: 14px;
+  list-style-type: none;
+  margin: 0;
+  padding: 10px 0;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  top: 50px;
+  opacity: 0;
+  visibility: hidden;
+  -moz-transform: translate3d(0, 5px, 0);
+  -o-transform: translate3d(0, 5px, 0);
+  -ms-transform: translate3d(0, 5px, 0);
+  -webkit-transform: translate3d(0, 5px, 0);
+  transform: translate3d(0, 5px, 0);
+  will-change: visibility, opacity, transform;
+  -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+}
+
+.lg-outer .lg-dropdown:after {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  position: absolute;
+  border: 8px solid transparent;
+  border-bottom-color: #fff;
+  right: 16px;
+  top: -16px;
+}
+
+.lg-outer .lg-dropdown > li:last-child {
+  margin-bottom: 0px;
+}
+
+.lg-outer .lg-dropdown > li:hover a {
+  color: #333;
+}
+
+.lg-outer .lg-dropdown a {
+  color: #333;
+  display: block;
+  white-space: pre;
+  padding: 4px 12px;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+.lg-outer .lg-dropdown a:hover {
+  background-color: rgba(0, 0, 0, 0.07);
+}
+
+.lg-outer .lg-dropdown .lg-dropdown-text {
+  display: inline-block;
+  line-height: 1;
+  margin-top: -3px;
+  vertical-align: middle;
+}
+
+.lg-outer .lg-dropdown .lg-icon {
+  color: #333;
+  display: inline-block;
+  float: none;
+  font-size: 20px;
+  height: auto;
+  line-height: 1;
+  margin-right: 8px;
+  padding: 0;
+  vertical-align: middle;
+  width: auto;
+}
+
+.lg-outer .lg-share {
+  position: relative;
+}
+
+.lg-outer .lg-share:after {
+  content: '\e80d';
+}
+
+.lg-outer .lg-share-facebook .lg-icon {
+  color: #3b5998;
+}
+
+.lg-outer .lg-share-facebook .lg-icon:after {
+  content: '\e904';
+}
+
+.lg-outer .lg-share-twitter .lg-icon {
+  color: #00aced;
+}
+
+.lg-outer .lg-share-twitter .lg-icon:after {
+  content: '\e907';
+}
+
+.lg-outer .lg-share-pinterest .lg-icon {
+  color: #cb2027;
+}
+
+.lg-outer .lg-share-pinterest .lg-icon:after {
+  content: '\e906';
+}

res/css/lg-thumbnail.css

@@ -0,0 +1,108 @@
+.lg-outer .lg-thumb-outer {
+  background-color: #0d0a0a;
+  width: 100%;
+  max-height: 350px;
+  overflow: hidden;
+  float: left;
+}
+
+.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+
+.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}
+
+.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+.lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+.lg-outer .lg-thumb-outer.lg-thumb-align-middle {
+  text-align: center;
+}
+
+.lg-outer .lg-thumb-outer.lg-thumb-align-left {
+  text-align: left;
+}
+
+.lg-outer .lg-thumb-outer.lg-thumb-align-right {
+  text-align: right;
+}
+
+.lg-outer.lg-single-item .lg-thumb-outer {
+  display: none;
+}
+
+.lg-outer .lg-thumb {
+  padding: 5px 0;
+  height: 100%;
+  margin-bottom: -5px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@media (min-width: 768px) {
+  .lg-outer .lg-thumb {
+    padding: 10px 0;
+  }
+}
+
+.lg-outer .lg-thumb-item {
+  cursor: pointer;
+  float: left;
+  overflow: hidden;
+  height: 100%;
+  border-radius: 2px;
+  margin-bottom: 5px;
+  will-change: border-color;
+}
+
+@media (min-width: 768px) {
+  .lg-outer .lg-thumb-item {
+    border-radius: 4px;
+    border: 2px solid #fff;
+    -webkit-transition: border-color 0.25s ease;
+    -o-transition: border-color 0.25s ease;
+    transition: border-color 0.25s ease;
+  }
+}
+
+.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
+  border-color: #a90707;
+}
+
+.lg-outer .lg-thumb-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.lg-outer.lg-can-toggle .lg-item {
+  padding-bottom: 0;
+}
+
+.lg-outer .lg-toggle-thumb:after {
+  content: '\e1ff';
+}
+
+.lg-outer.lg-animate-thumb .lg-thumb {
+  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}

res/css/lg-transitions.css

@@ -0,0 +1,959 @@
+.lg-css3.lg-zoom-in .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-zoom-in .lg-item.lg-prev-slide {
+  -webkit-transform: scale3d(1.3, 1.3, 1.3);
+  transform: scale3d(1.3, 1.3, 1.3);
+}
+
+.lg-css3.lg-zoom-in .lg-item.lg-next-slide {
+  -webkit-transform: scale3d(1.3, 1.3, 1.3);
+  transform: scale3d(1.3, 1.3, 1.3);
+}
+
+.lg-css3.lg-zoom-in .lg-item.lg-current {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-css3.lg-zoom-in .lg-item.lg-prev-slide, .lg-css3.lg-zoom-in .lg-item.lg-next-slide, .lg-css3.lg-zoom-in .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-lollipop-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-lollipop-rev .lg-item.lg-prev-slide {
+  -moz-transform: translate3d(0, 0, 0) scale(0.5);
+  -o-transform: translate3d(0, 0, 0) scale(0.5);
+  -ms-transform: translate3d(0, 0, 0) scale(0.5);
+  -webkit-transform: translate3d(0, 0, 0) scale(0.5);
+  transform: translate3d(0, 0, 0) scale(0.5);
+}
+
+.lg-css3.lg-lollipop-rev .lg-item.lg-next-slide {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.lg-css3.lg-lollipop-rev .lg-item.lg-current {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-lollipop-rev .lg-item.lg-prev-slide, .lg-css3.lg-lollipop-rev .lg-item.lg-next-slide, .lg-css3.lg-lollipop-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-ver-cross .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-prev-slide {
+  -moz-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
+  -o-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
+  -ms-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
+  -webkit-transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
+  transform: skew(0deg, 20deg) translate3d(0, -100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-next-slide {
+  -moz-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
+  -o-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
+  -ms-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
+  -webkit-transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
+  transform: skew(0deg, 20deg) translate3d(0, 100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-ver-cross .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver-cross .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver-cross .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-lollipop .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-lollipop .lg-item.lg-prev-slide {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+
+.lg-css3.lg-lollipop .lg-item.lg-next-slide {
+  -moz-transform: translate3d(0, 0, 0) scale(0.5);
+  -o-transform: translate3d(0, 0, 0) scale(0.5);
+  -ms-transform: translate3d(0, 0, 0) scale(0.5);
+  -webkit-transform: translate3d(0, 0, 0) scale(0.5);
+  transform: translate3d(0, 0, 0) scale(0.5);
+}
+
+.lg-css3.lg-lollipop .lg-item.lg-current {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-lollipop .lg-item.lg-prev-slide, .lg-css3.lg-lollipop .lg-item.lg-next-slide, .lg-css3.lg-lollipop .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-ver-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-prev-slide {
+  -moz-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
+  -o-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
+  -ms-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
+  -webkit-transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
+  transform: skew(-60deg, 0deg) translate3d(0, -100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-next-slide {
+  -moz-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
+  -o-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
+  -ms-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
+  -webkit-transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
+  transform: skew(-60deg, 0deg) translate3d(0, 100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-ver-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-rotate-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-rotate-rev .lg-item.lg-prev-slide {
+  -moz-transform: rotate(360deg);
+  -o-transform: rotate(360deg);
+  -ms-transform: rotate(360deg);
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+}
+
+.lg-css3.lg-rotate-rev .lg-item.lg-next-slide {
+  -moz-transform: rotate(-360deg);
+  -o-transform: rotate(-360deg);
+  -ms-transform: rotate(-360deg);
+  -webkit-transform: rotate(-360deg);
+  transform: rotate(-360deg);
+}
+
+.lg-css3.lg-rotate-rev .lg-item.lg-current {
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+  opacity: 1;
+}
+
+.lg-css3.lg-rotate-rev .lg-item.lg-prev-slide, .lg-css3.lg-rotate-rev .lg-item.lg-next-slide, .lg-css3.lg-rotate-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-ver .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-ver .lg-item.lg-prev-slide {
+  -moz-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
+  -o-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
+  -ms-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
+  -webkit-transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
+  transform: skew(60deg, 0deg) translate3d(0, -100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver .lg-item.lg-next-slide {
+  -moz-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
+  -o-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
+  -ms-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
+  -webkit-transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
+  transform: skew(60deg, 0deg) translate3d(0, 100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-ver .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-rotate .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-rotate .lg-item.lg-prev-slide {
+  -moz-transform: rotate(-360deg);
+  -o-transform: rotate(-360deg);
+  -ms-transform: rotate(-360deg);
+  -webkit-transform: rotate(-360deg);
+  transform: rotate(-360deg);
+}
+
+.lg-css3.lg-rotate .lg-item.lg-next-slide {
+  -moz-transform: rotate(360deg);
+  -o-transform: rotate(360deg);
+  -ms-transform: rotate(360deg);
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+}
+
+.lg-css3.lg-rotate .lg-item.lg-current {
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+  opacity: 1;
+}
+
+.lg-css3.lg-rotate .lg-item.lg-prev-slide, .lg-css3.lg-rotate .lg-item.lg-next-slide, .lg-css3.lg-rotate .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew .lg-item.lg-prev-slide {
+  -moz-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
+  -o-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
+  -ms-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
+  -webkit-transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
+  transform: skew(20deg, 0deg) translate3d(-100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew .lg-item.lg-next-slide {
+  -moz-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
+  -o-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
+  -ms-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
+  -webkit-transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
+  transform: skew(20deg, 0deg) translate3d(100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew .lg-item.lg-next-slide, .lg-css3.lg-slide-skew .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-scale-up .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-scale-up .lg-item.lg-prev-slide {
+  -moz-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  -o-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  -ms-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  -webkit-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+}
+
+.lg-css3.lg-scale-up .lg-item.lg-next-slide {
+  -moz-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  -o-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  -ms-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  -webkit-transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+  transform: scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0);
+}
+
+.lg-css3.lg-scale-up .lg-item.lg-current {
+  -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-scale-up .lg-item.lg-prev-slide, .lg-css3.lg-scale-up .lg-item.lg-next-slide, .lg-css3.lg-scale-up .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-vertical-growth .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-vertical-growth .lg-item.lg-prev-slide {
+  -moz-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
+  -o-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
+  -ms-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
+  -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
+  transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0);
+}
+
+.lg-css3.lg-slide-vertical-growth .lg-item.lg-next-slide {
+  -moz-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
+  -o-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
+  -ms-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
+  -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
+  transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0);
+}
+
+.lg-css3.lg-slide-vertical-growth .lg-item.lg-current {
+  -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-vertical-growth .lg-item.lg-prev-slide, .lg-css3.lg-slide-vertical-growth .lg-item.lg-next-slide, .lg-css3.lg-slide-vertical-growth .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-circular-vertical .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-circular-vertical .lg-item.lg-prev-slide {
+  -moz-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
+  -o-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
+  -ms-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
+  -webkit-transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
+  transform: scale3d(0, 0, 0) translate3d(0, -100%, 0);
+}
+
+.lg-css3.lg-slide-circular-vertical .lg-item.lg-next-slide {
+  -moz-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
+  -o-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
+  -ms-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
+  -webkit-transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
+  transform: scale3d(0, 0, 0) translate3d(0, 100%, 0);
+}
+
+.lg-css3.lg-slide-circular-vertical .lg-item.lg-current {
+  -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-circular-vertical .lg-item.lg-prev-slide, .lg-css3.lg-slide-circular-vertical .lg-item.lg-next-slide, .lg-css3.lg-slide-circular-vertical .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-vertical .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-vertical .lg-item.lg-prev-slide {
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+}
+
+.lg-css3.lg-slide-vertical .lg-item.lg-next-slide {
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+}
+
+.lg-css3.lg-slide-vertical .lg-item.lg-current {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-vertical .lg-item.lg-prev-slide, .lg-css3.lg-slide-vertical .lg-item.lg-next-slide, .lg-css3.lg-slide-vertical .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-circular .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-circular .lg-item.lg-prev-slide {
+  -moz-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
+  -o-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
+  -ms-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
+  -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
+  transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
+}
+
+.lg-css3.lg-slide-circular .lg-item.lg-next-slide {
+  -moz-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
+  -o-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
+  -ms-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
+  -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
+  transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
+}
+
+.lg-css3.lg-slide-circular .lg-item.lg-current {
+  -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-circular .lg-item.lg-prev-slide, .lg-css3.lg-slide-circular .lg-item.lg-next-slide, .lg-css3.lg-slide-circular .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-soft-zoom .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-soft-zoom .lg-item.lg-prev-slide {
+  -webkit-transform: scale3d(1.1, 1.1, 1.1);
+  transform: scale3d(1.1, 1.1, 1.1);
+}
+
+.lg-css3.lg-soft-zoom .lg-item.lg-next-slide {
+  -webkit-transform: scale3d(0.9, 0.9, 0.9);
+  transform: scale3d(0.9, 0.9, 0.9);
+}
+
+.lg-css3.lg-soft-zoom .lg-item.lg-current {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-css3.lg-soft-zoom .lg-item.lg-prev-slide, .lg-css3.lg-soft-zoom .lg-item.lg-next-slide, .lg-css3.lg-soft-zoom .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-cross-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-prev-slide {
+  -moz-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
+  -o-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
+  -ms-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
+  -webkit-transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
+  transform: skew(0deg, -60deg) translate3d(-100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-next-slide {
+  -moz-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
+  -o-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
+  -ms-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
+  -webkit-transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
+  transform: skew(0deg, -60deg) translate3d(100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-cross-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-cross-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-cross-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-tube .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-tube .lg-item.lg-prev-slide {
+  -moz-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
+  -o-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
+  -ms-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
+  -webkit-transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
+  transform: scale3d(1, 0, 1) translate3d(-100%, 0, 0);
+}
+
+.lg-css3.lg-tube .lg-item.lg-next-slide {
+  -moz-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
+  -o-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
+  -ms-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
+  -webkit-transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
+  transform: scale3d(1, 0, 1) translate3d(100%, 0, 0);
+}
+
+.lg-css3.lg-tube .lg-item.lg-current {
+  -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-tube .lg-item.lg-prev-slide, .lg-css3.lg-tube .lg-item.lg-next-slide, .lg-css3.lg-tube .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-cross .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-cross .lg-item.lg-prev-slide {
+  -moz-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
+  -o-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
+  -ms-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
+  -webkit-transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
+  transform: skew(0deg, 60deg) translate3d(-100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew-cross .lg-item.lg-next-slide {
+  -moz-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
+  -o-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
+  -ms-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
+  -webkit-transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
+  transform: skew(0deg, 60deg) translate3d(100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew-cross .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-cross .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-cross .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-cross .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-zoom-in-big .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-zoom-in-big .lg-item.lg-prev-slide {
+  -webkit-transform: scale3d(2, 2, 2);
+  transform: scale3d(2, 2, 2);
+}
+
+.lg-css3.lg-zoom-in-big .lg-item.lg-next-slide {
+  -webkit-transform: scale3d(2, 2, 2);
+  transform: scale3d(2, 2, 2);
+}
+
+.lg-css3.lg-zoom-in-big .lg-item.lg-current {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-css3.lg-zoom-in-big .lg-item.lg-prev-slide, .lg-css3.lg-zoom-in-big .lg-item.lg-next-slide, .lg-css3.lg-zoom-in-big .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-only-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-only-rev .lg-item.lg-prev-slide {
+  -moz-transform: skew(-10deg, 0deg);
+  -o-transform: skew(-10deg, 0deg);
+  -ms-transform: skew(-10deg, 0deg);
+  -webkit-transform: skew(-10deg, 0deg);
+  transform: skew(-10deg, 0deg);
+}
+
+.lg-css3.lg-slide-skew-only-rev .lg-item.lg-next-slide {
+  -moz-transform: skew(-10deg, 0deg);
+  -o-transform: skew(-10deg, 0deg);
+  -ms-transform: skew(-10deg, 0deg);
+  -webkit-transform: skew(-10deg, 0deg);
+  transform: skew(-10deg, 0deg);
+}
+
+.lg-css3.lg-slide-skew-only-rev .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg);
+  -o-transform: skew(0deg, 0deg);
+  -ms-transform: skew(0deg, 0deg);
+  -webkit-transform: skew(0deg, 0deg);
+  transform: skew(0deg, 0deg);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-only-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-zoom-in-out .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-zoom-in-out .lg-item.lg-prev-slide {
+  -webkit-transform: scale3d(2, 2, 2);
+  transform: scale3d(2, 2, 2);
+}
+
+.lg-css3.lg-zoom-in-out .lg-item.lg-next-slide {
+  -webkit-transform: scale3d(0, 0, 0);
+  transform: scale3d(0, 0, 0);
+}
+
+.lg-css3.lg-zoom-in-out .lg-item.lg-current {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-css3.lg-zoom-in-out .lg-item.lg-prev-slide, .lg-css3.lg-zoom-in-out .lg-item.lg-next-slide, .lg-css3.lg-zoom-in-out .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-only-y-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-prev-slide {
+  -moz-transform: skew(0deg, -10deg);
+  -o-transform: skew(0deg, -10deg);
+  -ms-transform: skew(0deg, -10deg);
+  -webkit-transform: skew(0deg, -10deg);
+  transform: skew(0deg, -10deg);
+}
+
+.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-next-slide {
+  -moz-transform: skew(0deg, -10deg);
+  -o-transform: skew(0deg, -10deg);
+  -ms-transform: skew(0deg, -10deg);
+  -webkit-transform: skew(0deg, -10deg);
+  transform: skew(0deg, -10deg);
+}
+
+.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg);
+  -o-transform: skew(0deg, 0deg);
+  -ms-transform: skew(0deg, 0deg);
+  -webkit-transform: skew(0deg, 0deg);
+  transform: skew(0deg, 0deg);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only-y-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-only-y .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-only-y .lg-item.lg-prev-slide {
+  -moz-transform: skew(0deg, 10deg);
+  -o-transform: skew(0deg, 10deg);
+  -ms-transform: skew(0deg, 10deg);
+  -webkit-transform: skew(0deg, 10deg);
+  transform: skew(0deg, 10deg);
+}
+
+.lg-css3.lg-slide-skew-only-y .lg-item.lg-next-slide {
+  -moz-transform: skew(0deg, 10deg);
+  -o-transform: skew(0deg, 10deg);
+  -ms-transform: skew(0deg, 10deg);
+  -webkit-transform: skew(0deg, 10deg);
+  transform: skew(0deg, 10deg);
+}
+
+.lg-css3.lg-slide-skew-only-y .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg);
+  -o-transform: skew(0deg, 0deg);
+  -ms-transform: skew(0deg, 0deg);
+  -webkit-transform: skew(0deg, 0deg);
+  transform: skew(0deg, 0deg);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-only-y .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only-y .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only-y .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-zoom-out-big .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-zoom-out-big .lg-item.lg-prev-slide {
+  -webkit-transform: scale3d(0, 0, 0);
+  transform: scale3d(0, 0, 0);
+}
+
+.lg-css3.lg-zoom-out-big .lg-item.lg-next-slide {
+  -webkit-transform: scale3d(0, 0, 0);
+  transform: scale3d(0, 0, 0);
+}
+
+.lg-css3.lg-zoom-out-big .lg-item.lg-current {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-css3.lg-zoom-out-big .lg-item.lg-prev-slide, .lg-css3.lg-zoom-out-big .lg-item.lg-next-slide, .lg-css3.lg-zoom-out-big .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-only .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-only .lg-item.lg-prev-slide {
+  -moz-transform: skew(10deg, 0deg);
+  -o-transform: skew(10deg, 0deg);
+  -ms-transform: skew(10deg, 0deg);
+  -webkit-transform: skew(10deg, 0deg);
+  transform: skew(10deg, 0deg);
+}
+
+.lg-css3.lg-slide-skew-only .lg-item.lg-next-slide {
+  -moz-transform: skew(10deg, 0deg);
+  -o-transform: skew(10deg, 0deg);
+  -ms-transform: skew(10deg, 0deg);
+  -webkit-transform: skew(10deg, 0deg);
+  transform: skew(10deg, 0deg);
+}
+
+.lg-css3.lg-slide-skew-only .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg);
+  -o-transform: skew(0deg, 0deg);
+  -ms-transform: skew(0deg, 0deg);
+  -webkit-transform: skew(0deg, 0deg);
+  transform: skew(0deg, 0deg);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-only .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-only .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-only .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-zoom-out-in .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-zoom-out-in .lg-item.lg-prev-slide {
+  -webkit-transform: scale3d(0, 0, 0);
+  transform: scale3d(0, 0, 0);
+}
+
+.lg-css3.lg-zoom-out-in .lg-item.lg-next-slide {
+  -webkit-transform: scale3d(2, 2, 2);
+  transform: scale3d(2, 2, 2);
+}
+
+.lg-css3.lg-zoom-out-in .lg-item.lg-current {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-css3.lg-zoom-out-in .lg-item.lg-prev-slide, .lg-css3.lg-zoom-out-in .lg-item.lg-next-slide, .lg-css3.lg-zoom-out-in .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-rev .lg-item.lg-prev-slide {
+  -moz-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
+  -o-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
+  -ms-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
+  -webkit-transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
+  transform: skew(-20deg, 0deg) translate3d(-100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew-rev .lg-item.lg-next-slide {
+  -moz-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
+  -o-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
+  -ms-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
+  -webkit-transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
+  transform: skew(-20deg, 0deg) translate3d(100%, 0%, 0px);
+}
+
+.lg-css3.lg-slide-skew-rev .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-zoom-out .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-zoom-out .lg-item.lg-prev-slide {
+  -webkit-transform: scale3d(0.7, 0.7, 0.7);
+  transform: scale3d(0.7, 0.7, 0.7);
+}
+
+.lg-css3.lg-zoom-out .lg-item.lg-next-slide {
+  -webkit-transform: scale3d(0.7, 0.7, 0.7);
+  transform: scale3d(0.7, 0.7, 0.7);
+}
+
+.lg-css3.lg-zoom-out .lg-item.lg-current {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-css3.lg-zoom-out .lg-item.lg-prev-slide, .lg-css3.lg-zoom-out .lg-item.lg-next-slide, .lg-css3.lg-zoom-out .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s;
+}
+
+.lg-css3.lg-slide-skew-ver-cross-rev .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-prev-slide {
+  -moz-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
+  -o-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
+  -ms-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
+  -webkit-transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
+  transform: skew(0deg, -20deg) translate3d(0, -100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-next-slide {
+  -moz-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
+  -o-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
+  -ms-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
+  -webkit-transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
+  transform: skew(0deg, -20deg) translate3d(0, 100%, 0px);
+}
+
+.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-current {
+  -moz-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -o-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -ms-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  -webkit-transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  transform: skew(0deg, 0deg) translate3d(0%, 0%, 0px);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-prev-slide, .lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-next-slide, .lg-css3.lg-slide-skew-ver-cross-rev .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}

res/css/lg-video.css

@@ -0,0 +1,144 @@
+.lg-outer .lg-video-cont {
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+
+.lg-outer .lg-video-cont .lg-object {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.lg-outer .lg-has-iframe .lg-video-cont {
+  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+}
+
+.lg-outer .lg-video-object {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+}
+
+.lg-outer .lg-video-poster {
+  z-index: 1;
+}
+
+.lg-outer .lg-has-video .lg-video-object {
+  opacity: 0;
+  will-change: opacity;
+  -webkit-transition: opacity 0.3s ease-in;
+  -o-transition: opacity 0.3s ease-in;
+  transition: opacity 0.3s ease-in;
+}
+
+.lg-outer .lg-has-video.lg-video-loaded .lg-video-poster,
+.lg-outer .lg-has-video.lg-video-loaded .lg-video-play-button {
+  opacity: 0 !important;
+}
+
+.lg-outer .lg-has-video.lg-video-loaded .lg-video-object {
+  opacity: 1;
+}
+
+@keyframes lg-play-stroke {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+@keyframes lg-play-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.lg-video-play-button {
+  width: 18%;
+  max-width: 140px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  cursor: pointer;
+  transform: translate(-50%, -50%) scale(1);
+  will-change: opacity, transform;
+  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+  -o-transition: -o-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+  transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+}
+
+.lg-video-play-button:hover .lg-video-play-icon-bg,
+.lg-video-play-button:hover .lg-video-play-icon {
+  opacity: 1;
+}
+
+.lg-video-play-icon-bg {
+  fill: none;
+  stroke-width: 3%;
+  stroke: #fcfcfc;
+  opacity: 0.6;
+  will-change: opacity;
+  -webkit-transition: opacity 0.12s ease-in;
+  -o-transition: opacity 0.12s ease-in;
+  transition: opacity 0.12s ease-in;
+}
+
+.lg-video-play-icon-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  fill: none;
+  stroke-width: 3%;
+  stroke: rgba(30, 30, 30, 0.9);
+  stroke-opacity: 1;
+  stroke-linecap: round;
+  stroke-dasharray: 200;
+  stroke-dashoffset: 200;
+}
+
+.lg-video-play-icon {
+  position: absolute;
+  width: 25%;
+  max-width: 120px;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  opacity: 0.6;
+  will-change: opacity;
+  -webkit-transition: opacity 0.12s ease-in;
+  -o-transition: opacity 0.12s ease-in;
+  transition: opacity 0.12s ease-in;
+}
+
+.lg-video-play-icon .lg-video-play-icon-inner {
+  fill: #fcfcfc;
+}
+
+.lg-video-loading .lg-video-play-icon-circle {
+  animation: lg-play-rotate 2s linear 0.25s infinite, lg-play-stroke 1.5s ease-in-out 0.25s infinite;
+}
+
+.lg-video-loaded .lg-video-play-button {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.7);
+}

res/css/lg-zoom.css

@@ -0,0 +1,84 @@
+.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap,
+.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
+  -webkit-transition-duration: 0ms !important;
+  transition-duration: 0ms !important;
+}
+
+.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  will-change: transform;
+  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+  -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+  -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+}
+
+.lg-outer.lg-use-transition-for-zoom.lg-zoom-drag-transition .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  will-change: transform;
+  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  will-change: opacity, transform;
+  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lg-icon.lg-zoom-in:after {
+  content: '\e311';
+}
+
+.lg-icon.lg-actual-size {
+  font-size: 20px;
+}
+
+.lg-icon.lg-actual-size:after {
+  content: '\e033';
+}
+
+.lg-icon.lg-zoom-out {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.lg-icon.lg-zoom-out:after {
+  content: '\e312';
+}
+
+.lg-zoomed .lg-icon.lg-zoom-out {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.lg-outer[data-lg-slide-type='video'] .lg-zoom-in,
+.lg-outer[data-lg-slide-type='video'] .lg-actual-size,
+.lg-outer[data-lg-slide-type='video'] .lg-zoom-out, .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-in,
+.lg-outer[data-lg-slide-type='iframe'] .lg-actual-size,
+.lg-outer[data-lg-slide-type='iframe'] .lg-zoom-out, .lg-outer.lg-first-slide-loading .lg-zoom-in,
+.lg-outer.lg-first-slide-loading .lg-actual-size,
+.lg-outer.lg-first-slide-loading .lg-zoom-out {
+  opacity: 0.75;
+  pointer-events: none;
+}

res/css/lightgallery-bundle.css

@@ -0,0 +1,1547 @@
+@font-face {
+  font-family: 'lg';
+  src: url("../fonts/lg.woff2?io9a6k") format("woff2"), url("../fonts/lg.ttf?io9a6k") format("truetype"), url("../fonts/lg.woff?io9a6k") format("woff"), url("../fonts/lg.svg?io9a6k#lg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.lg-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'lg' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.lg-container {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+.lg-next,
+.lg-prev {
+  background-color: rgba(0, 0, 0, 0.45);
+  border-radius: 2px;
+  color: #999;
+  cursor: pointer;
+  display: block;
+  font-size: 22px;
+  margin-top: -10px;
+  padding: 8px 10px 9px;
+  position: absolute;
+  top: 50%;
+  z-index: 1080;
+  outline: none;
+  border: none;
+}
+
+.lg-next.disabled,
+.lg-prev.disabled {
+  opacity: 0 !important;
+  cursor: default;
+}
+
+.lg-next:hover:not(.disabled),
+.lg-prev:hover:not(.disabled) {
+  color: #fff;
+}
+
+.lg-single-item .lg-next, .lg-single-item
+.lg-prev {
+  display: none;
+}
+
+.lg-next {
+  right: 20px;
+}
+
+.lg-next:before {
+  content: '\e095';
+}
+
+.lg-prev {
+  left: 20px;
+}
+
+.lg-prev:after {
+  content: '\e094';
+}
+
+@-webkit-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-moz-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-ms-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-webkit-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-moz-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-ms-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+.lg-outer.lg-right-end .lg-object {
+  -webkit-animation: lg-right-end 0.3s;
+  -o-animation: lg-right-end 0.3s;
+  animation: lg-right-end 0.3s;
+  position: relative;
+}
+
+.lg-outer.lg-left-end .lg-object {
+  -webkit-animation: lg-left-end 0.3s;
+  -o-animation: lg-left-end 0.3s;
+  animation: lg-left-end 0.3s;
+  position: relative;
+}
+
+.lg-toolbar {
+  z-index: 1082;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.lg-media-overlap .lg-toolbar {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+}
+
+.lg-toolbar .lg-icon {
+  color: #999;
+  cursor: pointer;
+  float: right;
+  font-size: 24px;
+  height: 47px;
+  line-height: 27px;
+  padding: 10px 0;
+  text-align: center;
+  width: 50px;
+  text-decoration: none !important;
+  outline: medium none;
+  will-change: color;
+  -webkit-transition: color 0.2s linear;
+  -o-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.lg-toolbar .lg-icon.lg-icon-18 {
+  font-size: 18px;
+}
+
+.lg-toolbar .lg-icon:hover {
+  color: #fff;
+}
+
+.lg-toolbar .lg-close:after {
+  content: '\e070';
+}
+
+.lg-toolbar .lg-maximize {
+  font-size: 22px;
+}
+
+.lg-toolbar .lg-maximize:after {
+  content: '\e90a';
+}
+
+.lg-toolbar .lg-download:after {
+  content: '\e0f2';
+}
+
+.lg-sub-html {
+  color: #eee;
+  font-size: 16px;
+  padding: 10px 40px;
+  text-align: center;
+  z-index: 1080;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s ease-out 0s;
+  -o-transition: opacity 0.2s ease-out 0s;
+  transition: opacity 0.2s ease-out 0s;
+}
+
+.lg-sub-html h4 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.lg-sub-html p {
+  font-size: 12px;
+  margin: 5px 0 0;
+}
+
+.lg-sub-html a {
+  color: inherit;
+}
+
+.lg-sub-html a:hover {
+  text-decoration: underline;
+}
+
+.lg-media-overlap .lg-sub-html {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
+}
+
+.lg-item .lg-sub-html {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.lg-error-msg {
+  font-size: 14px;
+  color: #999;
+}
+
+.lg-counter {
+  color: #999;
+  display: inline-block;
+  font-size: 16px;
+  padding-left: 20px;
+  padding-top: 12px;
+  height: 47px;
+  vertical-align: middle;
+}
+
+.lg-closing .lg-toolbar,
+.lg-closing .lg-prev,
+.lg-closing .lg-next,
+.lg-closing .lg-sub-html {
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+  -moz-transition: -moz-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+  -o-transition: -o-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+  transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+}
+
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont {
+  opacity: 0;
+  -moz-transform: scale3d(0.5, 0.5, 0.5);
+  -o-transform: scale3d(0.5, 0.5, 0.5);
+  -ms-transform: scale3d(0.5, 0.5, 0.5);
+  -webkit-transform: scale3d(0.5, 0.5, 0.5);
+  transform: scale3d(0.5, 0.5, 0.5);
+  will-change: transform, opacity;
+  -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+}
+
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont {
+  opacity: 1;
+  -moz-transform: scale3d(1, 1, 1);
+  -o-transform: scale3d(1, 1, 1);
+  -ms-transform: scale3d(1, 1, 1);
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+}
+
+.lg-outer .lg-thumb-outer {
+  background-color: #0d0a0a;
+  width: 100%;
+  max-height: 350px;
+  overflow: hidden;
+  float: left;
+}
+
+.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+
+.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}
+
+.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+.lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+.lg-outer .lg-thumb-outer.lg-thumb-align-middle {
+  text-align: center;
+}
+
+.lg-outer .lg-thumb-outer.lg-thumb-align-left {
+  text-align: left;
+}
+
+.lg-outer .lg-thumb-outer.lg-thumb-align-right {
+  text-align: right;
+}
+
+.lg-outer.lg-single-item .lg-thumb-outer {
+  display: none;
+}
+
+.lg-outer .lg-thumb {
+  padding: 5px 0;
+  height: 100%;
+  margin-bottom: -5px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@media (min-width: 768px) {
+  .lg-outer .lg-thumb {
+    padding: 10px 0;
+  }
+}
+
+.lg-outer .lg-thumb-item {
+  cursor: pointer;
+  float: left;
+  overflow: hidden;
+  height: 100%;
+  border-radius: 2px;
+  margin-bottom: 5px;
+  will-change: border-color;
+}
+
+@media (min-width: 768px) {
+  .lg-outer .lg-thumb-item {
+    border-radius: 4px;
+    border: 2px solid #fff;
+    -webkit-transition: border-color 0.25s ease;
+    -o-transition: border-color 0.25s ease;
+    transition: border-color 0.25s ease;
+  }
+}
+
+.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
+  border-color: #a90707;
+}
+
+.lg-outer .lg-thumb-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.lg-outer.lg-can-toggle .lg-item {
+  padding-bottom: 0;
+}
+
+.lg-outer .lg-toggle-thumb:after {
+  content: '\e1ff';
+}
+
+.lg-outer.lg-animate-thumb .lg-thumb {
+  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.lg-outer .lg-video-cont {
+  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+
+.lg-outer .lg-video-cont .lg-object {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.lg-outer .lg-has-iframe .lg-video-cont {
+  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+}
+
+.lg-outer .lg-video-object {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+}
+
+.lg-outer .lg-video-poster {
+  z-index: 1;
+}
+
+.lg-outer .lg-has-video .lg-video-object {
+  opacity: 0;
+  will-change: opacity;
+  -webkit-transition: opacity 0.3s ease-in;
+  -o-transition: opacity 0.3s ease-in;
+  transition: opacity 0.3s ease-in;
+}
+
+.lg-outer .lg-has-video.lg-video-loaded .lg-video-poster,
+.lg-outer .lg-has-video.lg-video-loaded .lg-video-play-button {
+  opacity: 0 !important;
+}
+
+.lg-outer .lg-has-video.lg-video-loaded .lg-video-object {
+  opacity: 1;
+}
+
+@keyframes lg-play-stroke {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+@keyframes lg-play-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.lg-video-play-button {
+  width: 18%;
+  max-width: 140px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  cursor: pointer;
+  transform: translate(-50%, -50%) scale(1);
+  will-change: opacity, transform;
+  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+  -o-transition: -o-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+  transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
+}
+
+.lg-video-play-button:hover .lg-video-play-icon-bg,
+.lg-video-play-button:hover .lg-video-play-icon {
+  opacity: 1;
+}
+
+.lg-video-play-icon-bg {
+  fill: none;
+  stroke-width: 3%;
+  stroke: #fcfcfc;
+  opacity: 0.6;
+  will-change: opacity;
+  -webkit-transition: opacity 0.12s ease-in;
+  -o-transition: opacity 0.12s ease-in;
+  transition: opacity 0.12s ease-in;
+}
+
+.lg-video-play-icon-circle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  fill: none;
+  stroke-width: 3%;
+  stroke: rgba(30, 30, 30, 0.9);
+  stroke-opacity: 1;
+  stroke-linecap: round;
+  stroke-dasharray: 200;
+  stroke-dashoffset: 200;
+}
+
+.lg-video-play-icon {
+  position: absolute;
+  width: 25%;
+  max-width: 120px;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  opacity: 0.6;
+  will-change: opacity;
+  -webkit-transition: opacity 0.12s ease-in;
+  -o-transition: opacity 0.12s ease-in;
+  transition: opacity 0.12s ease-in;
+}
+
+.lg-video-play-icon .lg-video-play-icon-inner {
+  fill: #fcfcfc;
+}
+
+.lg-video-loading .lg-video-play-icon-circle {
+  animation: lg-play-rotate 2s linear 0.25s infinite, lg-play-stroke 1.5s ease-in-out 0.25s infinite;
+}
+
+.lg-video-loaded .lg-video-play-button {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.7);
+}
+
+.lg-progress-bar {
+  background-color: #333;
+  height: 5px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1083;
+  opacity: 0;
+  will-change: opacity;
+  -webkit-transition: opacity 0.08s ease 0s;
+  -moz-transition: opacity 0.08s ease 0s;
+  -o-transition: opacity 0.08s ease 0s;
+  transition: opacity 0.08s ease 0s;
+}
+
+.lg-progress-bar .lg-progress {
+  background-color: #a90707;
+  height: 5px;
+  width: 0;
+}
+
+.lg-progress-bar.lg-start .lg-progress {
+  width: 100%;
+}
+
+.lg-show-autoplay .lg-progress-bar {
+  opacity: 1;
+}
+
+.lg-autoplay-button:after {
+  content: '\e01d';
+}
+
+.lg-show-autoplay .lg-autoplay-button:after {
+  content: '\e01a';
+}
+
+.lg-single-item .lg-autoplay-button {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap,
+.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
+  -webkit-transition-duration: 0ms !important;
+  transition-duration: 0ms !important;
+}
+
+.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  will-change: transform;
+  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+  -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+  -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
+}
+
+.lg-outer.lg-use-transition-for-zoom.lg-zoom-drag-transition .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  will-change: transform;
+  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  will-change: opacity, transform;
+  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  -moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  -o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lg-icon.lg-zoom-in:after {
+  content: '\e311';
+}
+
+.lg-icon.lg-actual-size {
+  font-size: 20px;
+}
+
+.lg-icon.lg-actual-size:after {
+  content: '\e033';
+}
+
+.lg-icon.lg-zoom-out {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.lg-icon.lg-zoom-out:after {
+  content: '\e312';
+}
+
+.lg-zoomed .lg-icon.lg-zoom-out {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.lg-outer[data-lg-slide-type='video'] .lg-zoom-in,
+.lg-outer[data-lg-slide-type='video'] .lg-actual-size,
+.lg-outer[data-lg-slide-type='video'] .lg-zoom-out, .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-in,
+.lg-outer[data-lg-slide-type='iframe'] .lg-actual-size,
+.lg-outer[data-lg-slide-type='iframe'] .lg-zoom-out, .lg-outer.lg-first-slide-loading .lg-zoom-in,
+.lg-outer.lg-first-slide-loading .lg-actual-size,
+.lg-outer.lg-first-slide-loading .lg-zoom-out {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.lg-outer .lg-pager-outer {
+  text-align: center;
+  z-index: 1080;
+  height: 10px;
+  margin-bottom: 10px;
+}
+
+.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
+  overflow: visible;
+}
+
+.lg-outer.lg-single-item .lg-pager-outer {
+  display: none;
+}
+
+.lg-outer .lg-pager-cont {
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+  margin: 0 5px;
+}
+
+.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
+  box-shadow: 0 0 0 2px white inset;
+}
+
+.lg-outer .lg-pager-thumb-cont {
+  background-color: #fff;
+  color: #fff;
+  bottom: 100%;
+  height: 83px;
+  left: 0;
+  margin-bottom: 20px;
+  margin-left: -60px;
+  opacity: 0;
+  padding: 5px;
+  position: absolute;
+  width: 120px;
+  border-radius: 3px;
+  will-change: transform, opacity;
+  -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
+  -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
+  -webkit-transform: translate3d(0, 5px, 0);
+  transform: translate3d(0, 5px, 0);
+}
+
+.lg-outer .lg-pager-thumb-cont img {
+  width: 100%;
+  height: 100%;
+}
+
+.lg-outer .lg-pager {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
+  display: block;
+  height: 12px;
+  -webkit-transition: box-shadow 0.3s ease 0s;
+  -o-transition: box-shadow 0.3s ease 0s;
+  transition: box-shadow 0.3s ease 0s;
+  width: 12px;
+}
+
+.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
+  box-shadow: 0 0 0 8px white inset;
+}
+
+.lg-outer .lg-caret {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px dashed;
+  bottom: -10px;
+  display: inline-block;
+  height: 0;
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  vertical-align: middle;
+  width: 0;
+}
+
+.lg-fullscreen:after {
+  content: "\e20c";
+}
+
+.lg-fullscreen-on .lg-fullscreen:after {
+  content: "\e20d";
+}
+
+.lg-outer .lg-dropdown-overlay {
+  background-color: rgba(0, 0, 0, 0.25);
+  bottom: 0;
+  cursor: default;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1081;
+  opacity: 0;
+  visibility: hidden;
+  will-change: visibility, opacity;
+  -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+}
+
+.lg-outer.lg-dropdown-active .lg-dropdown,
+.lg-outer.lg-dropdown-active .lg-dropdown-overlay {
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+  -moz-transform: translate3d(0, 0px, 0);
+  -o-transform: translate3d(0, 0px, 0);
+  -ms-transform: translate3d(0, 0px, 0);
+  -webkit-transform: translate3d(0, 0px, 0);
+  transform: translate3d(0, 0px, 0);
+  opacity: 1;
+  visibility: visible;
+}
+
+.lg-outer.lg-dropdown-active .lg-share {
+  color: #fff;
+}
+
+.lg-outer .lg-dropdown {
+  background-color: #fff;
+  border-radius: 2px;
+  font-size: 14px;
+  list-style-type: none;
+  margin: 0;
+  padding: 10px 0;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  top: 50px;
+  opacity: 0;
+  visibility: hidden;
+  -moz-transform: translate3d(0, 5px, 0);
+  -o-transform: translate3d(0, 5px, 0);
+  -ms-transform: translate3d(0, 5px, 0);
+  -webkit-transform: translate3d(0, 5px, 0);
+  transform: translate3d(0, 5px, 0);
+  will-change: visibility, opacity, transform;
+  -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+}
+
+.lg-outer .lg-dropdown:after {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  position: absolute;
+  border: 8px solid transparent;
+  border-bottom-color: #fff;
+  right: 16px;
+  top: -16px;
+}
+
+.lg-outer .lg-dropdown > li:last-child {
+  margin-bottom: 0px;
+}
+
+.lg-outer .lg-dropdown > li:hover a {
+  color: #333;
+}
+
+.lg-outer .lg-dropdown a {
+  color: #333;
+  display: block;
+  white-space: pre;
+  padding: 4px 12px;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+.lg-outer .lg-dropdown a:hover {
+  background-color: rgba(0, 0, 0, 0.07);
+}
+
+.lg-outer .lg-dropdown .lg-dropdown-text {
+  display: inline-block;
+  line-height: 1;
+  margin-top: -3px;
+  vertical-align: middle;
+}
+
+.lg-outer .lg-dropdown .lg-icon {
+  color: #333;
+  display: inline-block;
+  float: none;
+  font-size: 20px;
+  height: auto;
+  line-height: 1;
+  margin-right: 8px;
+  padding: 0;
+  vertical-align: middle;
+  width: auto;
+}
+
+.lg-outer .lg-share {
+  position: relative;
+}
+
+.lg-outer .lg-share:after {
+  content: '\e80d';
+}
+
+.lg-outer .lg-share-facebook .lg-icon {
+  color: #3b5998;
+}
+
+.lg-outer .lg-share-facebook .lg-icon:after {
+  content: '\e904';
+}
+
+.lg-outer .lg-share-twitter .lg-icon {
+  color: #00aced;
+}
+
+.lg-outer .lg-share-twitter .lg-icon:after {
+  content: '\e907';
+}
+
+.lg-outer .lg-share-pinterest .lg-icon {
+  color: #cb2027;
+}
+
+.lg-outer .lg-share-pinterest .lg-icon:after {
+  content: '\e906';
+}
+
+.lg-comment-box {
+  width: 420px;
+  max-width: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: #fff;
+  will-change: transform;
+  -moz-transform: translate3d(100%, 0, 0);
+  -o-transform: translate3d(100%, 0, 0);
+  -ms-transform: translate3d(100%, 0, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-comment-box .lg-comment-title {
+  margin: 0;
+  color: #fff;
+  font-size: 18px;
+}
+
+.lg-comment-box .lg-comment-header {
+  background-color: #000;
+  padding: 12px 20px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.lg-comment-box .lg-comment-body {
+  height: 100% !important;
+  padding-top: 43px !important;
+  width: 100% !important;
+}
+
+.lg-comment-box .fb-comments {
+  height: 100%;
+  width: 100%;
+  background: url("../images/loading.gif") no-repeat scroll center center #fff;
+  overflow-y: auto;
+  display: inline-block;
+}
+
+.lg-comment-box .fb-comments[fb-xfbml-state='rendered'] {
+  background-image: none;
+}
+
+.lg-comment-box .fb-comments > span {
+  max-width: 100%;
+}
+
+.lg-comment-box .lg-comment-close {
+  position: absolute;
+  right: 5px;
+  top: 12px;
+  cursor: pointer;
+  font-size: 20px;
+  color: #999;
+  will-change: color;
+  -webkit-transition: color 0.2s linear;
+  -o-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+}
+
+.lg-comment-box .lg-comment-close:hover {
+  color: #fff;
+}
+
+.lg-comment-box .lg-comment-close:after {
+  content: '\e070';
+}
+
+.lg-comment-box iframe {
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+.lg-comment-box #disqus_thread {
+  padding: 0 20px;
+}
+
+.lg-outer .lg-comment-overlay {
+  background-color: rgba(0, 0, 0, 0.25);
+  bottom: 0;
+  cursor: default;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1081;
+  opacity: 0;
+  visibility: hidden;
+  will-change: visibility, opacity;
+  -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+}
+
+.lg-outer .lg-comment-toggle:after {
+  content: '\e908';
+}
+
+.lg-outer.lg-comment-active .lg-comment-overlay {
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+  -moz-transform: translate3d(0, 0px, 0);
+  -o-transform: translate3d(0, 0px, 0);
+  -ms-transform: translate3d(0, 0px, 0);
+  -webkit-transform: translate3d(0, 0px, 0);
+  transform: translate3d(0, 0px, 0);
+  opacity: 1;
+  visibility: visible;
+}
+
+.lg-outer.lg-comment-active .lg-comment-toggle {
+  color: #fff;
+}
+
+.lg-outer.lg-comment-active .lg-comment-box {
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.lg-outer .lg-img-rotate {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-outer[data-lg-slide-type='video'] .lg-rotate-left,
+.lg-outer[data-lg-slide-type='video'] .lg-rotate-right,
+.lg-outer[data-lg-slide-type='video'] .lg-flip-ver,
+.lg-outer[data-lg-slide-type='video'] .lg-flip-hor, .lg-outer[data-lg-slide-type='iframe'] .lg-rotate-left,
+.lg-outer[data-lg-slide-type='iframe'] .lg-rotate-right,
+.lg-outer[data-lg-slide-type='iframe'] .lg-flip-ver,
+.lg-outer[data-lg-slide-type='iframe'] .lg-flip-hor {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.lg-rotate-left:after {
+  content: '\e900';
+}
+
+.lg-rotate-right:after {
+  content: '\e901';
+}
+
+.lg-icon.lg-flip-hor, .lg-icon.lg-flip-ver {
+  font-size: 26px;
+}
+
+.lg-flip-ver:after {
+  content: '\e903';
+}
+
+.lg-flip-hor:after {
+  content: '\e902';
+}
+
+.lg-medium-zoom-item {
+  cursor: zoom-in;
+}
+
+.lg-medium-zoom .lg-outer {
+  cursor: zoom-out;
+}
+
+.lg-medium-zoom .lg-outer.lg-grab img.lg-object {
+  cursor: zoom-out;
+}
+
+.lg-medium-zoom .lg-outer.lg-grabbing img.lg-object {
+  cursor: zoom-out;
+}
+
+.lg-relative-caption .lg-outer .lg-sub-html {
+  white-space: normal;
+  bottom: auto;
+  padding: 0;
+  background-image: none;
+}
+
+.lg-relative-caption .lg-outer .lg-relative-caption-item {
+  opacity: 0;
+  padding: 16px 0;
+  transition: 0.5s opacity ease;
+}
+
+.lg-relative-caption .lg-outer .lg-show-caption .lg-relative-caption-item {
+  opacity: 1;
+}
+
+.lg-group:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.lg-container {
+  display: none;
+  outline: none;
+}
+
+.lg-container.lg-show {
+  display: block;
+}
+
+.lg-on {
+  scroll-behavior: unset;
+}
+
+.lg-toolbar,
+.lg-prev,
+.lg-next,
+.lg-pager-outer,
+.lg-hide-sub-html .lg-sub-html {
+  opacity: 0;
+  will-change: transform, opacity;
+  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-show-in .lg-toolbar,
+.lg-show-in .lg-prev,
+.lg-show-in .lg-next,
+.lg-show-in .lg-pager-outer {
+  opacity: 1;
+}
+
+.lg-show-in.lg-hide-sub-html .lg-sub-html {
+  opacity: 1;
+}
+
+.lg-show-in .lg-hide-items .lg-prev {
+  opacity: 0;
+  -webkit-transform: translate3d(-10px, 0, 0);
+  transform: translate3d(-10px, 0, 0);
+}
+
+.lg-show-in .lg-hide-items .lg-next {
+  opacity: 0;
+  -webkit-transform: translate3d(10px, 0, 0);
+  transform: translate3d(10px, 0, 0);
+}
+
+.lg-show-in .lg-hide-items .lg-toolbar {
+  opacity: 0;
+  -webkit-transform: translate3d(0, -10px, 0);
+  transform: translate3d(0, -10px, 0);
+}
+
+.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
+  opacity: 0;
+  -webkit-transform: translate3d(0, 20px, 0);
+  transform: translate3d(0, 20px, 0);
+}
+
+.lg-outer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  text-align: left;
+  opacity: 0.001;
+  outline: none;
+  will-change: auto;
+  overflow: hidden;
+  -webkit-transition: opacity 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s;
+}
+
+.lg-outer * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.lg-outer.lg-zoom-from-image {
+  opacity: 1;
+}
+
+.lg-outer.lg-visible {
+  opacity: 1;
+}
+
+.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
+  -webkit-transition-duration: inherit !important;
+  transition-duration: inherit !important;
+  -webkit-transition-timing-function: inherit !important;
+  transition-timing-function: inherit !important;
+}
+
+.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+  opacity: 1;
+}
+
+.lg-outer.lg-grab img.lg-object {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+
+.lg-outer.lg-grabbing img.lg-object {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}
+
+.lg-outer .lg-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.lg-outer .lg-inner {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  -webkit-transition: opacity 0s;
+  -o-transition: opacity 0s;
+  transition: opacity 0s;
+  white-space: nowrap;
+}
+
+.lg-outer .lg-item {
+  display: none !important;
+}
+
+.lg-outer .lg-item:not(.lg-start-end-progress) {
+  background: url("../images/loading.gif") no-repeat scroll center center transparent;
+}
+
+.lg-outer.lg-css3 .lg-prev-slide,
+.lg-outer.lg-css3 .lg-current,
+.lg-outer.lg-css3 .lg-next-slide {
+  display: inline-block !important;
+}
+
+.lg-outer.lg-css .lg-current {
+  display: inline-block !important;
+}
+
+.lg-outer .lg-item,
+.lg-outer .lg-img-wrap {
+  display: inline-block;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.lg-outer .lg-item:before,
+.lg-outer .lg-img-wrap:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.lg-outer .lg-img-wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  white-space: nowrap;
+  font-size: 0;
+}
+
+.lg-outer .lg-item.lg-complete {
+  background-image: none;
+}
+
+.lg-outer .lg-item.lg-current {
+  z-index: 1060;
+}
+
+.lg-outer .lg-object {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  position: relative;
+}
+
+.lg-outer .lg-empty-html.lg-sub-html,
+.lg-outer .lg-empty-html .lg-sub-html {
+  display: none;
+}
+
+.lg-outer.lg-hide-download .lg-download {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.lg-outer .lg-first-slide .lg-dummy-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
+  -webkit-transform: translate3d(0, 0%, 0);
+  transform: translate3d(0, 0%, 0);
+  opacity: 1;
+}
+
+.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
+  opacity: 1;
+  transition: opacity 0.2s ease-out 0.15s;
+}
+
+.lg-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1040;
+  background-color: #000;
+  opacity: 0;
+  will-change: auto;
+  -webkit-transition: opacity 333ms ease-in 0s;
+  -o-transition: opacity 333ms ease-in 0s;
+  transition: opacity 333ms ease-in 0s;
+}
+
+.lg-backdrop.in {
+  opacity: 1;
+}
+
+.lg-css3.lg-no-trans .lg-prev-slide,
+.lg-css3.lg-no-trans .lg-next-slide,
+.lg-css3.lg-no-trans .lg-current {
+  -webkit-transition: none 0s ease 0s !important;
+  -moz-transition: none 0s ease 0s !important;
+  -o-transition: none 0s ease 0s !important;
+  transition: none 0s ease 0s !important;
+}
+
+.lg-css3.lg-use-css3 .lg-item {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lg-css3.lg-fade .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-fade .lg-item.lg-current {
+  opacity: 1;
+}
+
+.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
+  -webkit-transition: opacity 0.1s ease 0s;
+  -moz-transition: opacity 0.1s ease 0s;
+  -o-transition: opacity 0.1s ease 0s;
+  transition: opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+}
+
+.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-container {
+  display: none;
+}
+
+.lg-container.lg-show {
+  display: block;
+}
+
+.lg-container.lg-dragging-vertical .lg-backdrop {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+  opacity: 1;
+}
+
+.lg-inline .lg-backdrop,
+.lg-inline .lg-outer {
+  position: absolute;
+}
+
+.lg-inline .lg-backdrop {
+  z-index: 1;
+}
+
+.lg-inline .lg-outer {
+  z-index: 2;
+}
+
+.lg-inline .lg-maximize:after {
+  content: '\e909';
+}
+
+.lg-components {
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+  will-change: transform;
+  -webkit-transition: -webkit-transform 0.35s ease-out 0s;
+  -moz-transition: -moz-transform 0.35s ease-out 0s;
+  -o-transition: -o-transform 0.35s ease-out 0s;
+  transition: transform 0.35s ease-out 0s;
+  z-index: 1080;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}

res/css/lightgallery-core.css

@@ -0,0 +1,378 @@
+.lg-group:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.lg-container {
+  display: none;
+  outline: none;
+}
+
+.lg-container.lg-show {
+  display: block;
+}
+
+.lg-on {
+  scroll-behavior: unset;
+}
+
+.lg-toolbar,
+.lg-prev,
+.lg-next,
+.lg-pager-outer,
+.lg-hide-sub-html .lg-sub-html {
+  opacity: 0;
+  will-change: transform, opacity;
+  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-show-in .lg-toolbar,
+.lg-show-in .lg-prev,
+.lg-show-in .lg-next,
+.lg-show-in .lg-pager-outer {
+  opacity: 1;
+}
+
+.lg-show-in.lg-hide-sub-html .lg-sub-html {
+  opacity: 1;
+}
+
+.lg-show-in .lg-hide-items .lg-prev {
+  opacity: 0;
+  -webkit-transform: translate3d(-10px, 0, 0);
+  transform: translate3d(-10px, 0, 0);
+}
+
+.lg-show-in .lg-hide-items .lg-next {
+  opacity: 0;
+  -webkit-transform: translate3d(10px, 0, 0);
+  transform: translate3d(10px, 0, 0);
+}
+
+.lg-show-in .lg-hide-items .lg-toolbar {
+  opacity: 0;
+  -webkit-transform: translate3d(0, -10px, 0);
+  transform: translate3d(0, -10px, 0);
+}
+
+.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
+  opacity: 0;
+  -webkit-transform: translate3d(0, 20px, 0);
+  transform: translate3d(0, 20px, 0);
+}
+
+.lg-outer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  text-align: left;
+  opacity: 0.001;
+  outline: none;
+  will-change: auto;
+  overflow: hidden;
+  -webkit-transition: opacity 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s;
+}
+
+.lg-outer * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.lg-outer.lg-zoom-from-image {
+  opacity: 1;
+}
+
+.lg-outer.lg-visible {
+  opacity: 1;
+}
+
+.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
+  -webkit-transition-duration: inherit !important;
+  transition-duration: inherit !important;
+  -webkit-transition-timing-function: inherit !important;
+  transition-timing-function: inherit !important;
+}
+
+.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+  opacity: 1;
+}
+
+.lg-outer.lg-grab img.lg-object {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+
+.lg-outer.lg-grabbing img.lg-object {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}
+
+.lg-outer .lg-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.lg-outer .lg-inner {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  -webkit-transition: opacity 0s;
+  -o-transition: opacity 0s;
+  transition: opacity 0s;
+  white-space: nowrap;
+}
+
+.lg-outer .lg-item {
+  display: none !important;
+}
+
+.lg-outer .lg-item:not(.lg-start-end-progress) {
+  background: url("../images/loading.gif") no-repeat scroll center center transparent;
+}
+
+.lg-outer.lg-css3 .lg-prev-slide,
+.lg-outer.lg-css3 .lg-current,
+.lg-outer.lg-css3 .lg-next-slide {
+  display: inline-block !important;
+}
+
+.lg-outer.lg-css .lg-current {
+  display: inline-block !important;
+}
+
+.lg-outer .lg-item,
+.lg-outer .lg-img-wrap {
+  display: inline-block;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.lg-outer .lg-item:before,
+.lg-outer .lg-img-wrap:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.lg-outer .lg-img-wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  white-space: nowrap;
+  font-size: 0;
+}
+
+.lg-outer .lg-item.lg-complete {
+  background-image: none;
+}
+
+.lg-outer .lg-item.lg-current {
+  z-index: 1060;
+}
+
+.lg-outer .lg-object {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  position: relative;
+}
+
+.lg-outer .lg-empty-html.lg-sub-html,
+.lg-outer .lg-empty-html .lg-sub-html {
+  display: none;
+}
+
+.lg-outer.lg-hide-download .lg-download {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.lg-outer .lg-first-slide .lg-dummy-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
+  -webkit-transform: translate3d(0, 0%, 0);
+  transform: translate3d(0, 0%, 0);
+  opacity: 1;
+}
+
+.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
+  opacity: 1;
+  transition: opacity 0.2s ease-out 0.15s;
+}
+
+.lg-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1040;
+  background-color: #000;
+  opacity: 0;
+  will-change: auto;
+  -webkit-transition: opacity 333ms ease-in 0s;
+  -o-transition: opacity 333ms ease-in 0s;
+  transition: opacity 333ms ease-in 0s;
+}
+
+.lg-backdrop.in {
+  opacity: 1;
+}
+
+.lg-css3.lg-no-trans .lg-prev-slide,
+.lg-css3.lg-no-trans .lg-next-slide,
+.lg-css3.lg-no-trans .lg-current {
+  -webkit-transition: none 0s ease 0s !important;
+  -moz-transition: none 0s ease 0s !important;
+  -o-transition: none 0s ease 0s !important;
+  transition: none 0s ease 0s !important;
+}
+
+.lg-css3.lg-use-css3 .lg-item {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lg-css3.lg-fade .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-fade .lg-item.lg-current {
+  opacity: 1;
+}
+
+.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
+  -webkit-transition: opacity 0.1s ease 0s;
+  -moz-transition: opacity 0.1s ease 0s;
+  -o-transition: opacity 0.1s ease 0s;
+  transition: opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+}
+
+.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-container {
+  display: none;
+}
+
+.lg-container.lg-show {
+  display: block;
+}
+
+.lg-container.lg-dragging-vertical .lg-backdrop {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+  opacity: 1;
+}
+
+.lg-inline .lg-backdrop,
+.lg-inline .lg-outer {
+  position: absolute;
+}
+
+.lg-inline .lg-backdrop {
+  z-index: 1;
+}
+
+.lg-inline .lg-outer {
+  z-index: 2;
+}
+
+.lg-inline .lg-maximize:after {
+  content: '\e909';
+}
+
+.lg-components {
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+  will-change: transform;
+  -webkit-transition: -webkit-transform 0.35s ease-out 0s;
+  -moz-transition: -moz-transform 0.35s ease-out 0s;
+  -o-transition: -o-transform 0.35s ease-out 0s;
+  transition: transform 0.35s ease-out 0s;
+  z-index: 1080;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}

res/css/lightgallery.css

@@ -0,0 +1,713 @@
+@font-face {
+  font-family: 'lg';
+  src: url("../fonts/lg.woff2?io9a6k") format("woff2"), url("../fonts/lg.ttf?io9a6k") format("truetype"), url("../fonts/lg.woff?io9a6k") format("woff"), url("../fonts/lg.svg?io9a6k#lg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.lg-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'lg' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.lg-container {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+.lg-next,
+.lg-prev {
+  background-color: rgba(0, 0, 0, 0.45);
+  border-radius: 2px;
+  color: #999;
+  cursor: pointer;
+  display: block;
+  font-size: 22px;
+  margin-top: -10px;
+  padding: 8px 10px 9px;
+  position: absolute;
+  top: 50%;
+  z-index: 1080;
+  outline: none;
+  border: none;
+}
+
+.lg-next.disabled,
+.lg-prev.disabled {
+  opacity: 0 !important;
+  cursor: default;
+}
+
+.lg-next:hover:not(.disabled),
+.lg-prev:hover:not(.disabled) {
+  color: #fff;
+}
+
+.lg-single-item .lg-next, .lg-single-item
+.lg-prev {
+  display: none;
+}
+
+.lg-next {
+  right: 20px;
+}
+
+.lg-next:before {
+  content: '\e095';
+}
+
+.lg-prev {
+  left: 20px;
+}
+
+.lg-prev:after {
+  content: '\e094';
+}
+
+@-webkit-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-moz-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-ms-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-webkit-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-moz-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@-ms-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+.lg-outer.lg-right-end .lg-object {
+  -webkit-animation: lg-right-end 0.3s;
+  -o-animation: lg-right-end 0.3s;
+  animation: lg-right-end 0.3s;
+  position: relative;
+}
+
+.lg-outer.lg-left-end .lg-object {
+  -webkit-animation: lg-left-end 0.3s;
+  -o-animation: lg-left-end 0.3s;
+  animation: lg-left-end 0.3s;
+  position: relative;
+}
+
+.lg-toolbar {
+  z-index: 1082;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.lg-media-overlap .lg-toolbar {
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+}
+
+.lg-toolbar .lg-icon {
+  color: #999;
+  cursor: pointer;
+  float: right;
+  font-size: 24px;
+  height: 47px;
+  line-height: 27px;
+  padding: 10px 0;
+  text-align: center;
+  width: 50px;
+  text-decoration: none !important;
+  outline: medium none;
+  will-change: color;
+  -webkit-transition: color 0.2s linear;
+  -o-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.lg-toolbar .lg-icon.lg-icon-18 {
+  font-size: 18px;
+}
+
+.lg-toolbar .lg-icon:hover {
+  color: #fff;
+}
+
+.lg-toolbar .lg-close:after {
+  content: '\e070';
+}
+
+.lg-toolbar .lg-maximize {
+  font-size: 22px;
+}
+
+.lg-toolbar .lg-maximize:after {
+  content: '\e90a';
+}
+
+.lg-toolbar .lg-download:after {
+  content: '\e0f2';
+}
+
+.lg-sub-html {
+  color: #eee;
+  font-size: 16px;
+  padding: 10px 40px;
+  text-align: center;
+  z-index: 1080;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s ease-out 0s;
+  -o-transition: opacity 0.2s ease-out 0s;
+  transition: opacity 0.2s ease-out 0s;
+}
+
+.lg-sub-html h4 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.lg-sub-html p {
+  font-size: 12px;
+  margin: 5px 0 0;
+}
+
+.lg-sub-html a {
+  color: inherit;
+}
+
+.lg-sub-html a:hover {
+  text-decoration: underline;
+}
+
+.lg-media-overlap .lg-sub-html {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
+}
+
+.lg-item .lg-sub-html {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.lg-error-msg {
+  font-size: 14px;
+  color: #999;
+}
+
+.lg-counter {
+  color: #999;
+  display: inline-block;
+  font-size: 16px;
+  padding-left: 20px;
+  padding-top: 12px;
+  height: 47px;
+  vertical-align: middle;
+}
+
+.lg-closing .lg-toolbar,
+.lg-closing .lg-prev,
+.lg-closing .lg-next,
+.lg-closing .lg-sub-html {
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+  -moz-transition: -moz-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+  -o-transition: -o-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+  transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
+}
+
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont {
+  opacity: 0;
+  -moz-transform: scale3d(0.5, 0.5, 0.5);
+  -o-transform: scale3d(0.5, 0.5, 0.5);
+  -ms-transform: scale3d(0.5, 0.5, 0.5);
+  -webkit-transform: scale3d(0.5, 0.5, 0.5);
+  transform: scale3d(0.5, 0.5, 0.5);
+  will-change: transform, opacity;
+  -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+}
+
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont {
+  opacity: 1;
+  -moz-transform: scale3d(1, 1, 1);
+  -o-transform: scale3d(1, 1, 1);
+  -ms-transform: scale3d(1, 1, 1);
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+}
+
+.lg-group:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.lg-container {
+  display: none;
+  outline: none;
+}
+
+.lg-container.lg-show {
+  display: block;
+}
+
+.lg-on {
+  scroll-behavior: unset;
+}
+
+.lg-toolbar,
+.lg-prev,
+.lg-next,
+.lg-pager-outer,
+.lg-hide-sub-html .lg-sub-html {
+  opacity: 0;
+  will-change: transform, opacity;
+  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-show-in .lg-toolbar,
+.lg-show-in .lg-prev,
+.lg-show-in .lg-next,
+.lg-show-in .lg-pager-outer {
+  opacity: 1;
+}
+
+.lg-show-in.lg-hide-sub-html .lg-sub-html {
+  opacity: 1;
+}
+
+.lg-show-in .lg-hide-items .lg-prev {
+  opacity: 0;
+  -webkit-transform: translate3d(-10px, 0, 0);
+  transform: translate3d(-10px, 0, 0);
+}
+
+.lg-show-in .lg-hide-items .lg-next {
+  opacity: 0;
+  -webkit-transform: translate3d(10px, 0, 0);
+  transform: translate3d(10px, 0, 0);
+}
+
+.lg-show-in .lg-hide-items .lg-toolbar {
+  opacity: 0;
+  -webkit-transform: translate3d(0, -10px, 0);
+  transform: translate3d(0, -10px, 0);
+}
+
+.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
+  opacity: 0;
+  -webkit-transform: translate3d(0, 20px, 0);
+  transform: translate3d(0, 20px, 0);
+}
+
+.lg-outer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  text-align: left;
+  opacity: 0.001;
+  outline: none;
+  will-change: auto;
+  overflow: hidden;
+  -webkit-transition: opacity 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s;
+}
+
+.lg-outer * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.lg-outer.lg-zoom-from-image {
+  opacity: 1;
+}
+
+.lg-outer.lg-visible {
+  opacity: 1;
+}
+
+.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
+  -webkit-transition-duration: inherit !important;
+  transition-duration: inherit !important;
+  -webkit-transition-timing-function: inherit !important;
+  transition-timing-function: inherit !important;
+}
+
+.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+  opacity: 1;
+}
+
+.lg-outer.lg-grab img.lg-object {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+
+.lg-outer.lg-grabbing img.lg-object {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}
+
+.lg-outer .lg-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.lg-outer .lg-inner {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  -webkit-transition: opacity 0s;
+  -o-transition: opacity 0s;
+  transition: opacity 0s;
+  white-space: nowrap;
+}
+
+.lg-outer .lg-item {
+  display: none !important;
+}
+
+.lg-outer .lg-item:not(.lg-start-end-progress) {
+  background: url("../images/loading.gif") no-repeat scroll center center transparent;
+}
+
+.lg-outer.lg-css3 .lg-prev-slide,
+.lg-outer.lg-css3 .lg-current,
+.lg-outer.lg-css3 .lg-next-slide {
+  display: inline-block !important;
+}
+
+.lg-outer.lg-css .lg-current {
+  display: inline-block !important;
+}
+
+.lg-outer .lg-item,
+.lg-outer .lg-img-wrap {
+  display: inline-block;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.lg-outer .lg-item:before,
+.lg-outer .lg-img-wrap:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.lg-outer .lg-img-wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  white-space: nowrap;
+  font-size: 0;
+}
+
+.lg-outer .lg-item.lg-complete {
+  background-image: none;
+}
+
+.lg-outer .lg-item.lg-current {
+  z-index: 1060;
+}
+
+.lg-outer .lg-object {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  position: relative;
+}
+
+.lg-outer .lg-empty-html.lg-sub-html,
+.lg-outer .lg-empty-html .lg-sub-html {
+  display: none;
+}
+
+.lg-outer.lg-hide-download .lg-download {
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.lg-outer .lg-first-slide .lg-dummy-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
+  -webkit-transform: translate3d(0, 0%, 0);
+  transform: translate3d(0, 0%, 0);
+  opacity: 1;
+}
+
+.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
+  opacity: 1;
+  transition: opacity 0.2s ease-out 0.15s;
+}
+
+.lg-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1040;
+  background-color: #000;
+  opacity: 0;
+  will-change: auto;
+  -webkit-transition: opacity 333ms ease-in 0s;
+  -o-transition: opacity 333ms ease-in 0s;
+  transition: opacity 333ms ease-in 0s;
+}
+
+.lg-backdrop.in {
+  opacity: 1;
+}
+
+.lg-css3.lg-no-trans .lg-prev-slide,
+.lg-css3.lg-no-trans .lg-next-slide,
+.lg-css3.lg-no-trans .lg-current {
+  -webkit-transition: none 0s ease 0s !important;
+  -moz-transition: none 0s ease 0s !important;
+  -o-transition: none 0s ease 0s !important;
+  transition: none 0s ease 0s !important;
+}
+
+.lg-css3.lg-use-css3 .lg-item {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.lg-css3.lg-fade .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-fade .lg-item.lg-current {
+  opacity: 1;
+}
+
+.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
+  -webkit-transition: opacity 0.1s ease 0s;
+  -moz-transition: opacity 0.1s ease 0s;
+  -o-transition: opacity 0.1s ease 0s;
+  transition: opacity 0.1s ease 0s;
+}
+
+.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
+}
+
+.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item {
+  opacity: 0;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+
+.lg-container {
+  display: none;
+}
+
+.lg-container.lg-show {
+  display: block;
+}
+
+.lg-container.lg-dragging-vertical .lg-backdrop {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+
+.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+  opacity: 1;
+}
+
+.lg-inline .lg-backdrop,
+.lg-inline .lg-outer {
+  position: absolute;
+}
+
+.lg-inline .lg-backdrop {
+  z-index: 1;
+}
+
+.lg-inline .lg-outer {
+  z-index: 2;
+}
+
+.lg-inline .lg-maximize:after {
+  content: '\e909';
+}
+
+.lg-components {
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+  will-change: transform;
+  -webkit-transition: -webkit-transform 0.35s ease-out 0s;
+  -moz-transition: -moz-transform 0.35s ease-out 0s;
+  -o-transition: -o-transform 0.35s ease-out 0s;
+  transition: transform 0.35s ease-out 0s;
+  z-index: 1080;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}

res/fonts/lg.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+<json>
+<![CDATA[
+{
+	"fontFamily": "lg",
+	"majorVersion": 2,
+	"minorVersion": 0,
+	"fontURL": "",
+	"copyright": "",
+	"license": "",
+	"licenseURL": "",
+	"description": "Font generated by IcoMoon.",
+	"version": "Version 2.0",
+	"fontId": "lg",
+	"psName": "lg",
+	"subFamily": "Regular",
+	"fullName": "lg"
+}
+]]>
+</json>
+</metadata>
+<defs>
+<font id="lg" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe01a;" glyph-name="pause_circle_outline" data-tags="pause_circle_outline" d="M554 256.667v340h86v-340h-86zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM384 256.667v340h86v-340h-86z" />
+<glyph unicode="&#xe01d;" glyph-name="play_circle_outline" data-tags="play_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM426 234.667v384l256-192z" />
+<glyph unicode="&#xe033;" glyph-name="stack-2" data-tags="stack-2" d="M384 853.334h426.667q53 0 90.5-37.5t37.5-90.5v-426.667q0-53-37.5-90.5t-90.5-37.5h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 53 37.5 90.5t90.5 37.5zM170.667 675.334v-547.333q0-17.667 12.5-30.167t30.167-12.5h547.333q-13.333-37.667-46.333-61.5t-74.333-23.833h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 41.333 23.833 74.333t61.5 46.333zM810.667 768h-426.667q-17.667 0-30.167-12.5t-12.5-30.167v-426.667q0-17.667 12.5-30.167t30.167-12.5h426.667q17.667 0 30.167 12.5t12.5 30.167v426.667q0 17.667-12.5 30.167t-30.167 12.5z" />
+<glyph unicode="&#xe070;" glyph-name="clear" data-tags="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
+<glyph unicode="&#xe094;" glyph-name="arrow-left" data-tags="arrow-left" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z" />
+<glyph unicode="&#xe095;" glyph-name="arrow-right" data-tags="arrow-right" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z" />
+<glyph unicode="&#xe0f2;" glyph-name="vertical_align_bottom" data-tags="vertical_align_bottom" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z" />
+<glyph unicode="&#xe1ff;" glyph-name="apps" data-tags="apps" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z" />
+<glyph unicode="&#xe20c;" glyph-name="fullscreen" data-tags="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe20d;" glyph-name="fullscreen_exit" data-tags="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xe311;" glyph-name="zoom_in" data-tags="zoom_in" d="M512 512.667h-86v-86h-42v86h-86v42h86v86h42v-86h86v-42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe312;" glyph-name="zoom_out" data-tags="zoom_out" d="M298 554.667h214v-42h-214v42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe80d;" glyph-name="share" data-tags="share" d="M768 252.667c68 0 124-56 124-124s-56-126-124-126-124 58-124 126c0 10 0 20 2 28l-302 176c-24-22-54-34-88-34-70 0-128 58-128 128s58 128 128 128c34 0 64-12 88-34l300 174c-2 10-4 20-4 30 0 70 58 128 128 128s128-58 128-128-58-128-128-128c-34 0-64 14-88 36l-300-176c2-10 4-20 4-30s-2-20-4-30l304-176c22 20 52 32 84 32z" />
+<glyph unicode="&#xe900;" glyph-name="rotate_left" data-tags="rotate_left" d="M554 764.667q126-16 213-112t87-226-87-226-213-112v86q92 16 153 87t61 165-61 165-153 87v-166l-194 190 194 194v-132zM302 156.667l62 62q46-34 106-44v-86q-96 12-168 68zM260 384.667q10-58 42-106l-60-60q-56 74-68 166h86zM304 574.667q-36-52-44-106h-86q12 90 70 166z" />
+<glyph unicode="&#xe901;" glyph-name="rotate_right" data-tags="rotate_right" d="M720 278.667q34 46 44 106h86q-12-92-68-166zM554 174.667q60 10 106 44l62-62q-72-56-168-68v86zM850 468.667h-86q-10 60-44 106l62 60q58-72 68-166zM664 702.667l-194-190v166q-92-16-153-87t-61-165 61-165 153-87v-86q-126 16-213 112t-87 226 87 226 213 112v132z" />
+<glyph unicode="&#xe902;" glyph-name="swap_horiz" data-tags="swap_horiz" d="M896 554.667l-170-170v128h-300v84h300v128zM298 468.667v-128h300v-84h-300v-128l-170 170z" />
+<glyph unicode="&#xe903;" glyph-name="swap_vert" data-tags="swap_vert" d="M384 810.667l170-170h-128v-300h-84v300h-128zM682 212.667h128l-170-170-170 170h128v300h84v-300z" />
+<glyph unicode="&#xe904;" glyph-name="facebook-with-circle" data-tags="facebook-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM628.429 612.659h-73.882c-8.755 0-18.483-11.52-18.483-26.829v-53.35h92.416l-13.978-76.083h-78.438v-228.403h-87.194v228.403h-79.104v76.083h79.104v44.749c0 64.205 44.544 116.378 105.677 116.378h73.882v-80.947z" />
+<glyph unicode="&#xe905;" glyph-name="google-with-circle" data-tags="google+-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM483.686 249.805c-30.874-15.002-64.102-16.589-76.954-16.589-2.458 0-3.84 0-3.84 0s-1.178 0-2.765 0c-20.070 0-119.962 4.608-119.962 95.59 0 89.395 108.8 96.41 142.131 96.41h0.87c-19.251 25.702-15.258 51.61-15.258 51.61-1.69-0.102-4.147-0.205-7.168-0.205-12.544 0-36.762 1.997-57.549 15.411-25.498 16.384-38.4 44.288-38.4 82.893 0 109.107 119.142 113.51 120.32 113.613h118.989v-2.611c0-13.312-23.91-15.923-40.192-18.125-5.53-0.819-16.64-1.894-19.763-3.482 30.157-16.128 35.021-41.421 35.021-79.104 0-42.906-16.794-65.587-34.611-81.51-11.059-9.882-19.712-17.613-19.712-28.006 0-10.189 11.878-20.582 25.702-32.717 22.579-19.917 53.555-47.002 53.555-92.723 0-47.258-20.326-81.050-60.416-100.454zM742.4 460.8h-76.8v-76.8h-51.2v76.8h-76.8v51.2h76.8v76.8h51.2v-76.8h76.8v-51.2zM421.018 401.92c-2.662 0-5.325-0.102-8.038-0.307-22.733-1.69-43.725-10.189-58.88-24.013-15.053-13.619-22.733-30.822-21.658-48.179 2.304-36.403 41.37-57.702 88.832-54.323 46.694 3.379 77.824 30.31 75.571 66.714-2.15 34.202-31.898 60.109-75.827 60.109zM465.766 599.808c-12.39 43.52-32.358 56.422-63.386 56.422-3.328 0-6.707-0.512-9.933-1.382-13.466-3.84-24.166-15.053-30.106-31.744-6.093-16.896-6.451-34.509-1.229-54.579 9.472-35.891 34.97-61.901 60.672-61.901 3.379 0 6.758 0.41 9.933 1.382 28.109 7.885 45.722 50.79 34.048 91.802z" />
+<glyph unicode="&#xe906;" glyph-name="pinterest-with-circle" data-tags="pinterest-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM545.638 344.32c-31.539 2.406-44.749 18.022-69.427 32.973-13.568-71.219-30.157-139.52-79.309-175.206-15.206 107.725 22.221 188.518 39.629 274.381-29.645 49.92 3.533 150.323 66.099 125.645 76.954-30.515-66.662-185.6 29.747-205.005 100.659-20.173 141.773 174.694 79.36 237.978-90.214 91.494-262.502 2.099-241.306-128.87 5.12-32 38.246-41.728 13.21-85.914-57.702 12.8-74.957 58.317-72.704 118.989 3.533 99.328 89.242 168.909 175.155 178.483 108.698 12.083 210.688-39.885 224.819-142.182 15.821-115.405-49.101-240.282-165.274-231.27z" />
+<glyph unicode="&#xe907;" glyph-name="twitter-with-circle" data-tags="twitter-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM711.936 549.683c0.205-4.198 0.256-8.397 0.256-12.493 0-128-97.331-275.507-275.405-275.507-54.682 0-105.574 15.974-148.378 43.52 7.526-0.922 15.258-1.28 23.091-1.28 45.363 0 87.091 15.411 120.218 41.421-42.342 0.819-78.080 28.774-90.419 67.174 5.888-1.075 11.93-1.69 18.176-1.69 8.806 0 17.408 1.178 25.498 3.379-44.288 8.909-77.67 48.026-77.67 94.925v1.178c13.056-7.219 28.006-11.622 43.878-12.134-26.010 17.408-43.059 47.002-43.059 80.64 0 17.715 4.762 34.406 13.107 48.691 47.77-58.573 119.040-97.075 199.526-101.222-1.69 7.117-2.509 14.49-2.509 22.118 0 53.402 43.315 96.819 96.819 96.819 27.802 0 52.992-11.776 70.656-30.618 22.067 4.403 42.752 12.39 61.44 23.501-7.219-22.579-22.528-41.574-42.547-53.606 19.61 2.406 38.246 7.578 55.603 15.309-12.954-19.405-29.389-36.506-48.282-50.125z" />
+<glyph unicode="&#xe908;" glyph-name="message-circle" data-tags="message-circle" d="M938.667 448.128v21.205c0 0.725-0.043 1.621-0.085 2.475-5.803 99.755-47.488 190.336-112.725 258.176-68.352 71.125-162.731 117.419-268.843 123.264-0.683 0.043-1.536 0.085-2.347 0.085h-20.864c-59.947 0.683-122.965-13.227-181.931-43.008-52.181-26.496-97.749-63.488-133.931-108.16-56.405-69.717-89.899-158.080-89.941-253.696-0.597-54.4 10.795-111.36 35.157-165.419l-75.605-226.859c-2.816-8.363-3.072-17.835 0-26.965 7.467-22.357 31.616-34.432 53.973-26.965l226.731 75.563c49.493-22.485 105.984-35.243 165.376-35.115 58.539 0.384 115.797 13.141 168.149 36.949 81.579 37.163 151.040 101.248 193.749 186.667 27.477 53.291 43.307 115.84 43.136 181.803zM853.333 447.872c0.128-52.267-12.459-101.333-33.664-142.464-34.176-68.352-88.832-118.827-153.259-148.139-41.387-18.859-86.827-28.971-133.376-29.269-52.096-0.128-101.163 12.459-142.293 33.664-10.624 5.504-22.528 6.059-33.067 2.56l-162.261-54.101 54.101 162.261c3.755 11.221 2.56 22.912-2.389 32.725-23.552 46.677-34.304 96.171-33.792 142.421 0.043 76.331 26.411 145.92 70.955 200.917 28.629 35.371 64.768 64.725 106.24 85.76 46.592 23.552 96.085 34.304 142.336 33.792h19.456c83.712-4.565 158.037-41.003 212.011-97.152 51.285-53.376 84.139-124.416 89.003-202.795z" />
+<glyph unicode="&#xe909;" glyph-name="maximize-2" data-tags="maximize-2" d="M793.003 768l-225.835-225.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0l225.835 225.835v-153.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 5.803-1.152 11.307-3.243 16.341s-5.163 9.728-9.216 13.781c-0.043 0.043-0.043 0.043-0.085 0.085-3.925 3.925-8.619 7.083-13.781 9.216-5.035 2.091-10.539 3.243-16.341 3.243h-256c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM230.997 85.334l225.835 225.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-225.835-225.835v153.003c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-256c0-23.552 19.115-42.667 42.667-42.667h256c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667z" />
+<glyph unicode="&#xe90a;" glyph-name="minimize-2" data-tags="minimize-2" d="M700.331 554.667l225.835 225.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-225.835-225.835v153.003c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-256c0-5.803 1.152-11.307 3.243-16.341s5.163-9.728 9.216-13.781c0.043-0.043 0.043-0.043 0.085-0.085 3.925-3.925 8.619-7.083 13.781-9.216 5.035-2.091 10.539-3.243 16.341-3.243h256c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667zM158.165 12.502l225.835 225.835v-153.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 5.803-1.152 11.307-3.243 16.341s-5.163 9.728-9.216 13.781c-0.043 0.043-0.043 0.043-0.085 0.085-4.096 4.053-8.789 7.125-13.781 9.216-5.035 2.091-10.539 3.243-16.341 3.243h-256c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667h153.003l-225.835-225.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0z" />
+</font></defs></svg>

res/galleryindex.css

@@ -0,0 +1,39 @@
+         #header {
+             /* background-image: url("header/header.jpg"); */
+         }
+         #header h1 {
+             height: 2.0em;
+         }
+         .img-wrapper {
+              width: 100%;
+              height: 100%;
+              position: relative;
+              display: inline;
+         }
+         img {
+             width: 100%
+             height: 100%;
+             opacity: 1;
+         }
+         img:hover{
+             opacity: .3;
+             color: black;
+         }
+         a:link, .p a:visited, .p a:hover, .p a:active {
+            color:white;
+            text-decoration: none;
+         }
+         .p {
+             padding: 0.5em;
+             color: white;
+             position: absolute;
+             top: -100px;
+             left: 0px;
+             font-size: 29px;
+             display: inline-block;
+             /* text-align: center; */
+             position: absolute;
+             top: 50%;
+             left: 50%;
+             transform: translate(-50%, -50%);
+         }

res/js/lightgallery.es5.js

@@ -0,0 +1,2648 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var lightGalleryCoreSettings = {
+    mode: 'lg-slide',
+    easing: 'ease',
+    speed: 400,
+    licenseKey: '0000-0000-000-0000',
+    height: '100%',
+    width: '100%',
+    addClass: '',
+    startClass: 'lg-start-zoom',
+    backdropDuration: 300,
+    container: '',
+    startAnimationDuration: 400,
+    zoomFromOrigin: true,
+    hideBarsDelay: 0,
+    showBarsAfter: 10000,
+    slideDelay: 0,
+    supportLegacyBrowser: true,
+    allowMediaOverlap: false,
+    videoMaxSize: '1280-720',
+    loadYouTubePoster: true,
+    defaultCaptionHeight: 0,
+    ariaLabelledby: '',
+    ariaDescribedby: '',
+    closable: true,
+    swipeToClose: true,
+    closeOnTap: true,
+    showCloseIcon: true,
+    showMaximizeIcon: false,
+    loop: true,
+    escKey: true,
+    keyPress: true,
+    controls: true,
+    slideEndAnimation: true,
+    hideControlOnEnd: false,
+    mousewheel: false,
+    getCaptionFromTitleOrAlt: true,
+    appendSubHtmlTo: '.lg-sub-html',
+    subHtmlSelectorRelative: false,
+    preload: 2,
+    numberOfSlideItemsInDom: 10,
+    selector: '',
+    selectWithin: '',
+    nextHtml: '',
+    prevHtml: '',
+    index: 0,
+    iframeWidth: '100%',
+    iframeHeight: '100%',
+    iframeMaxWidth: '100%',
+    iframeMaxHeight: '100%',
+    download: true,
+    counter: true,
+    appendCounterTo: '.lg-toolbar',
+    swipeThreshold: 50,
+    enableSwipe: true,
+    enableDrag: true,
+    dynamic: false,
+    dynamicEl: [],
+    extraProps: [],
+    exThumbImage: '',
+    isMobile: undefined,
+    mobileSettings: {
+        controls: false,
+        showCloseIcon: false,
+        download: false,
+    },
+    plugins: [],
+    strings: {
+        closeGallery: 'Close gallery',
+        toggleMaximize: 'Toggle maximize',
+        previousSlide: 'Previous slide',
+        nextSlide: 'Next slide',
+        download: 'Download',
+        playVideo: 'Play video',
+    },
+};
+
+function initLgPolyfills() {
+    (function () {
+        if (typeof window.CustomEvent === 'function')
+            return false;
+        function CustomEvent(event, params) {
+            params = params || {
+                bubbles: false,
+                cancelable: false,
+                detail: null,
+            };
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        }
+        window.CustomEvent = CustomEvent;
+    })();
+    (function () {
+        if (!Element.prototype.matches) {
+            Element.prototype.matches =
+                Element.prototype.msMatchesSelector ||
+                    Element.prototype.webkitMatchesSelector;
+        }
+    })();
+}
+var lgQuery = /** @class */ (function () {
+    function lgQuery(selector) {
+        this.cssVenderPrefixes = [
+            'TransitionDuration',
+            'TransitionTimingFunction',
+            'Transform',
+            'Transition',
+        ];
+        this.selector = this._getSelector(selector);
+        this.firstElement = this._getFirstEl();
+        return this;
+    }
+    lgQuery.generateUUID = function () {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    };
+    lgQuery.prototype._getSelector = function (selector, context) {
+        if (context === void 0) { context = document; }
+        if (typeof selector !== 'string') {
+            return selector;
+        }
+        context = context || document;
+        var fl = selector.substring(0, 1);
+        if (fl === '#') {
+            return context.querySelector(selector);
+        }
+        else {
+            return context.querySelectorAll(selector);
+        }
+    };
+    lgQuery.prototype._each = function (func) {
+        if (!this.selector) {
+            return this;
+        }
+        if (this.selector.length !== undefined) {
+            [].forEach.call(this.selector, func);
+        }
+        else {
+            func(this.selector, 0);
+        }
+        return this;
+    };
+    lgQuery.prototype._setCssVendorPrefix = function (el, cssProperty, value) {
+        // prettier-ignore
+        var property = cssProperty.replace(/-([a-z])/gi, function (s, group1) {
+            return group1.toUpperCase();
+        });
+        if (this.cssVenderPrefixes.indexOf(property) !== -1) {
+            el.style[property.charAt(0).toLowerCase() + property.slice(1)] = value;
+            el.style['webkit' + property] = value;
+            el.style['moz' + property] = value;
+            el.style['ms' + property] = value;
+            el.style['o' + property] = value;
+        }
+        else {
+            el.style[property] = value;
+        }
+    };
+    lgQuery.prototype._getFirstEl = function () {
+        if (this.selector && this.selector.length !== undefined) {
+            return this.selector[0];
+        }
+        else {
+            return this.selector;
+        }
+    };
+    lgQuery.prototype.isEventMatched = function (event, eventName) {
+        var eventNamespace = eventName.split('.');
+        return event
+            .split('.')
+            .filter(function (e) { return e; })
+            .every(function (e) {
+            return eventNamespace.indexOf(e) !== -1;
+        });
+    };
+    lgQuery.prototype.attr = function (attr, value) {
+        if (value === undefined) {
+            if (!this.firstElement) {
+                return '';
+            }
+            return this.firstElement.getAttribute(attr);
+        }
+        this._each(function (el) {
+            el.setAttribute(attr, value);
+        });
+        return this;
+    };
+    lgQuery.prototype.find = function (selector) {
+        return $LG(this._getSelector(selector, this.selector));
+    };
+    lgQuery.prototype.first = function () {
+        if (this.selector && this.selector.length !== undefined) {
+            return $LG(this.selector[0]);
+        }
+        else {
+            return $LG(this.selector);
+        }
+    };
+    lgQuery.prototype.eq = function (index) {
+        return $LG(this.selector[index]);
+    };
+    lgQuery.prototype.parent = function () {
+        return $LG(this.selector.parentElement);
+    };
+    lgQuery.prototype.get = function () {
+        return this._getFirstEl();
+    };
+    lgQuery.prototype.removeAttr = function (attributes) {
+        var attrs = attributes.split(' ');
+        this._each(function (el) {
+            attrs.forEach(function (attr) { return el.removeAttribute(attr); });
+        });
+        return this;
+    };
+    lgQuery.prototype.wrap = function (className) {
+        if (!this.firstElement) {
+            return this;
+        }
+        var wrapper = document.createElement('div');
+        wrapper.className = className;
+        this.firstElement.parentNode.insertBefore(wrapper, this.firstElement);
+        this.firstElement.parentNode.removeChild(this.firstElement);
+        wrapper.appendChild(this.firstElement);
+        return this;
+    };
+    lgQuery.prototype.addClass = function (classNames) {
+        if (classNames === void 0) { classNames = ''; }
+        this._each(function (el) {
+            // IE doesn't support multiple arguments
+            classNames.split(' ').forEach(function (className) {
+                if (className) {
+                    el.classList.add(className);
+                }
+            });
+        });
+        return this;
+    };
+    lgQuery.prototype.removeClass = function (classNames) {
+        this._each(function (el) {
+            // IE doesn't support multiple arguments
+            classNames.split(' ').forEach(function (className) {
+                if (className) {
+                    el.classList.remove(className);
+                }
+            });
+        });
+        return this;
+    };
+    lgQuery.prototype.hasClass = function (className) {
+        if (!this.firstElement) {
+            return false;
+        }
+        return this.firstElement.classList.contains(className);
+    };
+    lgQuery.prototype.hasAttribute = function (attribute) {
+        if (!this.firstElement) {
+            return false;
+        }
+        return this.firstElement.hasAttribute(attribute);
+    };
+    lgQuery.prototype.toggleClass = function (className) {
+        if (!this.firstElement) {
+            return this;
+        }
+        if (this.hasClass(className)) {
+            this.removeClass(className);
+        }
+        else {
+            this.addClass(className);
+        }
+        return this;
+    };
+    lgQuery.prototype.css = function (property, value) {
+        var _this = this;
+        this._each(function (el) {
+            _this._setCssVendorPrefix(el, property, value);
+        });
+        return this;
+    };
+    // Need to pass separate namespaces for separate elements
+    lgQuery.prototype.on = function (events, listener) {
+        var _this = this;
+        if (!this.selector) {
+            return this;
+        }
+        events.split(' ').forEach(function (event) {
+            if (!Array.isArray(lgQuery.eventListeners[event])) {
+                lgQuery.eventListeners[event] = [];
+            }
+            lgQuery.eventListeners[event].push(listener);
+            _this.selector.addEventListener(event.split('.')[0], listener);
+        });
+        return this;
+    };
+    // @todo - test this
+    lgQuery.prototype.once = function (event, listener) {
+        var _this = this;
+        this.on(event, function () {
+            _this.off(event);
+            listener(event);
+        });
+        return this;
+    };
+    lgQuery.prototype.off = function (event) {
+        var _this = this;
+        if (!this.selector) {
+            return this;
+        }
+        Object.keys(lgQuery.eventListeners).forEach(function (eventName) {
+            if (_this.isEventMatched(event, eventName)) {
+                lgQuery.eventListeners[eventName].forEach(function (listener) {
+                    _this.selector.removeEventListener(eventName.split('.')[0], listener);
+                });
+                lgQuery.eventListeners[eventName] = [];
+            }
+        });
+        return this;
+    };
+    lgQuery.prototype.trigger = function (event, detail) {
+        if (!this.firstElement) {
+            return this;
+        }
+        var customEvent = new CustomEvent(event.split('.')[0], {
+            detail: detail || null,
+        });
+        this.firstElement.dispatchEvent(customEvent);
+        return this;
+    };
+    // Does not support IE
+    lgQuery.prototype.load = function (url) {
+        var _this = this;
+        fetch(url).then(function (res) {
+            _this.selector.innerHTML = res;
+        });
+        return this;
+    };
+    lgQuery.prototype.html = function (html) {
+        if (html === undefined) {
+            if (!this.firstElement) {
+                return '';
+            }
+            return this.firstElement.innerHTML;
+        }
+        this._each(function (el) {
+            el.innerHTML = html;
+        });
+        return this;
+    };
+    lgQuery.prototype.append = function (html) {
+        this._each(function (el) {
+            if (typeof html === 'string') {
+                el.insertAdjacentHTML('beforeend', html);
+            }
+            else {
+                el.appendChild(html);
+            }
+        });
+        return this;
+    };
+    lgQuery.prototype.prepend = function (html) {
+        this._each(function (el) {
+            el.insertAdjacentHTML('afterbegin', html);
+        });
+        return this;
+    };
+    lgQuery.prototype.remove = function () {
+        this._each(function (el) {
+            el.parentNode.removeChild(el);
+        });
+        return this;
+    };
+    lgQuery.prototype.empty = function () {
+        this._each(function (el) {
+            el.innerHTML = '';
+        });
+        return this;
+    };
+    lgQuery.prototype.scrollTop = function (scrollTop) {
+        if (scrollTop !== undefined) {
+            document.body.scrollTop = scrollTop;
+            document.documentElement.scrollTop = scrollTop;
+            return this;
+        }
+        else {
+            return (window.pageYOffset ||
+                document.documentElement.scrollTop ||
+                document.body.scrollTop ||
+                0);
+        }
+    };
+    lgQuery.prototype.scrollLeft = function (scrollLeft) {
+        if (scrollLeft !== undefined) {
+            document.body.scrollLeft = scrollLeft;
+            document.documentElement.scrollLeft = scrollLeft;
+            return this;
+        }
+        else {
+            return (window.pageXOffset ||
+                document.documentElement.scrollLeft ||
+                document.body.scrollLeft ||
+                0);
+        }
+    };
+    lgQuery.prototype.offset = function () {
+        if (!this.firstElement) {
+            return {
+                left: 0,
+                top: 0,
+            };
+        }
+        var rect = this.firstElement.getBoundingClientRect();
+        var bodyMarginLeft = $LG('body').style().marginLeft;
+        // Minus body margin - https://stackoverflow.com/questions/30711548/is-getboundingclientrect-left-returning-a-wrong-value
+        return {
+            left: rect.left - parseFloat(bodyMarginLeft) + this.scrollLeft(),
+            top: rect.top + this.scrollTop(),
+        };
+    };
+    lgQuery.prototype.style = function () {
+        if (!this.firstElement) {
+            return {};
+        }
+        return (this.firstElement.currentStyle ||
+            window.getComputedStyle(this.firstElement));
+    };
+    // Width without padding and border even if box-sizing is used.
+    lgQuery.prototype.width = function () {
+        var style = this.style();
+        return (this.firstElement.clientWidth -
+            parseFloat(style.paddingLeft) -
+            parseFloat(style.paddingRight));
+    };
+    // Height without padding and border even if box-sizing is used.
+    lgQuery.prototype.height = function () {
+        var style = this.style();
+        return (this.firstElement.clientHeight -
+            parseFloat(style.paddingTop) -
+            parseFloat(style.paddingBottom));
+    };
+    lgQuery.eventListeners = {};
+    return lgQuery;
+}());
+function $LG(selector) {
+    initLgPolyfills();
+    return new lgQuery(selector);
+}
+
+var defaultDynamicOptions = [
+    'src',
+    'sources',
+    'subHtml',
+    'subHtmlUrl',
+    'html',
+    'video',
+    'poster',
+    'slideName',
+    'responsive',
+    'srcset',
+    'sizes',
+    'iframe',
+    'downloadUrl',
+    'download',
+    'width',
+    'facebookShareUrl',
+    'tweetText',
+    'iframeTitle',
+    'twitterShareUrl',
+    'pinterestShareUrl',
+    'pinterestText',
+    'fbHtml',
+    'disqusIdentifier',
+    'disqusUrl',
+];
+// Convert html data-attribute to camalcase
+function convertToData(attr) {
+    // FInd a way for lgsize
+    if (attr === 'href') {
+        return 'src';
+    }
+    attr = attr.replace('data-', '');
+    attr = attr.charAt(0).toLowerCase() + attr.slice(1);
+    attr = attr.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+    return attr;
+}
+var utils = {
+    /**
+     * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
+     */
+    getSize: function (el, container, spacing, defaultLgSize) {
+        if (spacing === void 0) { spacing = 0; }
+        var LGel = $LG(el);
+        var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
+        if (!lgSize) {
+            return;
+        }
+        var isResponsiveSizes = lgSize.split(',');
+        // if at-least two viewport sizes are available
+        if (isResponsiveSizes[1]) {
+            var wWidth = window.innerWidth;
+            for (var i = 0; i < isResponsiveSizes.length; i++) {
+                var size_1 = isResponsiveSizes[i];
+                var responsiveWidth = parseInt(size_1.split('-')[2], 10);
+                if (responsiveWidth > wWidth) {
+                    lgSize = size_1;
+                    break;
+                }
+                // take last item as last option
+                if (i === isResponsiveSizes.length - 1) {
+                    lgSize = size_1;
+                }
+            }
+        }
+        var size = lgSize.split('-');
+        var width = parseInt(size[0], 10);
+        var height = parseInt(size[1], 10);
+        var cWidth = container.width();
+        var cHeight = container.height() - spacing;
+        var maxWidth = Math.min(cWidth, width);
+        var maxHeight = Math.min(cHeight, height);
+        var ratio = Math.min(maxWidth / width, maxHeight / height);
+        return { width: width * ratio, height: height * ratio };
+    },
+    /**
+     * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
+     * @param {jQuery Element}
+     * @returns {String} Transform CSS string
+     */
+    getTransform: function (el, container, top, bottom, imageSize) {
+        if (!imageSize) {
+            return;
+        }
+        var LGel = $LG(el).find('img').first();
+        if (!LGel.get()) {
+            return;
+        }
+        var containerRect = container.get().getBoundingClientRect();
+        var wWidth = containerRect.width;
+        // using innerWidth to include mobile safari bottom bar
+        var wHeight = container.height() - (top + bottom);
+        var elWidth = LGel.width();
+        var elHeight = LGel.height();
+        var elStyle = LGel.style();
+        var x = (wWidth - elWidth) / 2 -
+            LGel.offset().left +
+            (parseFloat(elStyle.paddingLeft) || 0) +
+            (parseFloat(elStyle.borderLeft) || 0) +
+            $LG(window).scrollLeft() +
+            containerRect.left;
+        var y = (wHeight - elHeight) / 2 -
+            LGel.offset().top +
+            (parseFloat(elStyle.paddingTop) || 0) +
+            (parseFloat(elStyle.borderTop) || 0) +
+            $LG(window).scrollTop() +
+            top;
+        var scX = elWidth / imageSize.width;
+        var scY = elHeight / imageSize.height;
+        var transform = 'translate3d(' +
+            (x *= -1) +
+            'px, ' +
+            (y *= -1) +
+            'px, 0) scale3d(' +
+            scX +
+            ', ' +
+            scY +
+            ', 1)';
+        return transform;
+    },
+    getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
+        var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
+        return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; max-width:" + iframeMaxWidth + "; height: " + iframeHeight + "; max-height:" + iframeMaxHeight + "\">\n                    <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\"  allowfullscreen=\"true\"></iframe>\n                </div>";
+    },
+    getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
+        var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
+        var sizesAttr = sizes ? "sizes=\"" + sizes + "\"" : '';
+        var imgMarkup = "<img " + altAttr + " " + srcsetAttr + "  " + sizesAttr + " class=\"lg-object lg-image\" data-index=\"" + index + "\" src=\"" + src + "\" />";
+        var sourceTag = '';
+        if (sources) {
+            var sourceObj = typeof sources === 'string' ? JSON.parse(sources) : sources;
+            sourceTag = sourceObj.map(function (source) {
+                var attrs = '';
+                Object.keys(source).forEach(function (key) {
+                    // Do not remove the first space as it is required to separate the attributes
+                    attrs += " " + key + "=\"" + source[key] + "\"";
+                });
+                return "<source " + attrs + "></source>";
+            });
+        }
+        return "" + sourceTag + imgMarkup;
+    },
+    // Get src from responsive src
+    getResponsiveSrc: function (srcItms) {
+        var rsWidth = [];
+        var rsSrc = [];
+        var src = '';
+        for (var i = 0; i < srcItms.length; i++) {
+            var _src = srcItms[i].split(' ');
+            // Manage empty space
+            if (_src[0] === '') {
+                _src.splice(0, 1);
+            }
+            rsSrc.push(_src[0]);
+            rsWidth.push(_src[1]);
+        }
+        var wWidth = window.innerWidth;
+        for (var j = 0; j < rsWidth.length; j++) {
+            if (parseInt(rsWidth[j], 10) > wWidth) {
+                src = rsSrc[j];
+                break;
+            }
+        }
+        return src;
+    },
+    isImageLoaded: function (img) {
+        if (!img)
+            return false;
+        // During the onload event, IE correctly identifies any images that
+        // weren’t downloaded as not complete. Others should too. Gecko-based
+        // browsers act like NS4 in that they report this incorrectly.
+        if (!img.complete) {
+            return false;
+        }
+        // However, they do have two very useful properties: naturalWidth and
+        // naturalHeight. These give the true size of the image. If it failed
+        // to load, either of these should be zero.
+        if (img.naturalWidth === 0) {
+            return false;
+        }
+        // No other way of checking: assume it’s ok.
+        return true;
+    },
+    getVideoPosterMarkup: function (_poster, dummyImg, videoContStyle, playVideoString, _isVideo) {
+        var videoClass = '';
+        if (_isVideo && _isVideo.youtube) {
+            videoClass = 'lg-has-youtube';
+        }
+        else if (_isVideo && _isVideo.vimeo) {
+            videoClass = 'lg-has-vimeo';
+        }
+        else {
+            videoClass = 'lg-has-html5';
+        }
+        return "<div class=\"lg-video-cont " + videoClass + "\" style=\"" + videoContStyle + "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"" + playVideoString + "\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>" + playVideoString + "</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            " + (dummyImg || '') + "\n            <img class=\"lg-object lg-video-poster\" src=\"" + _poster + "\" />\n        </div>";
+    },
+    /**
+     * @desc Create dynamic elements array from gallery items when dynamic option is false
+     * It helps to avoid frequent DOM interaction
+     * and avoid multiple checks for dynamic elments
+     *
+     * @returns {Array} dynamicEl
+     */
+    getDynamicOptions: function (items, extraProps, getCaptionFromTitleOrAlt, exThumbImage) {
+        var dynamicElements = [];
+        var availableDynamicOptions = __spreadArrays(defaultDynamicOptions, extraProps);
+        [].forEach.call(items, function (item) {
+            var dynamicEl = {};
+            for (var i = 0; i < item.attributes.length; i++) {
+                var attr = item.attributes[i];
+                if (attr.specified) {
+                    var dynamicAttr = convertToData(attr.name);
+                    var label = '';
+                    if (availableDynamicOptions.indexOf(dynamicAttr) > -1) {
+                        label = dynamicAttr;
+                    }
+                    if (label) {
+                        dynamicEl[label] = attr.value;
+                    }
+                }
+            }
+            var currentItem = $LG(item);
+            var alt = currentItem.find('img').first().attr('alt');
+            var title = currentItem.attr('title');
+            var thumb = exThumbImage
+                ? currentItem.attr(exThumbImage)
+                : currentItem.find('img').first().attr('src');
+            dynamicEl.thumb = thumb;
+            if (getCaptionFromTitleOrAlt && !dynamicEl.subHtml) {
+                dynamicEl.subHtml = title || alt || '';
+            }
+            dynamicEl.alt = alt || title || '';
+            dynamicElements.push(dynamicEl);
+        });
+        return dynamicElements;
+    },
+    isMobile: function () {
+        return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    },
+    /**
+     * @desc Check the given src is video
+     * @param {String} src
+     * @return {Object} video type
+     * Ex:{ youtube  :  ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
+     *
+     * @todo - this information can be moved to dynamicEl to avoid frequent calls
+     */
+    isVideo: function (src, isHTML5VIdeo, index) {
+        if (!src) {
+            if (isHTML5VIdeo) {
+                return {
+                    html5: true,
+                };
+            }
+            else {
+                console.error('lightGallery :- data-src is not provided on slide item ' +
+                    (index + 1) +
+                    '. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
+                return;
+            }
+        }
+        var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
+        var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
+        var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
+        if (youtube) {
+            return {
+                youtube: youtube,
+            };
+        }
+        else if (vimeo) {
+            return {
+                vimeo: vimeo,
+            };
+        }
+        else if (wistia) {
+            return {
+                wistia: wistia,
+            };
+        }
+    },
+};
+
+// @ref - https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
+// @ref - https://2ality.com/2017/04/setting-up-multi-platform-packages.html
+// Unique id for each gallery
+var lgId = 0;
+var LightGallery = /** @class */ (function () {
+    function LightGallery(element, options) {
+        this.lgOpened = false;
+        this.index = 0;
+        // lightGallery modules
+        this.plugins = [];
+        // false when lightGallery load first slide content;
+        this.lGalleryOn = false;
+        // True when a slide animation is in progress
+        this.lgBusy = false;
+        this.currentItemsInDom = [];
+        // Scroll top value before lightGallery is opened
+        this.prevScrollTop = 0;
+        this.isDummyImageRemoved = false;
+        this.dragOrSwipeEnabled = false;
+        this.mediaContainerPosition = {
+            top: 0,
+            bottom: 0,
+        };
+        if (!element) {
+            return this;
+        }
+        lgId++;
+        this.lgId = lgId;
+        this.el = element;
+        this.LGel = $LG(element);
+        this.generateSettings(options);
+        this.buildModules();
+        // When using dynamic mode, ensure dynamicEl is an array
+        if (this.settings.dynamic &&
+            this.settings.dynamicEl !== undefined &&
+            !Array.isArray(this.settings.dynamicEl)) {
+            throw 'When using dynamic mode, you must also define dynamicEl as an Array.';
+        }
+        this.galleryItems = this.getItems();
+        this.normalizeSettings();
+        // Gallery items
+        this.init();
+        this.validateLicense();
+        return this;
+    }
+    LightGallery.prototype.generateSettings = function (options) {
+        // lightGallery settings
+        this.settings = __assign(__assign({}, lightGalleryCoreSettings), options);
+        if (this.settings.isMobile &&
+            typeof this.settings.isMobile === 'function'
+            ? this.settings.isMobile()
+            : utils.isMobile()) {
+            var mobileSettings = __assign(__assign({}, this.settings.mobileSettings), this.settings.mobileSettings);
+            this.settings = __assign(__assign({}, this.settings), mobileSettings);
+        }
+    };
+    LightGallery.prototype.normalizeSettings = function () {
+        if (this.settings.slideEndAnimation) {
+            this.settings.hideControlOnEnd = false;
+        }
+        if (!this.settings.closable) {
+            this.settings.swipeToClose = false;
+        }
+        // And reset it on close to get the correct value next time
+        this.zoomFromOrigin = this.settings.zoomFromOrigin;
+        // At the moment, Zoom from image doesn't support dynamic options
+        // @todo add zoomFromOrigin support for dynamic images
+        if (this.settings.dynamic) {
+            this.zoomFromOrigin = false;
+        }
+        if (!this.settings.container) {
+            this.settings.container = document.body;
+        }
+        // settings.preload should not be grater than $item.length
+        this.settings.preload = Math.min(this.settings.preload, this.galleryItems.length);
+    };
+    LightGallery.prototype.init = function () {
+        var _this = this;
+        this.addSlideVideoInfo(this.galleryItems);
+        this.buildStructure();
+        this.LGel.trigger(lGEvents.init, {
+            instance: this,
+        });
+        if (this.settings.keyPress) {
+            this.keyPress();
+        }
+        setTimeout(function () {
+            _this.enableDrag();
+            _this.enableSwipe();
+            _this.triggerPosterClick();
+        }, 50);
+        this.arrow();
+        if (this.settings.mousewheel) {
+            this.mousewheel();
+        }
+        if (!this.settings.dynamic) {
+            this.openGalleryOnItemClick();
+        }
+    };
+    LightGallery.prototype.openGalleryOnItemClick = function () {
+        var _this = this;
+        var _loop_1 = function (index) {
+            var element = this_1.items[index];
+            var $element = $LG(element);
+            // Using different namespace for click because click event should not unbind if selector is same object('this')
+            // @todo manage all event listners - should have namespace that represent element
+            var uuid = lgQuery.generateUUID();
+            $element
+                .attr('data-lg-id', uuid)
+                .on("click.lgcustom-item-" + uuid, function (e) {
+                e.preventDefault();
+                var currentItemIndex = _this.settings.index || index;
+                _this.openGallery(currentItemIndex, element);
+            });
+        };
+        var this_1 = this;
+        // Using for loop instead of using bubbling as the items can be any html element.
+        for (var index = 0; index < this.items.length; index++) {
+            _loop_1(index);
+        }
+    };
+    /**
+     * Module constructor
+     * Modules are build incrementally.
+     * Gallery should be opened only once all the modules are initialized.
+     * use moduleBuildTimeout to make sure this
+     */
+    LightGallery.prototype.buildModules = function () {
+        var _this = this;
+        this.settings.plugins.forEach(function (plugin) {
+            _this.plugins.push(new plugin(_this, $LG));
+        });
+    };
+    LightGallery.prototype.validateLicense = function () {
+        if (!this.settings.licenseKey) {
+            console.error('Please provide a valid license key');
+        }
+        else if (this.settings.licenseKey === '0000-0000-000-0000') {
+            console.warn("lightGallery: " + this.settings.licenseKey + " license key is not valid for production use");
+        }
+    };
+    LightGallery.prototype.getSlideItem = function (index) {
+        return $LG(this.getSlideItemId(index));
+    };
+    LightGallery.prototype.getSlideItemId = function (index) {
+        return "#lg-item-" + this.lgId + "-" + index;
+    };
+    LightGallery.prototype.getIdName = function (id) {
+        return id + "-" + this.lgId;
+    };
+    LightGallery.prototype.getElementById = function (id) {
+        return $LG("#" + this.getIdName(id));
+    };
+    LightGallery.prototype.manageSingleSlideClassName = function () {
+        if (this.galleryItems.length < 2) {
+            this.outer.addClass('lg-single-item');
+        }
+        else {
+            this.outer.removeClass('lg-single-item');
+        }
+    };
+    LightGallery.prototype.buildStructure = function () {
+        var _this = this;
+        var container = this.$container && this.$container.get();
+        if (container) {
+            return;
+        }
+        var controls = '';
+        var subHtmlCont = '';
+        // Create controls
+        if (this.settings.controls) {
+            controls = "<button type=\"button\" id=\"" + this.getIdName('lg-prev') + "\" aria-label=\"" + this.settings.strings['previousSlide'] + "\" class=\"lg-prev lg-icon\"> " + this.settings.prevHtml + " </button>\n                <button type=\"button\" id=\"" + this.getIdName('lg-next') + "\" aria-label=\"" + this.settings.strings['nextSlide'] + "\" class=\"lg-next lg-icon\"> " + this.settings.nextHtml + " </button>";
+        }
+        if (this.settings.appendSubHtmlTo !== '.lg-item') {
+            subHtmlCont =
+                '<div class="lg-sub-html" role="status" aria-live="polite"></div>';
+        }
+        var addClasses = '';
+        if (this.settings.allowMediaOverlap) {
+            // Do not remove space before last single quote
+            addClasses += 'lg-media-overlap ';
+        }
+        var ariaLabelledby = this.settings.ariaLabelledby
+            ? 'aria-labelledby="' + this.settings.ariaLabelledby + '"'
+            : '';
+        var ariaDescribedby = this.settings.ariaDescribedby
+            ? 'aria-describedby="' + this.settings.ariaDescribedby + '"'
+            : '';
+        var containerClassName = "lg-container " + this.settings.addClass + " " + (document.body !== this.settings.container ? 'lg-inline' : '');
+        var closeIcon = this.settings.closable && this.settings.showCloseIcon
+            ? "<button type=\"button\" aria-label=\"" + this.settings.strings['closeGallery'] + "\" id=\"" + this.getIdName('lg-close') + "\" class=\"lg-close lg-icon\"></button>"
+            : '';
+        var maximizeIcon = this.settings.showMaximizeIcon
+            ? "<button type=\"button\" aria-label=\"" + this.settings.strings['toggleMaximize'] + "\" id=\"" + this.getIdName('lg-maximize') + "\" class=\"lg-maximize lg-icon\"></button>"
+            : '';
+        var template = "\n        <div class=\"" + containerClassName + "\" id=\"" + this.getIdName('lg-container') + "\" tabindex=\"-1\" aria-modal=\"true\" " + ariaLabelledby + " " + ariaDescribedby + " role=\"dialog\"\n        >\n            <div id=\"" + this.getIdName('lg-backdrop') + "\" class=\"lg-backdrop\"></div>\n\n            <div id=\"" + this.getIdName('lg-outer') + "\" class=\"lg-outer lg-use-css3 lg-css3 lg-hide-items " + addClasses + " \">\n\n              <div id=\"" + this.getIdName('lg-content') + "\" class=\"lg-content\">\n                <div id=\"" + this.getIdName('lg-inner') + "\" class=\"lg-inner\">\n                </div>\n                " + controls + "\n              </div>\n                <div id=\"" + this.getIdName('lg-toolbar') + "\" class=\"lg-toolbar lg-group\">\n                    " + maximizeIcon + "\n                    " + closeIcon + "\n                    </div>\n                    " + (this.settings.appendSubHtmlTo === '.lg-outer'
+            ? subHtmlCont
+            : '') + "\n                <div id=\"" + this.getIdName('lg-components') + "\" class=\"lg-components\">\n                    " + (this.settings.appendSubHtmlTo === '.lg-sub-html'
+            ? subHtmlCont
+            : '') + "\n                </div>\n            </div>\n        </div>\n        ";
+        $LG(this.settings.container).append(template);
+        if (document.body !== this.settings.container) {
+            $LG(this.settings.container).css('position', 'relative');
+        }
+        this.outer = this.getElementById('lg-outer');
+        this.$lgComponents = this.getElementById('lg-components');
+        this.$backdrop = this.getElementById('lg-backdrop');
+        this.$container = this.getElementById('lg-container');
+        this.$inner = this.getElementById('lg-inner');
+        this.$content = this.getElementById('lg-content');
+        this.$toolbar = this.getElementById('lg-toolbar');
+        this.$backdrop.css('transition-duration', this.settings.backdropDuration + 'ms');
+        var outerClassNames = this.settings.mode + " ";
+        this.manageSingleSlideClassName();
+        if (this.settings.enableDrag) {
+            outerClassNames += 'lg-grab ';
+        }
+        this.outer.addClass(outerClassNames);
+        this.$inner.css('transition-timing-function', this.settings.easing);
+        this.$inner.css('transition-duration', this.settings.speed + 'ms');
+        if (this.settings.download) {
+            this.$toolbar.append("<a id=\"" + this.getIdName('lg-download') + "\" target=\"_blank\" rel=\"noopener\" aria-label=\"" + this.settings.strings['download'] + "\" download class=\"lg-download lg-icon\"></a>");
+        }
+        this.counter();
+        $LG(window).on("resize.lg.global" + this.lgId + " orientationchange.lg.global" + this.lgId, function () {
+            _this.refreshOnResize();
+        });
+        this.hideBars();
+        this.manageCloseGallery();
+        this.toggleMaximize();
+        this.initModules();
+    };
+    LightGallery.prototype.refreshOnResize = function () {
+        if (this.lgOpened) {
+            var currentGalleryItem = this.galleryItems[this.index];
+            var __slideVideoInfo = currentGalleryItem.__slideVideoInfo;
+            this.mediaContainerPosition = this.getMediaContainerPosition();
+            var _a = this.mediaContainerPosition, top_1 = _a.top, bottom = _a.bottom;
+            this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo && this.settings.videoMaxSize);
+            if (__slideVideoInfo) {
+                this.resizeVideoSlide(this.index, this.currentImageSize);
+            }
+            if (this.zoomFromOrigin && !this.isDummyImageRemoved) {
+                var imgStyle = this.getDummyImgStyles(this.currentImageSize);
+                this.outer
+                    .find('.lg-current .lg-dummy-img')
+                    .first()
+                    .attr('style', imgStyle);
+            }
+            this.LGel.trigger(lGEvents.containerResize);
+        }
+    };
+    LightGallery.prototype.resizeVideoSlide = function (index, imageSize) {
+        var lgVideoStyle = this.getVideoContStyle(imageSize);
+        var currentSlide = this.getSlideItem(index);
+        currentSlide.find('.lg-video-cont').attr('style', lgVideoStyle);
+    };
+    /**
+     * Update slides dynamically.
+     * Add, edit or delete slides dynamically when lightGallery is opened.
+     * Modify the current gallery items and pass it via updateSlides method
+     * @note
+     * - Do not mutate existing lightGallery items directly.
+     * - Always pass new list of gallery items
+     * - You need to take care of thumbnails outside the gallery if any
+     * - user this method only if you want to update slides when the gallery is opened. Otherwise, use `refresh()` method.
+     * @param items Gallery items
+     * @param index After the update operation, which slide gallery should navigate to
+     * @category lGPublicMethods
+     * @example
+     * const plugin = lightGallery();
+     *
+     * // Adding slides dynamically
+     * let galleryItems = [
+     * // Access existing lightGallery items
+     * // galleryItems are automatically generated internally from the gallery HTML markup
+     * // or directly from galleryItems when dynamic gallery is used
+     *   ...plugin.galleryItems,
+     *     ...[
+     *       {
+     *         src: 'img/img-1.png',
+     *           thumb: 'img/thumb1.png',
+     *         },
+     *     ],
+     *   ];
+     *   plugin.updateSlides(
+     *     galleryItems,
+     *     plugin.index,
+     *   );
+     *
+     *
+     * // Remove slides dynamically
+     * galleryItems = JSON.parse(
+     *   JSON.stringify(updateSlideInstance.galleryItems),
+     * );
+     * galleryItems.shift();
+     * updateSlideInstance.updateSlides(galleryItems, 1);
+     * @see <a href="/demos/update-slides/">Demo</a>
+     */
+    LightGallery.prototype.updateSlides = function (items, index) {
+        if (this.index > items.length - 1) {
+            this.index = items.length - 1;
+        }
+        if (items.length === 1) {
+            this.index = 0;
+        }
+        if (!items.length) {
+            this.closeGallery();
+            return;
+        }
+        var currentSrc = this.galleryItems[index].src;
+        this.galleryItems = items;
+        this.updateControls();
+        this.$inner.empty();
+        this.currentItemsInDom = [];
+        var _index = 0;
+        // Find the current index based on source value of the slide
+        this.galleryItems.some(function (galleryItem, itemIndex) {
+            if (galleryItem.src === currentSrc) {
+                _index = itemIndex;
+                return true;
+            }
+            return false;
+        });
+        this.currentItemsInDom = this.organizeSlideItems(_index, -1);
+        this.loadContent(_index, true);
+        this.getSlideItem(_index).addClass('lg-current');
+        this.index = _index;
+        this.updateCurrentCounter(_index);
+        this.LGel.trigger(lGEvents.updateSlides);
+    };
+    // Get gallery items based on multiple conditions
+    LightGallery.prototype.getItems = function () {
+        // Gallery items
+        this.items = [];
+        if (!this.settings.dynamic) {
+            if (this.settings.selector === 'this') {
+                this.items.push(this.el);
+            }
+            else if (this.settings.selector) {
+                if (typeof this.settings.selector === 'string') {
+                    if (this.settings.selectWithin) {
+                        var selectWithin = $LG(this.settings.selectWithin);
+                        this.items = selectWithin
+                            .find(this.settings.selector)
+                            .get();
+                    }
+                    else {
+                        this.items = this.el.querySelectorAll(this.settings.selector);
+                    }
+                }
+                else {
+                    this.items = this.settings.selector;
+                }
+            }
+            else {
+                this.items = this.el.children;
+            }
+            return utils.getDynamicOptions(this.items, this.settings.extraProps, this.settings.getCaptionFromTitleOrAlt, this.settings.exThumbImage);
+        }
+        else {
+            return this.settings.dynamicEl || [];
+        }
+    };
+    /**
+     * Open lightGallery.
+     * Open gallery with specific slide by passing index of the slide as parameter.
+     * @category lGPublicMethods
+     * @param {Number} index  - index of the slide
+     * @param {HTMLElement} element - Which image lightGallery should zoom from
+     *
+     * @example
+     * const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
+     * const dynamicGallery = lightGallery($dynamicGallery, {
+     *     dynamic: true,
+     *     dynamicEl: [
+     *         {
+     *              src: 'img/1.jpg',
+     *              thumb: 'img/thumb-1.jpg',
+     *              subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
+     *         },
+     *         ...
+     *     ],
+     * });
+     * $dynamicGallery.addEventListener('click', function () {
+     *     // Starts with third item.(Optional).
+     *     // This is useful if you want use dynamic mode with
+     *     // custom thumbnails (thumbnails outside gallery),
+     *     dynamicGallery.openGallery(2);
+     * });
+     *
+     */
+    LightGallery.prototype.openGallery = function (index, element) {
+        var _this = this;
+        if (index === void 0) { index = this.settings.index; }
+        // prevent accidental double execution
+        if (this.lgOpened)
+            return;
+        this.lgOpened = true;
+        this.outer.get().focus();
+        this.outer.removeClass('lg-hide-items');
+        // Add display block, but still has opacity 0
+        this.$container.addClass('lg-show');
+        var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index);
+        this.currentItemsInDom = itemsToBeInsertedToDom;
+        var items = '';
+        itemsToBeInsertedToDom.forEach(function (item) {
+            items = items + ("<div id=\"" + item + "\" class=\"lg-item\"></div>");
+        });
+        this.$inner.append(items);
+        this.addHtml(index);
+        var transform = '';
+        this.mediaContainerPosition = this.getMediaContainerPosition();
+        var _a = this.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
+        if (!this.settings.allowMediaOverlap) {
+            this.setMediaContainerPosition(top, bottom);
+        }
+        var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
+        if (this.zoomFromOrigin && element) {
+            this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);
+            transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize);
+        }
+        if (!this.zoomFromOrigin || !transform) {
+            this.outer.addClass(this.settings.startClass);
+            this.getSlideItem(index).removeClass('lg-complete');
+        }
+        var timeout = this.settings.zoomFromOrigin
+            ? 100
+            : this.settings.backdropDuration;
+        setTimeout(function () {
+            _this.outer.addClass('lg-components-open');
+        }, timeout);
+        this.index = index;
+        this.LGel.trigger(lGEvents.beforeOpen);
+        // add class lg-current to remove initial transition
+        this.getSlideItem(index).addClass('lg-current');
+        this.lGalleryOn = false;
+        // Store the current scroll top value to scroll back after closing the gallery..
+        this.prevScrollTop = $LG(window).scrollTop();
+        setTimeout(function () {
+            // Need to check both zoomFromOrigin and transform values as we need to set set the
+            // default opening animation if user missed to add the lg-size attribute
+            if (_this.zoomFromOrigin && transform) {
+                var currentSlide_1 = _this.getSlideItem(index);
+                currentSlide_1.css('transform', transform);
+                setTimeout(function () {
+                    currentSlide_1
+                        .addClass('lg-start-progress lg-start-end-progress')
+                        .css('transition-duration', _this.settings.startAnimationDuration + 'ms');
+                    _this.outer.addClass('lg-zoom-from-image');
+                });
+                setTimeout(function () {
+                    currentSlide_1.css('transform', 'translate3d(0, 0, 0)');
+                }, 100);
+            }
+            setTimeout(function () {
+                _this.$backdrop.addClass('in');
+                _this.$container.addClass('lg-show-in');
+            }, 10);
+            // lg-visible class resets gallery opacity to 1
+            if (!_this.zoomFromOrigin || !transform) {
+                setTimeout(function () {
+                    _this.outer.addClass('lg-visible');
+                }, _this.settings.backdropDuration);
+            }
+            // initiate slide function
+            _this.slide(index, false, false, false);
+            _this.LGel.trigger(lGEvents.afterOpen);
+        });
+        if (document.body === this.settings.container) {
+            $LG('html').addClass('lg-on');
+        }
+    };
+    /**
+     * Note - Changing the position of the media on every slide transition creates a flickering effect.
+     * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption.
+     * if you have dynamic captions for each media,
+     * you can provide an appropriate height for the captions via allowMediaOverlap option
+     */
+    LightGallery.prototype.getMediaContainerPosition = function () {
+        if (this.settings.allowMediaOverlap) {
+            return {
+                top: 0,
+                bottom: 0,
+            };
+        }
+        var top = this.$toolbar.get().clientHeight || 0;
+        var subHtml = this.outer.find('.lg-components .lg-sub-html').get();
+        var captionHeight = this.settings.defaultCaptionHeight ||
+            (subHtml && subHtml.clientHeight) ||
+            0;
+        var thumbContainer = this.outer.find('.lg-thumb-outer').get();
+        var thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0;
+        var bottom = thumbHeight + captionHeight;
+        return {
+            top: top,
+            bottom: bottom,
+        };
+    };
+    LightGallery.prototype.setMediaContainerPosition = function (top, bottom) {
+        if (top === void 0) { top = 0; }
+        if (bottom === void 0) { bottom = 0; }
+        this.$content.css('top', top + 'px').css('bottom', bottom + 'px');
+    };
+    LightGallery.prototype.hideBars = function () {
+        var _this = this;
+        // Hide controllers if mouse doesn't move for some period
+        setTimeout(function () {
+            _this.outer.removeClass('lg-hide-items');
+            if (_this.settings.hideBarsDelay > 0) {
+                _this.outer.on('mousemove.lg click.lg touchstart.lg', function () {
+                    _this.outer.removeClass('lg-hide-items');
+                    clearTimeout(_this.hideBarTimeout);
+                    // Timeout will be cleared on each slide movement also
+                    _this.hideBarTimeout = setTimeout(function () {
+                        _this.outer.addClass('lg-hide-items');
+                    }, _this.settings.hideBarsDelay);
+                });
+                _this.outer.trigger('mousemove.lg');
+            }
+        }, this.settings.showBarsAfter);
+    };
+    LightGallery.prototype.initPictureFill = function ($img) {
+        if (this.settings.supportLegacyBrowser) {
+            try {
+                picturefill({
+                    elements: [$img.get()],
+                });
+            }
+            catch (e) {
+                console.warn('lightGallery :- If you want srcset or picture tag to be supported for older browser please include picturefil javascript library in your document.');
+            }
+        }
+    };
+    /**
+     *  @desc Create image counter
+     *  Ex: 1/10
+     */
+    LightGallery.prototype.counter = function () {
+        if (this.settings.counter) {
+            var counterHtml = "<div class=\"lg-counter\" role=\"status\" aria-live=\"polite\">\n                <span id=\"" + this.getIdName('lg-counter-current') + "\" class=\"lg-counter-current\">" + (this.index + 1) + " </span> /\n                <span id=\"" + this.getIdName('lg-counter-all') + "\" class=\"lg-counter-all\">" + this.galleryItems.length + " </span></div>";
+            this.outer.find(this.settings.appendCounterTo).append(counterHtml);
+        }
+    };
+    /**
+     *  @desc add sub-html into the slide
+     *  @param {Number} index - index of the slide
+     */
+    LightGallery.prototype.addHtml = function (index) {
+        var subHtml;
+        var subHtmlUrl;
+        if (this.galleryItems[index].subHtmlUrl) {
+            subHtmlUrl = this.galleryItems[index].subHtmlUrl;
+        }
+        else {
+            subHtml = this.galleryItems[index].subHtml;
+        }
+        if (!subHtmlUrl) {
+            if (subHtml) {
+                // get first letter of sub-html
+                // if first letter starts with . or # get the html form the jQuery object
+                var fL = subHtml.substring(0, 1);
+                if (fL === '.' || fL === '#') {
+                    if (this.settings.subHtmlSelectorRelative &&
+                        !this.settings.dynamic) {
+                        subHtml = $LG(this.items)
+                            .eq(index)
+                            .find(subHtml)
+                            .first()
+                            .html();
+                    }
+                    else {
+                        subHtml = $LG(subHtml).first().html();
+                    }
+                }
+            }
+            else {
+                subHtml = '';
+            }
+        }
+        if (this.settings.appendSubHtmlTo !== '.lg-item') {
+            if (subHtmlUrl) {
+                this.outer.find('.lg-sub-html').load(subHtmlUrl);
+            }
+            else {
+                this.outer.find('.lg-sub-html').html(subHtml);
+            }
+        }
+        else {
+            var currentSlide = $LG(this.getSlideItemId(index));
+            if (subHtmlUrl) {
+                currentSlide.load(subHtmlUrl);
+            }
+            else {
+                currentSlide.append("<div class=\"lg-sub-html\">" + subHtml + "</div>");
+            }
+        }
+        // Add lg-empty-html class if title doesn't exist
+        if (typeof subHtml !== 'undefined' && subHtml !== null) {
+            if (subHtml === '') {
+                this.outer
+                    .find(this.settings.appendSubHtmlTo)
+                    .addClass('lg-empty-html');
+            }
+            else {
+                this.outer
+                    .find(this.settings.appendSubHtmlTo)
+                    .removeClass('lg-empty-html');
+            }
+        }
+        this.LGel.trigger(lGEvents.afterAppendSubHtml, {
+            index: index,
+        });
+    };
+    /**
+     *  @desc Preload slides
+     *  @param {Number} index - index of the slide
+     * @todo preload not working for the first slide, Also, should work for the first and last slide as well
+     */
+    LightGallery.prototype.preload = function (index) {
+        for (var i = 1; i <= this.settings.preload; i++) {
+            if (i >= this.galleryItems.length - index) {
+                break;
+            }
+            this.loadContent(index + i, false);
+        }
+        for (var j = 1; j <= this.settings.preload; j++) {
+            if (index - j < 0) {
+                break;
+            }
+            this.loadContent(index - j, false);
+        }
+    };
+    LightGallery.prototype.getDummyImgStyles = function (imageSize) {
+        if (!imageSize)
+            return '';
+        return "width:" + imageSize.width + "px;\n                margin-left: -" + imageSize.width / 2 + "px;\n                margin-top: -" + imageSize.height / 2 + "px;\n                height:" + imageSize.height + "px";
+    };
+    LightGallery.prototype.getVideoContStyle = function (imageSize) {
+        if (!imageSize)
+            return '';
+        return "width:" + imageSize.width + "px;\n                height:" + imageSize.height + "px";
+    };
+    LightGallery.prototype.getDummyImageContent = function ($currentSlide, index, alt) {
+        var $currentItem;
+        if (!this.settings.dynamic) {
+            $currentItem = $LG(this.items).eq(index);
+        }
+        if ($currentItem) {
+            var _dummyImgSrc = void 0;
+            if (!this.settings.exThumbImage) {
+                _dummyImgSrc = $currentItem.find('img').first().attr('src');
+            }
+            else {
+                _dummyImgSrc = $currentItem.attr(this.settings.exThumbImage);
+            }
+            if (!_dummyImgSrc)
+                return '';
+            var imgStyle = this.getDummyImgStyles(this.currentImageSize);
+            var dummyImgContent = "<img " + alt + " style=\"" + imgStyle + "\" class=\"lg-dummy-img\" src=\"" + _dummyImgSrc + "\" />";
+            $currentSlide.addClass('lg-first-slide');
+            this.outer.addClass('lg-first-slide-loading');
+            return dummyImgContent;
+        }
+        return '';
+    };
+    LightGallery.prototype.setImgMarkup = function (src, $currentSlide, index) {
+        var currentGalleryItem = this.galleryItems[index];
+        var alt = currentGalleryItem.alt, srcset = currentGalleryItem.srcset, sizes = currentGalleryItem.sizes, sources = currentGalleryItem.sources;
+        // Use the thumbnail as dummy image which will be resized to actual image size and
+        // displayed on top of actual image
+        var imgContent = '';
+        var altAttr = alt ? 'alt="' + alt + '"' : '';
+        if (this.isFirstSlideWithZoomAnimation()) {
+            imgContent = this.getDummyImageContent($currentSlide, index, altAttr);
+        }
+        else {
+            imgContent = utils.getImgMarkup(index, src, altAttr, srcset, sizes, sources);
+        }
+        var imgMarkup = "<picture class=\"lg-img-wrap\"> " + imgContent + "</picture>";
+        $currentSlide.prepend(imgMarkup);
+    };
+    LightGallery.prototype.onSlideObjectLoad = function ($slide, isHTML5VideoWithoutPoster, onLoad, onError) {
+        var mediaObject = $slide.find('.lg-object').first();
+        if (utils.isImageLoaded(mediaObject.get()) ||
+            isHTML5VideoWithoutPoster) {
+            onLoad();
+        }
+        else {
+            mediaObject.on('load.lg error.lg', function () {
+                onLoad && onLoad();
+            });
+            mediaObject.on('error.lg', function () {
+                onError && onError();
+            });
+        }
+    };
+    /**
+     *
+     * @param $el Current slide item
+     * @param index
+     * @param delay Delay is 0 except first time
+     * @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin
+     * @param isFirstSlide
+     */
+    LightGallery.prototype.onLgObjectLoad = function (currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) {
+        var _this = this;
+        this.onSlideObjectLoad(currentSlide, isHTML5VideoWithoutPoster, function () {
+            _this.triggerSlideItemLoad(currentSlide, index, delay, speed, isFirstSlide);
+        }, function () {
+            currentSlide.addClass('lg-complete lg-complete_');
+            currentSlide.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
+        });
+    };
+    LightGallery.prototype.triggerSlideItemLoad = function ($currentSlide, index, delay, speed, isFirstSlide) {
+        var _this = this;
+        var currentGalleryItem = this.galleryItems[index];
+        // Adding delay for video slides without poster for better performance and user experience
+        // Videos should start playing once once the gallery is completely loaded
+        var _speed = isFirstSlide &&
+            this.getSlideType(currentGalleryItem) === 'video' &&
+            !currentGalleryItem.poster
+            ? speed
+            : 0;
+        setTimeout(function () {
+            $currentSlide.addClass('lg-complete lg-complete_');
+            _this.LGel.trigger(lGEvents.slideItemLoad, {
+                index: index,
+                delay: delay || 0,
+                isFirstSlide: isFirstSlide,
+            });
+        }, _speed);
+    };
+    LightGallery.prototype.isFirstSlideWithZoomAnimation = function () {
+        return !!(!this.lGalleryOn &&
+            this.zoomFromOrigin &&
+            this.currentImageSize);
+    };
+    // Add video slideInfo
+    LightGallery.prototype.addSlideVideoInfo = function (items) {
+        var _this = this;
+        items.forEach(function (element, index) {
+            element.__slideVideoInfo = utils.isVideo(element.src, !!element.video, index);
+            if (element.__slideVideoInfo &&
+                _this.settings.loadYouTubePoster &&
+                !element.poster &&
+                element.__slideVideoInfo.youtube) {
+                element.poster = "//img.youtube.com/vi/" + element.__slideVideoInfo.youtube[1] + "/maxresdefault.jpg";
+            }
+        });
+    };
+    /**
+     *  Load slide content into slide.
+     *  This is used to load content into slides that is not visible too
+     *  @param {Number} index - index of the slide.
+     *  @param {Boolean} rec - if true call loadcontent() function again.
+     */
+    LightGallery.prototype.loadContent = function (index, rec) {
+        var _this = this;
+        var currentGalleryItem = this.galleryItems[index];
+        var $currentSlide = $LG(this.getSlideItemId(index));
+        var poster = currentGalleryItem.poster, srcset = currentGalleryItem.srcset, sizes = currentGalleryItem.sizes, sources = currentGalleryItem.sources;
+        var src = currentGalleryItem.src;
+        var video = currentGalleryItem.video;
+        var _html5Video = video && typeof video === 'string' ? JSON.parse(video) : video;
+        if (currentGalleryItem.responsive) {
+            var srcDyItms = currentGalleryItem.responsive.split(',');
+            src = utils.getResponsiveSrc(srcDyItms) || src;
+        }
+        var videoInfo = currentGalleryItem.__slideVideoInfo;
+        var lgVideoStyle = '';
+        var iframe = !!currentGalleryItem.iframe;
+        var isFirstSlide = !this.lGalleryOn;
+        // delay for adding complete class. it is 0 except first time.
+        var delay = 0;
+        if (isFirstSlide) {
+            if (this.zoomFromOrigin && this.currentImageSize) {
+                delay = this.settings.startAnimationDuration + 10;
+            }
+            else {
+                delay = this.settings.backdropDuration + 10;
+            }
+        }
+        if (!$currentSlide.hasClass('lg-loaded')) {
+            if (videoInfo) {
+                var _a = this.mediaContainerPosition, top_2 = _a.top, bottom = _a.bottom;
+                var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom, videoInfo && this.settings.videoMaxSize);
+                lgVideoStyle = this.getVideoContStyle(videoSize);
+            }
+            if (iframe) {
+                var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle);
+                $currentSlide.prepend(markup);
+            }
+            else if (poster) {
+                var dummyImg = '';
+                var hasStartAnimation = isFirstSlide &&
+                    this.zoomFromOrigin &&
+                    this.currentImageSize;
+                if (hasStartAnimation) {
+                    dummyImg = this.getDummyImageContent($currentSlide, index, '');
+                }
+                var markup = utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, this.settings.strings['playVideo'], videoInfo);
+                $currentSlide.prepend(markup);
+            }
+            else if (videoInfo) {
+                var markup = "<div class=\"lg-video-cont \" style=\"" + lgVideoStyle + "\"></div>";
+                $currentSlide.prepend(markup);
+            }
+            else {
+                this.setImgMarkup(src, $currentSlide, index);
+                if (srcset || sources) {
+                    var $img = $currentSlide.find('.lg-object');
+                    this.initPictureFill($img);
+                }
+            }
+            if (poster || videoInfo) {
+                this.LGel.trigger(lGEvents.hasVideo, {
+                    index: index,
+                    src: src,
+                    html5Video: _html5Video,
+                    hasPoster: !!poster,
+                });
+            }
+            this.LGel.trigger(lGEvents.afterAppendSlide, { index: index });
+            if (this.lGalleryOn &&
+                this.settings.appendSubHtmlTo === '.lg-item') {
+                this.addHtml(index);
+            }
+        }
+        // For first time add some delay for displaying the start animation.
+        var _speed = 0;
+        // Do not change the delay value because it is required for zoom plugin.
+        // If gallery opened from direct url (hash) speed value should be 0
+        if (delay && !$LG(document.body).hasClass('lg-from-hash')) {
+            _speed = delay;
+        }
+        // Only for first slide and zoomFromOrigin is enabled
+        if (this.isFirstSlideWithZoomAnimation()) {
+            setTimeout(function () {
+                $currentSlide
+                    .removeClass('lg-start-end-progress lg-start-progress')
+                    .removeAttr('style');
+            }, this.settings.startAnimationDuration + 100);
+            if (!$currentSlide.hasClass('lg-loaded')) {
+                setTimeout(function () {
+                    if (_this.getSlideType(currentGalleryItem) === 'image') {
+                        $currentSlide
+                            .find('.lg-img-wrap')
+                            .append(utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
+                        if (srcset || sources) {
+                            var $img = $currentSlide.find('.lg-object');
+                            _this.initPictureFill($img);
+                        }
+                    }
+                    if (_this.getSlideType(currentGalleryItem) === 'image' ||
+                        (_this.getSlideType(currentGalleryItem) === 'video' &&
+                            poster)) {
+                        _this.onLgObjectLoad($currentSlide, index, delay, _speed, true, false);
+                        // load remaining slides once the slide is completely loaded
+                        _this.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () {
+                            _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
+                        }, function () {
+                            _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
+                        });
+                    }
+                }, this.settings.startAnimationDuration + 100);
+            }
+        }
+        // SLide content has been added to dom
+        $currentSlide.addClass('lg-loaded');
+        if (!this.isFirstSlideWithZoomAnimation() ||
+            (this.getSlideType(currentGalleryItem) === 'video' && !poster)) {
+            this.onLgObjectLoad($currentSlide, index, delay, _speed, isFirstSlide, !!(videoInfo && videoInfo.html5 && !poster));
+        }
+        // When gallery is opened once content is loaded (second time) need to add lg-complete class for css styling
+        if ((!this.zoomFromOrigin || !this.currentImageSize) &&
+            $currentSlide.hasClass('lg-complete_') &&
+            !this.lGalleryOn) {
+            setTimeout(function () {
+                $currentSlide.addClass('lg-complete');
+            }, this.settings.backdropDuration);
+        }
+        // Content loaded
+        // Need to set lGalleryOn before calling preload function
+        this.lGalleryOn = true;
+        if (rec === true) {
+            if (!$currentSlide.hasClass('lg-complete_')) {
+                $currentSlide
+                    .find('.lg-object')
+                    .first()
+                    .on('load.lg error.lg', function () {
+                    _this.preload(index);
+                });
+            }
+            else {
+                this.preload(index);
+            }
+        }
+    };
+    /**
+     * @desc Remove dummy image content and load next slides
+     * Called only for the first time if zoomFromOrigin animation is enabled
+     * @param index
+     * @param $currentSlide
+     * @param speed
+     */
+    LightGallery.prototype.loadContentOnFirstSlideLoad = function (index, $currentSlide, speed) {
+        var _this = this;
+        setTimeout(function () {
+            $currentSlide.find('.lg-dummy-img').remove();
+            $currentSlide.removeClass('lg-first-slide');
+            _this.outer.removeClass('lg-first-slide-loading');
+            _this.isDummyImageRemoved = true;
+            _this.preload(index);
+        }, speed + 300);
+    };
+    LightGallery.prototype.getItemsToBeInsertedToDom = function (index, prevIndex, numberOfItems) {
+        var _this = this;
+        if (numberOfItems === void 0) { numberOfItems = 0; }
+        var itemsToBeInsertedToDom = [];
+        // Minimum 2 items should be there
+        var possibleNumberOfItems = Math.max(numberOfItems, 3);
+        possibleNumberOfItems = Math.min(possibleNumberOfItems, this.galleryItems.length);
+        var prevIndexItem = "lg-item-" + this.lgId + "-" + prevIndex;
+        if (this.galleryItems.length <= 3) {
+            this.galleryItems.forEach(function (_element, index) {
+                itemsToBeInsertedToDom.push("lg-item-" + _this.lgId + "-" + index);
+            });
+            return itemsToBeInsertedToDom;
+        }
+        if (index < (this.galleryItems.length - 1) / 2) {
+            for (var idx = index; idx > index - possibleNumberOfItems / 2 && idx >= 0; idx--) {
+                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx);
+            }
+            var numberOfExistingItems = itemsToBeInsertedToDom.length;
+            for (var idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) {
+                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (index + idx + 1));
+            }
+        }
+        else {
+            for (var idx = index; idx <= this.galleryItems.length - 1 &&
+                idx < index + possibleNumberOfItems / 2; idx++) {
+                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx);
+            }
+            var numberOfExistingItems = itemsToBeInsertedToDom.length;
+            for (var idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) {
+                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (index - idx - 1));
+            }
+        }
+        if (this.settings.loop) {
+            if (index === this.galleryItems.length - 1) {
+                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + 0);
+            }
+            else if (index === 0) {
+                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (this.galleryItems.length - 1));
+            }
+        }
+        if (itemsToBeInsertedToDom.indexOf(prevIndexItem) === -1) {
+            itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + prevIndex);
+        }
+        return itemsToBeInsertedToDom;
+    };
+    LightGallery.prototype.organizeSlideItems = function (index, prevIndex) {
+        var _this = this;
+        var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, prevIndex, this.settings.numberOfSlideItemsInDom);
+        itemsToBeInsertedToDom.forEach(function (item) {
+            if (_this.currentItemsInDom.indexOf(item) === -1) {
+                _this.$inner.append("<div id=\"" + item + "\" class=\"lg-item\"></div>");
+            }
+        });
+        this.currentItemsInDom.forEach(function (item) {
+            if (itemsToBeInsertedToDom.indexOf(item) === -1) {
+                $LG("#" + item).remove();
+            }
+        });
+        return itemsToBeInsertedToDom;
+    };
+    /**
+     * Get previous index of the slide
+     */
+    LightGallery.prototype.getPreviousSlideIndex = function () {
+        var prevIndex = 0;
+        try {
+            var currentItemId = this.outer
+                .find('.lg-current')
+                .first()
+                .attr('id');
+            prevIndex = parseInt(currentItemId.split('-')[3]) || 0;
+        }
+        catch (error) {
+            prevIndex = 0;
+        }
+        return prevIndex;
+    };
+    LightGallery.prototype.setDownloadValue = function (index) {
+        if (this.settings.download) {
+            var currentGalleryItem = this.galleryItems[index];
+            var hideDownloadBtn = currentGalleryItem.downloadUrl === false ||
+                currentGalleryItem.downloadUrl === 'false';
+            if (hideDownloadBtn) {
+                this.outer.addClass('lg-hide-download');
+            }
+            else {
+                var $download = this.getElementById('lg-download');
+                this.outer.removeClass('lg-hide-download');
+                $download.attr('href', currentGalleryItem.downloadUrl ||
+                    currentGalleryItem.src);
+                if (currentGalleryItem.download) {
+                    $download.attr('download', currentGalleryItem.download);
+                }
+            }
+        }
+    };
+    LightGallery.prototype.makeSlideAnimation = function (direction, currentSlideItem, previousSlideItem) {
+        var _this = this;
+        if (this.lGalleryOn) {
+            previousSlideItem.addClass('lg-slide-progress');
+        }
+        setTimeout(function () {
+            // remove all transitions
+            _this.outer.addClass('lg-no-trans');
+            _this.outer
+                .find('.lg-item')
+                .removeClass('lg-prev-slide lg-next-slide');
+            if (direction === 'prev') {
+                //prevslide
+                currentSlideItem.addClass('lg-prev-slide');
+                previousSlideItem.addClass('lg-next-slide');
+            }
+            else {
+                // next slide
+                currentSlideItem.addClass('lg-next-slide');
+                previousSlideItem.addClass('lg-prev-slide');
+            }
+            // give 50 ms for browser to add/remove class
+            setTimeout(function () {
+                _this.outer.find('.lg-item').removeClass('lg-current');
+                currentSlideItem.addClass('lg-current');
+                // reset all transitions
+                _this.outer.removeClass('lg-no-trans');
+            }, 50);
+        }, this.lGalleryOn ? this.settings.slideDelay : 0);
+    };
+    /**
+     * Goto a specific slide.
+     * @param {Number} index - index of the slide
+     * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
+     * @param {Boolean} fromThumb - true if slide function called via thumbnail click
+     * @param {String} direction - Direction of the slide(next/prev)
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  // to go to 3rd slide
+     *  plugin.slide(2);
+     *
+     */
+    LightGallery.prototype.slide = function (index, fromTouch, fromThumb, direction) {
+        var _this = this;
+        var prevIndex = this.getPreviousSlideIndex();
+        this.currentItemsInDom = this.organizeSlideItems(index, prevIndex);
+        // Prevent multiple call, Required for hsh plugin
+        if (this.lGalleryOn && prevIndex === index) {
+            return;
+        }
+        var numberOfGalleryItems = this.galleryItems.length;
+        if (!this.lgBusy) {
+            if (this.settings.counter) {
+                this.updateCurrentCounter(index);
+            }
+            var currentSlideItem = this.getSlideItem(index);
+            var previousSlideItem_1 = this.getSlideItem(prevIndex);
+            var currentGalleryItem = this.galleryItems[index];
+            var videoInfo = currentGalleryItem.__slideVideoInfo;
+            this.outer.attr('data-lg-slide-type', this.getSlideType(currentGalleryItem));
+            this.setDownloadValue(index);
+            if (videoInfo) {
+                var _a = this.mediaContainerPosition, top_3 = _a.top, bottom = _a.bottom;
+                var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom, videoInfo && this.settings.videoMaxSize);
+                this.resizeVideoSlide(index, videoSize);
+            }
+            this.LGel.trigger(lGEvents.beforeSlide, {
+                prevIndex: prevIndex,
+                index: index,
+                fromTouch: !!fromTouch,
+                fromThumb: !!fromThumb,
+            });
+            this.lgBusy = true;
+            clearTimeout(this.hideBarTimeout);
+            this.arrowDisable(index);
+            if (!direction) {
+                if (index < prevIndex) {
+                    direction = 'prev';
+                }
+                else if (index > prevIndex) {
+                    direction = 'next';
+                }
+            }
+            if (!fromTouch) {
+                this.makeSlideAnimation(direction, currentSlideItem, previousSlideItem_1);
+            }
+            else {
+                this.outer
+                    .find('.lg-item')
+                    .removeClass('lg-prev-slide lg-current lg-next-slide');
+                var touchPrev = void 0;
+                var touchNext = void 0;
+                if (numberOfGalleryItems > 2) {
+                    touchPrev = index - 1;
+                    touchNext = index + 1;
+                    if (index === 0 && prevIndex === numberOfGalleryItems - 1) {
+                        // next slide
+                        touchNext = 0;
+                        touchPrev = numberOfGalleryItems - 1;
+                    }
+                    else if (index === numberOfGalleryItems - 1 &&
+                        prevIndex === 0) {
+                        // prev slide
+                        touchNext = 0;
+                        touchPrev = numberOfGalleryItems - 1;
+                    }
+                }
+                else {
+                    touchPrev = 0;
+                    touchNext = 1;
+                }
+                if (direction === 'prev') {
+                    this.getSlideItem(touchNext).addClass('lg-next-slide');
+                }
+                else {
+                    this.getSlideItem(touchPrev).addClass('lg-prev-slide');
+                }
+                currentSlideItem.addClass('lg-current');
+            }
+            // Do not put load content in set timeout as it needs to load immediately when the gallery is opened
+            if (!this.lGalleryOn) {
+                this.loadContent(index, true);
+            }
+            else {
+                setTimeout(function () {
+                    _this.loadContent(index, true);
+                    // Add title if this.settings.appendSubHtmlTo === lg-sub-html
+                    if (_this.settings.appendSubHtmlTo !== '.lg-item') {
+                        _this.addHtml(index);
+                    }
+                }, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay));
+            }
+            setTimeout(function () {
+                _this.lgBusy = false;
+                previousSlideItem_1.removeClass('lg-slide-progress');
+                _this.LGel.trigger(lGEvents.afterSlide, {
+                    prevIndex: prevIndex,
+                    index: index,
+                    fromTouch: fromTouch,
+                    fromThumb: fromThumb,
+                });
+            }, (this.lGalleryOn ? this.settings.speed + 100 : 100) + (fromTouch ? 0 : this.settings.slideDelay));
+        }
+        this.index = index;
+    };
+    LightGallery.prototype.updateCurrentCounter = function (index) {
+        this.getElementById('lg-counter-current').html(index + 1 + '');
+    };
+    LightGallery.prototype.updateCounterTotal = function () {
+        this.getElementById('lg-counter-all').html(this.galleryItems.length + '');
+    };
+    LightGallery.prototype.getSlideType = function (item) {
+        if (item.__slideVideoInfo) {
+            return 'video';
+        }
+        else if (item.iframe) {
+            return 'iframe';
+        }
+        else {
+            return 'image';
+        }
+    };
+    LightGallery.prototype.touchMove = function (startCoords, endCoords, e) {
+        var distanceX = endCoords.pageX - startCoords.pageX;
+        var distanceY = endCoords.pageY - startCoords.pageY;
+        var allowSwipe = false;
+        if (this.swipeDirection) {
+            allowSwipe = true;
+        }
+        else {
+            if (Math.abs(distanceX) > 15) {
+                this.swipeDirection = 'horizontal';
+                allowSwipe = true;
+            }
+            else if (Math.abs(distanceY) > 15) {
+                this.swipeDirection = 'vertical';
+                allowSwipe = true;
+            }
+        }
+        if (!allowSwipe) {
+            return;
+        }
+        var $currentSlide = this.getSlideItem(this.index);
+        if (this.swipeDirection === 'horizontal') {
+            e === null || e === void 0 ? void 0 : e.preventDefault();
+            // reset opacity and transition duration
+            this.outer.addClass('lg-dragging');
+            // move current slide
+            this.setTranslate($currentSlide, distanceX, 0);
+            // move next and prev slide with current slide
+            var width = $currentSlide.get().offsetWidth;
+            var slideWidthAmount = (width * 15) / 100;
+            var gutter = slideWidthAmount - Math.abs((distanceX * 10) / 100);
+            this.setTranslate(this.outer.find('.lg-prev-slide').first(), -width + distanceX - gutter, 0);
+            this.setTranslate(this.outer.find('.lg-next-slide').first(), width + distanceX + gutter, 0);
+        }
+        else if (this.swipeDirection === 'vertical') {
+            if (this.settings.swipeToClose) {
+                e === null || e === void 0 ? void 0 : e.preventDefault();
+                this.$container.addClass('lg-dragging-vertical');
+                var opacity = 1 - Math.abs(distanceY) / window.innerHeight;
+                this.$backdrop.css('opacity', opacity);
+                var scale = 1 - Math.abs(distanceY) / (window.innerWidth * 2);
+                this.setTranslate($currentSlide, 0, distanceY, scale, scale);
+                if (Math.abs(distanceY) > 100) {
+                    this.outer
+                        .addClass('lg-hide-items')
+                        .removeClass('lg-components-open');
+                }
+            }
+        }
+    };
+    LightGallery.prototype.touchEnd = function (endCoords, startCoords, event) {
+        var _this = this;
+        var distance;
+        // keep slide animation for any mode while dragg/swipe
+        if (this.settings.mode !== 'lg-slide') {
+            this.outer.addClass('lg-slide');
+        }
+        // set transition duration
+        setTimeout(function () {
+            _this.$container.removeClass('lg-dragging-vertical');
+            _this.outer
+                .removeClass('lg-dragging lg-hide-items')
+                .addClass('lg-components-open');
+            var triggerClick = true;
+            if (_this.swipeDirection === 'horizontal') {
+                distance = endCoords.pageX - startCoords.pageX;
+                var distanceAbs = Math.abs(endCoords.pageX - startCoords.pageX);
+                if (distance < 0 &&
+                    distanceAbs > _this.settings.swipeThreshold) {
+                    _this.goToNextSlide(true);
+                    triggerClick = false;
+                }
+                else if (distance > 0 &&
+                    distanceAbs > _this.settings.swipeThreshold) {
+                    _this.goToPrevSlide(true);
+                    triggerClick = false;
+                }
+            }
+            else if (_this.swipeDirection === 'vertical') {
+                distance = Math.abs(endCoords.pageY - startCoords.pageY);
+                if (_this.settings.closable &&
+                    _this.settings.swipeToClose &&
+                    distance > 100) {
+                    _this.closeGallery();
+                    return;
+                }
+                else {
+                    _this.$backdrop.css('opacity', 1);
+                }
+            }
+            _this.outer.find('.lg-item').removeAttr('style');
+            if (triggerClick &&
+                Math.abs(endCoords.pageX - startCoords.pageX) < 5) {
+                // Trigger click if distance is less than 5 pix
+                var target = $LG(event.target);
+                if (_this.isPosterElement(target)) {
+                    _this.LGel.trigger(lGEvents.posterClick);
+                }
+            }
+            _this.swipeDirection = undefined;
+        });
+        // remove slide class once drag/swipe is completed if mode is not slide
+        setTimeout(function () {
+            if (!_this.outer.hasClass('lg-dragging') &&
+                _this.settings.mode !== 'lg-slide') {
+                _this.outer.removeClass('lg-slide');
+            }
+        }, this.settings.speed + 100);
+    };
+    LightGallery.prototype.enableSwipe = function () {
+        var _this = this;
+        var startCoords = {};
+        var endCoords = {};
+        var isMoved = false;
+        var isSwiping = false;
+        if (this.settings.enableSwipe) {
+            this.$inner.on('touchstart.lg', function (e) {
+                _this.dragOrSwipeEnabled = true;
+                var $item = _this.getSlideItem(_this.index);
+                if (($LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target)) &&
+                    !_this.outer.hasClass('lg-zoomed') &&
+                    !_this.lgBusy &&
+                    e.targetTouches.length === 1) {
+                    isSwiping = true;
+                    _this.touchAction = 'swipe';
+                    _this.manageSwipeClass();
+                    startCoords = {
+                        pageX: e.targetTouches[0].pageX,
+                        pageY: e.targetTouches[0].pageY,
+                    };
+                }
+            });
+            this.$inner.on('touchmove.lg', function (e) {
+                if (isSwiping &&
+                    _this.touchAction === 'swipe' &&
+                    e.targetTouches.length === 1) {
+                    endCoords = {
+                        pageX: e.targetTouches[0].pageX,
+                        pageY: e.targetTouches[0].pageY,
+                    };
+                    _this.touchMove(startCoords, endCoords, e);
+                    isMoved = true;
+                }
+            });
+            this.$inner.on('touchend.lg', function (event) {
+                if (_this.touchAction === 'swipe') {
+                    if (isMoved) {
+                        isMoved = false;
+                        _this.touchEnd(endCoords, startCoords, event);
+                    }
+                    else if (isSwiping) {
+                        var target = $LG(event.target);
+                        if (_this.isPosterElement(target)) {
+                            _this.LGel.trigger(lGEvents.posterClick);
+                        }
+                    }
+                    _this.touchAction = undefined;
+                    isSwiping = false;
+                }
+            });
+        }
+    };
+    LightGallery.prototype.enableDrag = function () {
+        var _this = this;
+        var startCoords = {};
+        var endCoords = {};
+        var isDraging = false;
+        var isMoved = false;
+        if (this.settings.enableDrag) {
+            this.outer.on('mousedown.lg', function (e) {
+                _this.dragOrSwipeEnabled = true;
+                var $item = _this.getSlideItem(_this.index);
+                if ($LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target)) {
+                    if (!_this.outer.hasClass('lg-zoomed') && !_this.lgBusy) {
+                        e.preventDefault();
+                        if (!_this.lgBusy) {
+                            _this.manageSwipeClass();
+                            startCoords = {
+                                pageX: e.pageX,
+                                pageY: e.pageY,
+                            };
+                            isDraging = true;
+                            // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+                            _this.outer.get().scrollLeft += 1;
+                            _this.outer.get().scrollLeft -= 1;
+                            // *
+                            _this.outer
+                                .removeClass('lg-grab')
+                                .addClass('lg-grabbing');
+                            _this.LGel.trigger(lGEvents.dragStart);
+                        }
+                    }
+                }
+            });
+            $LG(window).on("mousemove.lg.global" + this.lgId, function (e) {
+                if (isDraging && _this.lgOpened) {
+                    isMoved = true;
+                    endCoords = {
+                        pageX: e.pageX,
+                        pageY: e.pageY,
+                    };
+                    _this.touchMove(startCoords, endCoords);
+                    _this.LGel.trigger(lGEvents.dragMove);
+                }
+            });
+            $LG(window).on("mouseup.lg.global" + this.lgId, function (event) {
+                if (!_this.lgOpened) {
+                    return;
+                }
+                var target = $LG(event.target);
+                if (isMoved) {
+                    isMoved = false;
+                    _this.touchEnd(endCoords, startCoords, event);
+                    _this.LGel.trigger(lGEvents.dragEnd);
+                }
+                else if (_this.isPosterElement(target)) {
+                    _this.LGel.trigger(lGEvents.posterClick);
+                }
+                // Prevent execution on click
+                if (isDraging) {
+                    isDraging = false;
+                    _this.outer.removeClass('lg-grabbing').addClass('lg-grab');
+                }
+            });
+        }
+    };
+    LightGallery.prototype.triggerPosterClick = function () {
+        var _this = this;
+        this.$inner.on('click.lg', function (event) {
+            if (!_this.dragOrSwipeEnabled &&
+                _this.isPosterElement($LG(event.target))) {
+                _this.LGel.trigger(lGEvents.posterClick);
+            }
+        });
+    };
+    LightGallery.prototype.manageSwipeClass = function () {
+        var _touchNext = this.index + 1;
+        var _touchPrev = this.index - 1;
+        if (this.settings.loop && this.galleryItems.length > 2) {
+            if (this.index === 0) {
+                _touchPrev = this.galleryItems.length - 1;
+            }
+            else if (this.index === this.galleryItems.length - 1) {
+                _touchNext = 0;
+            }
+        }
+        this.outer.find('.lg-item').removeClass('lg-next-slide lg-prev-slide');
+        if (_touchPrev > -1) {
+            this.getSlideItem(_touchPrev).addClass('lg-prev-slide');
+        }
+        this.getSlideItem(_touchNext).addClass('lg-next-slide');
+    };
+    /**
+     * Go to next slide
+     * @param {Boolean} fromTouch - true if slide function called via touch event
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  plugin.goToNextSlide();
+     * @see <a href="/demos/methods/">Demo</a>
+     */
+    LightGallery.prototype.goToNextSlide = function (fromTouch) {
+        var _this = this;
+        var _loop = this.settings.loop;
+        if (fromTouch && this.galleryItems.length < 3) {
+            _loop = false;
+        }
+        if (!this.lgBusy) {
+            if (this.index + 1 < this.galleryItems.length) {
+                this.index++;
+                this.LGel.trigger(lGEvents.beforeNextSlide, {
+                    index: this.index,
+                });
+                this.slide(this.index, !!fromTouch, false, 'next');
+            }
+            else {
+                if (_loop) {
+                    this.index = 0;
+                    this.LGel.trigger(lGEvents.beforeNextSlide, {
+                        index: this.index,
+                    });
+                    this.slide(this.index, !!fromTouch, false, 'next');
+                }
+                else if (this.settings.slideEndAnimation && !fromTouch) {
+                    this.outer.addClass('lg-right-end');
+                    setTimeout(function () {
+                        _this.outer.removeClass('lg-right-end');
+                    }, 400);
+                }
+            }
+        }
+    };
+    /**
+     * Go to previous slides
+     * @param {Boolean} fromTouch - true if slide function called via touch event
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery({});
+     *  plugin.goToPrevSlide();
+     * @see <a href="/demos/methods/">Demo</a>
+     *
+     */
+    LightGallery.prototype.goToPrevSlide = function (fromTouch) {
+        var _this = this;
+        var _loop = this.settings.loop;
+        if (fromTouch && this.galleryItems.length < 3) {
+            _loop = false;
+        }
+        if (!this.lgBusy) {
+            if (this.index > 0) {
+                this.index--;
+                this.LGel.trigger(lGEvents.beforePrevSlide, {
+                    index: this.index,
+                    fromTouch: fromTouch,
+                });
+                this.slide(this.index, !!fromTouch, false, 'prev');
+            }
+            else {
+                if (_loop) {
+                    this.index = this.galleryItems.length - 1;
+                    this.LGel.trigger(lGEvents.beforePrevSlide, {
+                        index: this.index,
+                        fromTouch: fromTouch,
+                    });
+                    this.slide(this.index, !!fromTouch, false, 'prev');
+                }
+                else if (this.settings.slideEndAnimation && !fromTouch) {
+                    this.outer.addClass('lg-left-end');
+                    setTimeout(function () {
+                        _this.outer.removeClass('lg-left-end');
+                    }, 400);
+                }
+            }
+        }
+    };
+    LightGallery.prototype.keyPress = function () {
+        var _this = this;
+        $LG(window).on("keydown.lg.global" + this.lgId, function (e) {
+            if (_this.lgOpened &&
+                _this.settings.escKey === true &&
+                e.keyCode === 27) {
+                e.preventDefault();
+                if (_this.settings.allowMediaOverlap &&
+                    _this.outer.hasClass('lg-can-toggle') &&
+                    _this.outer.hasClass('lg-components-open')) {
+                    _this.outer.removeClass('lg-components-open');
+                }
+                else {
+                    _this.closeGallery();
+                }
+            }
+            if (_this.lgOpened && _this.galleryItems.length > 1) {
+                if (e.keyCode === 37) {
+                    e.preventDefault();
+                    _this.goToPrevSlide();
+                }
+                if (e.keyCode === 39) {
+                    e.preventDefault();
+                    _this.goToNextSlide();
+                }
+            }
+        });
+    };
+    LightGallery.prototype.arrow = function () {
+        var _this = this;
+        this.getElementById('lg-prev').on('click.lg', function () {
+            _this.goToPrevSlide();
+        });
+        this.getElementById('lg-next').on('click.lg', function () {
+            _this.goToNextSlide();
+        });
+    };
+    LightGallery.prototype.arrowDisable = function (index) {
+        // Disable arrows if settings.hideControlOnEnd is true
+        if (!this.settings.loop && this.settings.hideControlOnEnd) {
+            var $prev = this.getElementById('lg-prev');
+            var $next = this.getElementById('lg-next');
+            if (index + 1 === this.galleryItems.length) {
+                $next.attr('disabled', 'disabled').addClass('disabled');
+            }
+            else {
+                $next.removeAttr('disabled').removeClass('disabled');
+            }
+            if (index === 0) {
+                $prev.attr('disabled', 'disabled').addClass('disabled');
+            }
+            else {
+                $prev.removeAttr('disabled').removeClass('disabled');
+            }
+        }
+    };
+    LightGallery.prototype.setTranslate = function ($el, xValue, yValue, scaleX, scaleY) {
+        if (scaleX === void 0) { scaleX = 1; }
+        if (scaleY === void 0) { scaleY = 1; }
+        $el.css('transform', 'translate3d(' +
+            xValue +
+            'px, ' +
+            yValue +
+            'px, 0px) scale3d(' +
+            scaleX +
+            ', ' +
+            scaleY +
+            ', 1)');
+    };
+    LightGallery.prototype.mousewheel = function () {
+        var _this = this;
+        var lastCall = 0;
+        this.outer.on('wheel.lg', function (e) {
+            if (!e.deltaY || _this.galleryItems.length < 2) {
+                return;
+            }
+            e.preventDefault();
+            var now = new Date().getTime();
+            if (now - lastCall < 1000) {
+                return;
+            }
+            lastCall = now;
+            if (e.deltaY > 0) {
+                _this.goToNextSlide();
+            }
+            else if (e.deltaY < 0) {
+                _this.goToPrevSlide();
+            }
+        });
+    };
+    LightGallery.prototype.isSlideElement = function (target) {
+        return (target.hasClass('lg-outer') ||
+            target.hasClass('lg-item') ||
+            target.hasClass('lg-img-wrap'));
+    };
+    LightGallery.prototype.isPosterElement = function (target) {
+        var playButton = this.getSlideItem(this.index)
+            .find('.lg-video-play-button')
+            .get();
+        return (target.hasClass('lg-video-poster') ||
+            target.hasClass('lg-video-play-button') ||
+            (playButton && playButton.contains(target.get())));
+    };
+    /**
+     * Maximize minimize inline gallery.
+     * @category lGPublicMethods
+     */
+    LightGallery.prototype.toggleMaximize = function () {
+        var _this = this;
+        this.getElementById('lg-maximize').on('click.lg', function () {
+            _this.$container.toggleClass('lg-inline');
+            _this.refreshOnResize();
+        });
+    };
+    LightGallery.prototype.invalidateItems = function () {
+        for (var index = 0; index < this.items.length; index++) {
+            var element = this.items[index];
+            var $element = $LG(element);
+            $element.off("click.lgcustom-item-" + $element.attr('data-lg-id'));
+        }
+    };
+    LightGallery.prototype.manageCloseGallery = function () {
+        var _this = this;
+        if (!this.settings.closable)
+            return;
+        var mousedown = false;
+        this.getElementById('lg-close').on('click.lg', function () {
+            _this.closeGallery();
+        });
+        if (this.settings.closeOnTap) {
+            // If you drag the slide and release outside gallery gets close on chrome
+            // for preventing this check mousedown and mouseup happened on .lg-item or lg-outer
+            this.outer.on('mousedown.lg', function (e) {
+                var target = $LG(e.target);
+                if (_this.isSlideElement(target)) {
+                    mousedown = true;
+                }
+                else {
+                    mousedown = false;
+                }
+            });
+            this.outer.on('mousemove.lg', function () {
+                mousedown = false;
+            });
+            this.outer.on('mouseup.lg', function (e) {
+                var target = $LG(e.target);
+                if (_this.isSlideElement(target) && mousedown) {
+                    if (!_this.outer.hasClass('lg-dragging')) {
+                        _this.closeGallery();
+                    }
+                }
+            });
+        }
+    };
+    /**
+     * Close lightGallery if it is opened.
+     *
+     * @description If closable is false in the settings, you need to pass true via closeGallery method to force close gallery
+     * @return returns the estimated time to close gallery completely including the close animation duration
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  plugin.closeGallery();
+     *
+     */
+    LightGallery.prototype.closeGallery = function (force) {
+        var _this = this;
+        if (!this.lgOpened || (!this.settings.closable && !force)) {
+            return 0;
+        }
+        this.LGel.trigger(lGEvents.beforeClose);
+        $LG(window).scrollTop(this.prevScrollTop);
+        var currentItem = this.items[this.index];
+        var transform;
+        if (this.zoomFromOrigin && currentItem) {
+            var _a = this.mediaContainerPosition, top_4 = _a.top, bottom = _a.bottom;
+            var _b = this.galleryItems[this.index], __slideVideoInfo = _b.__slideVideoInfo, poster = _b.poster;
+            var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo && poster && this.settings.videoMaxSize);
+            transform = utils.getTransform(currentItem, this.outer, top_4, bottom, imageSize);
+        }
+        if (this.zoomFromOrigin && transform) {
+            this.outer.addClass('lg-closing lg-zoom-from-image');
+            this.getSlideItem(this.index)
+                .addClass('lg-start-end-progress')
+                .css('transition-duration', this.settings.startAnimationDuration + 'ms')
+                .css('transform', transform);
+        }
+        else {
+            this.outer.addClass('lg-hide-items');
+            // lg-zoom-from-image is used for setting the opacity to 1 if zoomFromOrigin is true
+            // If the closing item doesn't have the lg-size attribute, remove this class to avoid the closing css conflicts
+            this.outer.removeClass('lg-zoom-from-image');
+        }
+        // Unbind all events added by lightGallery
+        // @todo
+        //this.$el.off('.lg.tm');
+        this.destroyModules();
+        this.lGalleryOn = false;
+        this.isDummyImageRemoved = false;
+        this.zoomFromOrigin = this.settings.zoomFromOrigin;
+        clearTimeout(this.hideBarTimeout);
+        this.hideBarTimeout = false;
+        $LG('html').removeClass('lg-on');
+        this.outer.removeClass('lg-visible lg-components-open');
+        // Resetting opacity to 0 isd required as  vertical swipe to close function adds inline opacity.
+        this.$backdrop.removeClass('in').css('opacity', 0);
+        var removeTimeout = this.zoomFromOrigin && transform
+            ? Math.max(this.settings.startAnimationDuration, this.settings.backdropDuration)
+            : this.settings.backdropDuration;
+        this.$container.removeClass('lg-show-in');
+        // Once the closign animation is completed and gallery is invisible
+        setTimeout(function () {
+            if (_this.zoomFromOrigin && transform) {
+                _this.outer.removeClass('lg-zoom-from-image');
+            }
+            _this.$container.removeClass('lg-show');
+            // Need to remove inline opacity as it is used in the stylesheet as well
+            _this.$backdrop
+                .removeAttr('style')
+                .css('transition-duration', _this.settings.backdropDuration + 'ms');
+            _this.outer.removeClass("lg-closing " + _this.settings.startClass);
+            _this.getSlideItem(_this.index).removeClass('lg-start-end-progress');
+            _this.$inner.empty();
+            if (_this.lgOpened) {
+                _this.LGel.trigger(lGEvents.afterClose, {
+                    instance: _this,
+                });
+            }
+            if (_this.outer.get()) {
+                _this.outer.get().blur();
+            }
+            _this.lgOpened = false;
+        }, removeTimeout + 100);
+        return removeTimeout + 100;
+    };
+    LightGallery.prototype.initModules = function () {
+        this.plugins.forEach(function (module) {
+            try {
+                module.init();
+            }
+            catch (err) {
+                console.warn("lightGallery:- make sure lightGallery module is properly initiated");
+            }
+        });
+    };
+    LightGallery.prototype.destroyModules = function (destroy) {
+        this.plugins.forEach(function (module) {
+            try {
+                if (destroy) {
+                    module.destroy();
+                }
+                else {
+                    module.closeGallery && module.closeGallery();
+                }
+            }
+            catch (err) {
+                console.warn("lightGallery:- make sure lightGallery module is properly destroyed");
+            }
+        });
+    };
+    /**
+     * Refresh lightGallery with new set of children.
+     *
+     * @description This is useful to update the gallery when the child elements are changed without calling destroy method.
+     *
+     * If you are using dynamic mode, you can pass the modified array of dynamicEl as the first parameter to refresh the dynamic gallery
+     * @see <a href="/demos/dynamic-mode/">Demo</a>
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  // Delete or add children, then call
+     *  plugin.refresh();
+     *
+     */
+    LightGallery.prototype.refresh = function (galleryItems) {
+        if (!this.settings.dynamic) {
+            this.invalidateItems();
+        }
+        if (galleryItems) {
+            this.galleryItems = galleryItems;
+        }
+        else {
+            this.galleryItems = this.getItems();
+        }
+        this.updateControls();
+        this.openGalleryOnItemClick();
+        this.LGel.trigger(lGEvents.updateSlides);
+    };
+    LightGallery.prototype.updateControls = function () {
+        this.addSlideVideoInfo(this.galleryItems);
+        this.updateCounterTotal();
+        this.manageSingleSlideClassName();
+    };
+    /**
+     * Destroy lightGallery.
+     * Destroy lightGallery and its plugin instances completely
+     *
+     * @description This method also calls CloseGallery function internally. Returns the time takes to completely close and destroy the instance.
+     * In case if you want to re-initialize lightGallery right after destroying it, initialize it only once the destroy process is completed.
+     * You can use refresh method most of the times.
+     * @category lGPublicMethods
+     * @example
+     *  const plugin = lightGallery();
+     *  plugin.destroy();
+     *
+     */
+    LightGallery.prototype.destroy = function () {
+        var _this = this;
+        var closeTimeout = this.closeGallery(true);
+        setTimeout(function () {
+            _this.destroyModules(true);
+            if (!_this.settings.dynamic) {
+                _this.invalidateItems();
+            }
+            $LG(window).off(".lg.global" + _this.lgId);
+            _this.LGel.off('.lg');
+            _this.$container.remove();
+        }, closeTimeout);
+        return closeTimeout;
+    };
+    return LightGallery;
+}());
+
+function lightGallery(el, options) {
+    return new LightGallery(el, options);
+}
+
+export default lightGallery;
+//# sourceMappingURL=lightgallery.es5.js.map

res/js/lightgallery.umd.js

@@ -0,0 +1,2656 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lightGallery = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var lightGalleryCoreSettings = {
+        mode: 'lg-slide',
+        easing: 'ease',
+        speed: 400,
+        licenseKey: '0000-0000-000-0000',
+        height: '100%',
+        width: '100%',
+        addClass: '',
+        startClass: 'lg-start-zoom',
+        backdropDuration: 300,
+        container: '',
+        startAnimationDuration: 400,
+        zoomFromOrigin: true,
+        hideBarsDelay: 0,
+        showBarsAfter: 10000,
+        slideDelay: 0,
+        supportLegacyBrowser: true,
+        allowMediaOverlap: false,
+        videoMaxSize: '1280-720',
+        loadYouTubePoster: true,
+        defaultCaptionHeight: 0,
+        ariaLabelledby: '',
+        ariaDescribedby: '',
+        closable: true,
+        swipeToClose: true,
+        closeOnTap: true,
+        showCloseIcon: true,
+        showMaximizeIcon: false,
+        loop: true,
+        escKey: true,
+        keyPress: true,
+        controls: true,
+        slideEndAnimation: true,
+        hideControlOnEnd: false,
+        mousewheel: false,
+        getCaptionFromTitleOrAlt: true,
+        appendSubHtmlTo: '.lg-sub-html',
+        subHtmlSelectorRelative: false,
+        preload: 2,
+        numberOfSlideItemsInDom: 10,
+        selector: '',
+        selectWithin: '',
+        nextHtml: '',
+        prevHtml: '',
+        index: 0,
+        iframeWidth: '100%',
+        iframeHeight: '100%',
+        iframeMaxWidth: '100%',
+        iframeMaxHeight: '100%',
+        download: true,
+        counter: true,
+        appendCounterTo: '.lg-toolbar',
+        swipeThreshold: 50,
+        enableSwipe: true,
+        enableDrag: true,
+        dynamic: false,
+        dynamicEl: [],
+        extraProps: [],
+        exThumbImage: '',
+        isMobile: undefined,
+        mobileSettings: {
+            controls: false,
+            showCloseIcon: false,
+            download: false,
+        },
+        plugins: [],
+        strings: {
+            closeGallery: 'Close gallery',
+            toggleMaximize: 'Toggle maximize',
+            previousSlide: 'Previous slide',
+            nextSlide: 'Next slide',
+            download: 'Download',
+            playVideo: 'Play video',
+        },
+    };
+
+    function initLgPolyfills() {
+        (function () {
+            if (typeof window.CustomEvent === 'function')
+                return false;
+            function CustomEvent(event, params) {
+                params = params || {
+                    bubbles: false,
+                    cancelable: false,
+                    detail: null,
+                };
+                var evt = document.createEvent('CustomEvent');
+                evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+                return evt;
+            }
+            window.CustomEvent = CustomEvent;
+        })();
+        (function () {
+            if (!Element.prototype.matches) {
+                Element.prototype.matches =
+                    Element.prototype.msMatchesSelector ||
+                        Element.prototype.webkitMatchesSelector;
+            }
+        })();
+    }
+    var lgQuery = /** @class */ (function () {
+        function lgQuery(selector) {
+            this.cssVenderPrefixes = [
+                'TransitionDuration',
+                'TransitionTimingFunction',
+                'Transform',
+                'Transition',
+            ];
+            this.selector = this._getSelector(selector);
+            this.firstElement = this._getFirstEl();
+            return this;
+        }
+        lgQuery.generateUUID = function () {
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+                return v.toString(16);
+            });
+        };
+        lgQuery.prototype._getSelector = function (selector, context) {
+            if (context === void 0) { context = document; }
+            if (typeof selector !== 'string') {
+                return selector;
+            }
+            context = context || document;
+            var fl = selector.substring(0, 1);
+            if (fl === '#') {
+                return context.querySelector(selector);
+            }
+            else {
+                return context.querySelectorAll(selector);
+            }
+        };
+        lgQuery.prototype._each = function (func) {
+            if (!this.selector) {
+                return this;
+            }
+            if (this.selector.length !== undefined) {
+                [].forEach.call(this.selector, func);
+            }
+            else {
+                func(this.selector, 0);
+            }
+            return this;
+        };
+        lgQuery.prototype._setCssVendorPrefix = function (el, cssProperty, value) {
+            // prettier-ignore
+            var property = cssProperty.replace(/-([a-z])/gi, function (s, group1) {
+                return group1.toUpperCase();
+            });
+            if (this.cssVenderPrefixes.indexOf(property) !== -1) {
+                el.style[property.charAt(0).toLowerCase() + property.slice(1)] = value;
+                el.style['webkit' + property] = value;
+                el.style['moz' + property] = value;
+                el.style['ms' + property] = value;
+                el.style['o' + property] = value;
+            }
+            else {
+                el.style[property] = value;
+            }
+        };
+        lgQuery.prototype._getFirstEl = function () {
+            if (this.selector && this.selector.length !== undefined) {
+                return this.selector[0];
+            }
+            else {
+                return this.selector;
+            }
+        };
+        lgQuery.prototype.isEventMatched = function (event, eventName) {
+            var eventNamespace = eventName.split('.');
+            return event
+                .split('.')
+                .filter(function (e) { return e; })
+                .every(function (e) {
+                return eventNamespace.indexOf(e) !== -1;
+            });
+        };
+        lgQuery.prototype.attr = function (attr, value) {
+            if (value === undefined) {
+                if (!this.firstElement) {
+                    return '';
+                }
+                return this.firstElement.getAttribute(attr);
+            }
+            this._each(function (el) {
+                el.setAttribute(attr, value);
+            });
+            return this;
+        };
+        lgQuery.prototype.find = function (selector) {
+            return $LG(this._getSelector(selector, this.selector));
+        };
+        lgQuery.prototype.first = function () {
+            if (this.selector && this.selector.length !== undefined) {
+                return $LG(this.selector[0]);
+            }
+            else {
+                return $LG(this.selector);
+            }
+        };
+        lgQuery.prototype.eq = function (index) {
+            return $LG(this.selector[index]);
+        };
+        lgQuery.prototype.parent = function () {
+            return $LG(this.selector.parentElement);
+        };
+        lgQuery.prototype.get = function () {
+            return this._getFirstEl();
+        };
+        lgQuery.prototype.removeAttr = function (attributes) {
+            var attrs = attributes.split(' ');
+            this._each(function (el) {
+                attrs.forEach(function (attr) { return el.removeAttribute(attr); });
+            });
+            return this;
+        };
+        lgQuery.prototype.wrap = function (className) {
+            if (!this.firstElement) {
+                return this;
+            }
+            var wrapper = document.createElement('div');
+            wrapper.className = className;
+            this.firstElement.parentNode.insertBefore(wrapper, this.firstElement);
+            this.firstElement.parentNode.removeChild(this.firstElement);
+            wrapper.appendChild(this.firstElement);
+            return this;
+        };
+        lgQuery.prototype.addClass = function (classNames) {
+            if (classNames === void 0) { classNames = ''; }
+            this._each(function (el) {
+                // IE doesn't support multiple arguments
+                classNames.split(' ').forEach(function (className) {
+                    if (className) {
+                        el.classList.add(className);
+                    }
+                });
+            });
+            return this;
+        };
+        lgQuery.prototype.removeClass = function (classNames) {
+            this._each(function (el) {
+                // IE doesn't support multiple arguments
+                classNames.split(' ').forEach(function (className) {
+                    if (className) {
+                        el.classList.remove(className);
+                    }
+                });
+            });
+            return this;
+        };
+        lgQuery.prototype.hasClass = function (className) {
+            if (!this.firstElement) {
+                return false;
+            }
+            return this.firstElement.classList.contains(className);
+        };
+        lgQuery.prototype.hasAttribute = function (attribute) {
+            if (!this.firstElement) {
+                return false;
+            }
+            return this.firstElement.hasAttribute(attribute);
+        };
+        lgQuery.prototype.toggleClass = function (className) {
+            if (!this.firstElement) {
+                return this;
+            }
+            if (this.hasClass(className)) {
+                this.removeClass(className);
+            }
+            else {
+                this.addClass(className);
+            }
+            return this;
+        };
+        lgQuery.prototype.css = function (property, value) {
+            var _this = this;
+            this._each(function (el) {
+                _this._setCssVendorPrefix(el, property, value);
+            });
+            return this;
+        };
+        // Need to pass separate namespaces for separate elements
+        lgQuery.prototype.on = function (events, listener) {
+            var _this = this;
+            if (!this.selector) {
+                return this;
+            }
+            events.split(' ').forEach(function (event) {
+                if (!Array.isArray(lgQuery.eventListeners[event])) {
+                    lgQuery.eventListeners[event] = [];
+                }
+                lgQuery.eventListeners[event].push(listener);
+                _this.selector.addEventListener(event.split('.')[0], listener);
+            });
+            return this;
+        };
+        // @todo - test this
+        lgQuery.prototype.once = function (event, listener) {
+            var _this = this;
+            this.on(event, function () {
+                _this.off(event);
+                listener(event);
+            });
+            return this;
+        };
+        lgQuery.prototype.off = function (event) {
+            var _this = this;
+            if (!this.selector) {
+                return this;
+            }
+            Object.keys(lgQuery.eventListeners).forEach(function (eventName) {
+                if (_this.isEventMatched(event, eventName)) {
+                    lgQuery.eventListeners[eventName].forEach(function (listener) {
+                        _this.selector.removeEventListener(eventName.split('.')[0], listener);
+                    });
+                    lgQuery.eventListeners[eventName] = [];
+                }
+            });
+            return this;
+        };
+        lgQuery.prototype.trigger = function (event, detail) {
+            if (!this.firstElement) {
+                return this;
+            }
+            var customEvent = new CustomEvent(event.split('.')[0], {
+                detail: detail || null,
+            });
+            this.firstElement.dispatchEvent(customEvent);
+            return this;
+        };
+        // Does not support IE
+        lgQuery.prototype.load = function (url) {
+            var _this = this;
+            fetch(url).then(function (res) {
+                _this.selector.innerHTML = res;
+            });
+            return this;
+        };
+        lgQuery.prototype.html = function (html) {
+            if (html === undefined) {
+                if (!this.firstElement) {
+                    return '';
+                }
+                return this.firstElement.innerHTML;
+            }
+            this._each(function (el) {
+                el.innerHTML = html;
+            });
+            return this;
+        };
+        lgQuery.prototype.append = function (html) {
+            this._each(function (el) {
+                if (typeof html === 'string') {
+                    el.insertAdjacentHTML('beforeend', html);
+                }
+                else {
+                    el.appendChild(html);
+                }
+            });
+            return this;
+        };
+        lgQuery.prototype.prepend = function (html) {
+            this._each(function (el) {
+                el.insertAdjacentHTML('afterbegin', html);
+            });
+            return this;
+        };
+        lgQuery.prototype.remove = function () {
+            this._each(function (el) {
+                el.parentNode.removeChild(el);
+            });
+            return this;
+        };
+        lgQuery.prototype.empty = function () {
+            this._each(function (el) {
+                el.innerHTML = '';
+            });
+            return this;
+        };
+        lgQuery.prototype.scrollTop = function (scrollTop) {
+            if (scrollTop !== undefined) {
+                document.body.scrollTop = scrollTop;
+                document.documentElement.scrollTop = scrollTop;
+                return this;
+            }
+            else {
+                return (window.pageYOffset ||
+                    document.documentElement.scrollTop ||
+                    document.body.scrollTop ||
+                    0);
+            }
+        };
+        lgQuery.prototype.scrollLeft = function (scrollLeft) {
+            if (scrollLeft !== undefined) {
+                document.body.scrollLeft = scrollLeft;
+                document.documentElement.scrollLeft = scrollLeft;
+                return this;
+            }
+            else {
+                return (window.pageXOffset ||
+                    document.documentElement.scrollLeft ||
+                    document.body.scrollLeft ||
+                    0);
+            }
+        };
+        lgQuery.prototype.offset = function () {
+            if (!this.firstElement) {
+                return {
+                    left: 0,
+                    top: 0,
+                };
+            }
+            var rect = this.firstElement.getBoundingClientRect();
+            var bodyMarginLeft = $LG('body').style().marginLeft;
+            // Minus body margin - https://stackoverflow.com/questions/30711548/is-getboundingclientrect-left-returning-a-wrong-value
+            return {
+                left: rect.left - parseFloat(bodyMarginLeft) + this.scrollLeft(),
+                top: rect.top + this.scrollTop(),
+            };
+        };
+        lgQuery.prototype.style = function () {
+            if (!this.firstElement) {
+                return {};
+            }
+            return (this.firstElement.currentStyle ||
+                window.getComputedStyle(this.firstElement));
+        };
+        // Width without padding and border even if box-sizing is used.
+        lgQuery.prototype.width = function () {
+            var style = this.style();
+            return (this.firstElement.clientWidth -
+                parseFloat(style.paddingLeft) -
+                parseFloat(style.paddingRight));
+        };
+        // Height without padding and border even if box-sizing is used.
+        lgQuery.prototype.height = function () {
+            var style = this.style();
+            return (this.firstElement.clientHeight -
+                parseFloat(style.paddingTop) -
+                parseFloat(style.paddingBottom));
+        };
+        lgQuery.eventListeners = {};
+        return lgQuery;
+    }());
+    function $LG(selector) {
+        initLgPolyfills();
+        return new lgQuery(selector);
+    }
+
+    var defaultDynamicOptions = [
+        'src',
+        'sources',
+        'subHtml',
+        'subHtmlUrl',
+        'html',
+        'video',
+        'poster',
+        'slideName',
+        'responsive',
+        'srcset',
+        'sizes',
+        'iframe',
+        'downloadUrl',
+        'download',
+        'width',
+        'facebookShareUrl',
+        'tweetText',
+        'iframeTitle',
+        'twitterShareUrl',
+        'pinterestShareUrl',
+        'pinterestText',
+        'fbHtml',
+        'disqusIdentifier',
+        'disqusUrl',
+    ];
+    // Convert html data-attribute to camalcase
+    function convertToData(attr) {
+        // FInd a way for lgsize
+        if (attr === 'href') {
+            return 'src';
+        }
+        attr = attr.replace('data-', '');
+        attr = attr.charAt(0).toLowerCase() + attr.slice(1);
+        attr = attr.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+        return attr;
+    }
+    var utils = {
+        /**
+         * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
+         */
+        getSize: function (el, container, spacing, defaultLgSize) {
+            if (spacing === void 0) { spacing = 0; }
+            var LGel = $LG(el);
+            var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
+            if (!lgSize) {
+                return;
+            }
+            var isResponsiveSizes = lgSize.split(',');
+            // if at-least two viewport sizes are available
+            if (isResponsiveSizes[1]) {
+                var wWidth = window.innerWidth;
+                for (var i = 0; i < isResponsiveSizes.length; i++) {
+                    var size_1 = isResponsiveSizes[i];
+                    var responsiveWidth = parseInt(size_1.split('-')[2], 10);
+                    if (responsiveWidth > wWidth) {
+                        lgSize = size_1;
+                        break;
+                    }
+                    // take last item as last option
+                    if (i === isResponsiveSizes.length - 1) {
+                        lgSize = size_1;
+                    }
+                }
+            }
+            var size = lgSize.split('-');
+            var width = parseInt(size[0], 10);
+            var height = parseInt(size[1], 10);
+            var cWidth = container.width();
+            var cHeight = container.height() - spacing;
+            var maxWidth = Math.min(cWidth, width);
+            var maxHeight = Math.min(cHeight, height);
+            var ratio = Math.min(maxWidth / width, maxHeight / height);
+            return { width: width * ratio, height: height * ratio };
+        },
+        /**
+         * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
+         * @param {jQuery Element}
+         * @returns {String} Transform CSS string
+         */
+        getTransform: function (el, container, top, bottom, imageSize) {
+            if (!imageSize) {
+                return;
+            }
+            var LGel = $LG(el).find('img').first();
+            if (!LGel.get()) {
+                return;
+            }
+            var containerRect = container.get().getBoundingClientRect();
+            var wWidth = containerRect.width;
+            // using innerWidth to include mobile safari bottom bar
+            var wHeight = container.height() - (top + bottom);
+            var elWidth = LGel.width();
+            var elHeight = LGel.height();
+            var elStyle = LGel.style();
+            var x = (wWidth - elWidth) / 2 -
+                LGel.offset().left +
+                (parseFloat(elStyle.paddingLeft) || 0) +
+                (parseFloat(elStyle.borderLeft) || 0) +
+                $LG(window).scrollLeft() +
+                containerRect.left;
+            var y = (wHeight - elHeight) / 2 -
+                LGel.offset().top +
+                (parseFloat(elStyle.paddingTop) || 0) +
+                (parseFloat(elStyle.borderTop) || 0) +
+                $LG(window).scrollTop() +
+                top;
+            var scX = elWidth / imageSize.width;
+            var scY = elHeight / imageSize.height;
+            var transform = 'translate3d(' +
+                (x *= -1) +
+                'px, ' +
+                (y *= -1) +
+                'px, 0) scale3d(' +
+                scX +
+                ', ' +
+                scY +
+                ', 1)';
+            return transform;
+        },
+        getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
+            var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
+            return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; max-width:" + iframeMaxWidth + "; height: " + iframeHeight + "; max-height:" + iframeMaxHeight + "\">\n                    <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\"  allowfullscreen=\"true\"></iframe>\n                </div>";
+        },
+        getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
+            var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
+            var sizesAttr = sizes ? "sizes=\"" + sizes + "\"" : '';
+            var imgMarkup = "<img " + altAttr + " " + srcsetAttr + "  " + sizesAttr + " class=\"lg-object lg-image\" data-index=\"" + index + "\" src=\"" + src + "\" />";
+            var sourceTag = '';
+            if (sources) {
+                var sourceObj = typeof sources === 'string' ? JSON.parse(sources) : sources;
+                sourceTag = sourceObj.map(function (source) {
+                    var attrs = '';
+                    Object.keys(source).forEach(function (key) {
+                        // Do not remove the first space as it is required to separate the attributes
+                        attrs += " " + key + "=\"" + source[key] + "\"";
+                    });
+                    return "<source " + attrs + "></source>";
+                });
+            }
+            return "" + sourceTag + imgMarkup;
+        },
+        // Get src from responsive src
+        getResponsiveSrc: function (srcItms) {
+            var rsWidth = [];
+            var rsSrc = [];
+            var src = '';
+            for (var i = 0; i < srcItms.length; i++) {
+                var _src = srcItms[i].split(' ');
+                // Manage empty space
+                if (_src[0] === '') {
+                    _src.splice(0, 1);
+                }
+                rsSrc.push(_src[0]);
+                rsWidth.push(_src[1]);
+            }
+            var wWidth = window.innerWidth;
+            for (var j = 0; j < rsWidth.length; j++) {
+                if (parseInt(rsWidth[j], 10) > wWidth) {
+                    src = rsSrc[j];
+                    break;
+                }
+            }
+            return src;
+        },
+        isImageLoaded: function (img) {
+            if (!img)
+                return false;
+            // During the onload event, IE correctly identifies any images that
+            // weren’t downloaded as not complete. Others should too. Gecko-based
+            // browsers act like NS4 in that they report this incorrectly.
+            if (!img.complete) {
+                return false;
+            }
+            // However, they do have two very useful properties: naturalWidth and
+            // naturalHeight. These give the true size of the image. If it failed
+            // to load, either of these should be zero.
+            if (img.naturalWidth === 0) {
+                return false;
+            }
+            // No other way of checking: assume it’s ok.
+            return true;
+        },
+        getVideoPosterMarkup: function (_poster, dummyImg, videoContStyle, playVideoString, _isVideo) {
+            var videoClass = '';
+            if (_isVideo && _isVideo.youtube) {
+                videoClass = 'lg-has-youtube';
+            }
+            else if (_isVideo && _isVideo.vimeo) {
+                videoClass = 'lg-has-vimeo';
+            }
+            else {
+                videoClass = 'lg-has-html5';
+            }
+            return "<div class=\"lg-video-cont " + videoClass + "\" style=\"" + videoContStyle + "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"" + playVideoString + "\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>" + playVideoString + "</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            " + (dummyImg || '') + "\n            <img class=\"lg-object lg-video-poster\" src=\"" + _poster + "\" />\n        </div>";
+        },
+        /**
+         * @desc Create dynamic elements array from gallery items when dynamic option is false
+         * It helps to avoid frequent DOM interaction
+         * and avoid multiple checks for dynamic elments
+         *
+         * @returns {Array} dynamicEl
+         */
+        getDynamicOptions: function (items, extraProps, getCaptionFromTitleOrAlt, exThumbImage) {
+            var dynamicElements = [];
+            var availableDynamicOptions = __spreadArrays(defaultDynamicOptions, extraProps);
+            [].forEach.call(items, function (item) {
+                var dynamicEl = {};
+                for (var i = 0; i < item.attributes.length; i++) {
+                    var attr = item.attributes[i];
+                    if (attr.specified) {
+                        var dynamicAttr = convertToData(attr.name);
+                        var label = '';
+                        if (availableDynamicOptions.indexOf(dynamicAttr) > -1) {
+                            label = dynamicAttr;
+                        }
+                        if (label) {
+                            dynamicEl[label] = attr.value;
+                        }
+                    }
+                }
+                var currentItem = $LG(item);
+                var alt = currentItem.find('img').first().attr('alt');
+                var title = currentItem.attr('title');
+                var thumb = exThumbImage
+                    ? currentItem.attr(exThumbImage)
+                    : currentItem.find('img').first().attr('src');
+                dynamicEl.thumb = thumb;
+                if (getCaptionFromTitleOrAlt && !dynamicEl.subHtml) {
+                    dynamicEl.subHtml = title || alt || '';
+                }
+                dynamicEl.alt = alt || title || '';
+                dynamicElements.push(dynamicEl);
+            });
+            return dynamicElements;
+        },
+        isMobile: function () {
+            return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        },
+        /**
+         * @desc Check the given src is video
+         * @param {String} src
+         * @return {Object} video type
+         * Ex:{ youtube  :  ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
+         *
+         * @todo - this information can be moved to dynamicEl to avoid frequent calls
+         */
+        isVideo: function (src, isHTML5VIdeo, index) {
+            if (!src) {
+                if (isHTML5VIdeo) {
+                    return {
+                        html5: true,
+                    };
+                }
+                else {
+                    console.error('lightGallery :- data-src is not provided on slide item ' +
+                        (index + 1) +
+                        '. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
+                    return;
+                }
+            }
+            var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
+            var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
+            var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
+            if (youtube) {
+                return {
+                    youtube: youtube,
+                };
+            }
+            else if (vimeo) {
+                return {
+                    vimeo: vimeo,
+                };
+            }
+            else if (wistia) {
+                return {
+                    wistia: wistia,
+                };
+            }
+        },
+    };
+
+    // @ref - https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
+    // @ref - https://2ality.com/2017/04/setting-up-multi-platform-packages.html
+    // Unique id for each gallery
+    var lgId = 0;
+    var LightGallery = /** @class */ (function () {
+        function LightGallery(element, options) {
+            this.lgOpened = false;
+            this.index = 0;
+            // lightGallery modules
+            this.plugins = [];
+            // false when lightGallery load first slide content;
+            this.lGalleryOn = false;
+            // True when a slide animation is in progress
+            this.lgBusy = false;
+            this.currentItemsInDom = [];
+            // Scroll top value before lightGallery is opened
+            this.prevScrollTop = 0;
+            this.isDummyImageRemoved = false;
+            this.dragOrSwipeEnabled = false;
+            this.mediaContainerPosition = {
+                top: 0,
+                bottom: 0,
+            };
+            if (!element) {
+                return this;
+            }
+            lgId++;
+            this.lgId = lgId;
+            this.el = element;
+            this.LGel = $LG(element);
+            this.generateSettings(options);
+            this.buildModules();
+            // When using dynamic mode, ensure dynamicEl is an array
+            if (this.settings.dynamic &&
+                this.settings.dynamicEl !== undefined &&
+                !Array.isArray(this.settings.dynamicEl)) {
+                throw 'When using dynamic mode, you must also define dynamicEl as an Array.';
+            }
+            this.galleryItems = this.getItems();
+            this.normalizeSettings();
+            // Gallery items
+            this.init();
+            this.validateLicense();
+            return this;
+        }
+        LightGallery.prototype.generateSettings = function (options) {
+            // lightGallery settings
+            this.settings = __assign(__assign({}, lightGalleryCoreSettings), options);
+            if (this.settings.isMobile &&
+                typeof this.settings.isMobile === 'function'
+                ? this.settings.isMobile()
+                : utils.isMobile()) {
+                var mobileSettings = __assign(__assign({}, this.settings.mobileSettings), this.settings.mobileSettings);
+                this.settings = __assign(__assign({}, this.settings), mobileSettings);
+            }
+        };
+        LightGallery.prototype.normalizeSettings = function () {
+            if (this.settings.slideEndAnimation) {
+                this.settings.hideControlOnEnd = false;
+            }
+            if (!this.settings.closable) {
+                this.settings.swipeToClose = false;
+            }
+            // And reset it on close to get the correct value next time
+            this.zoomFromOrigin = this.settings.zoomFromOrigin;
+            // At the moment, Zoom from image doesn't support dynamic options
+            // @todo add zoomFromOrigin support for dynamic images
+            if (this.settings.dynamic) {
+                this.zoomFromOrigin = false;
+            }
+            if (!this.settings.container) {
+                this.settings.container = document.body;
+            }
+            // settings.preload should not be grater than $item.length
+            this.settings.preload = Math.min(this.settings.preload, this.galleryItems.length);
+        };
+        LightGallery.prototype.init = function () {
+            var _this = this;
+            this.addSlideVideoInfo(this.galleryItems);
+            this.buildStructure();
+            this.LGel.trigger(lGEvents.init, {
+                instance: this,
+            });
+            if (this.settings.keyPress) {
+                this.keyPress();
+            }
+            setTimeout(function () {
+                _this.enableDrag();
+                _this.enableSwipe();
+                _this.triggerPosterClick();
+            }, 50);
+            this.arrow();
+            if (this.settings.mousewheel) {
+                this.mousewheel();
+            }
+            if (!this.settings.dynamic) {
+                this.openGalleryOnItemClick();
+            }
+        };
+        LightGallery.prototype.openGalleryOnItemClick = function () {
+            var _this = this;
+            var _loop_1 = function (index) {
+                var element = this_1.items[index];
+                var $element = $LG(element);
+                // Using different namespace for click because click event should not unbind if selector is same object('this')
+                // @todo manage all event listners - should have namespace that represent element
+                var uuid = lgQuery.generateUUID();
+                $element
+                    .attr('data-lg-id', uuid)
+                    .on("click.lgcustom-item-" + uuid, function (e) {
+                    e.preventDefault();
+                    var currentItemIndex = _this.settings.index || index;
+                    _this.openGallery(currentItemIndex, element);
+                });
+            };
+            var this_1 = this;
+            // Using for loop instead of using bubbling as the items can be any html element.
+            for (var index = 0; index < this.items.length; index++) {
+                _loop_1(index);
+            }
+        };
+        /**
+         * Module constructor
+         * Modules are build incrementally.
+         * Gallery should be opened only once all the modules are initialized.
+         * use moduleBuildTimeout to make sure this
+         */
+        LightGallery.prototype.buildModules = function () {
+            var _this = this;
+            this.settings.plugins.forEach(function (plugin) {
+                _this.plugins.push(new plugin(_this, $LG));
+            });
+        };
+        LightGallery.prototype.validateLicense = function () {
+            if (!this.settings.licenseKey) {
+                console.error('Please provide a valid license key');
+            }
+            else if (this.settings.licenseKey === '0000-0000-000-0000') {
+                console.warn("lightGallery: " + this.settings.licenseKey + " license key is not valid for production use");
+            }
+        };
+        LightGallery.prototype.getSlideItem = function (index) {
+            return $LG(this.getSlideItemId(index));
+        };
+        LightGallery.prototype.getSlideItemId = function (index) {
+            return "#lg-item-" + this.lgId + "-" + index;
+        };
+        LightGallery.prototype.getIdName = function (id) {
+            return id + "-" + this.lgId;
+        };
+        LightGallery.prototype.getElementById = function (id) {
+            return $LG("#" + this.getIdName(id));
+        };
+        LightGallery.prototype.manageSingleSlideClassName = function () {
+            if (this.galleryItems.length < 2) {
+                this.outer.addClass('lg-single-item');
+            }
+            else {
+                this.outer.removeClass('lg-single-item');
+            }
+        };
+        LightGallery.prototype.buildStructure = function () {
+            var _this = this;
+            var container = this.$container && this.$container.get();
+            if (container) {
+                return;
+            }
+            var controls = '';
+            var subHtmlCont = '';
+            // Create controls
+            if (this.settings.controls) {
+                controls = "<button type=\"button\" id=\"" + this.getIdName('lg-prev') + "\" aria-label=\"" + this.settings.strings['previousSlide'] + "\" class=\"lg-prev lg-icon\"> " + this.settings.prevHtml + " </button>\n                <button type=\"button\" id=\"" + this.getIdName('lg-next') + "\" aria-label=\"" + this.settings.strings['nextSlide'] + "\" class=\"lg-next lg-icon\"> " + this.settings.nextHtml + " </button>";
+            }
+            if (this.settings.appendSubHtmlTo !== '.lg-item') {
+                subHtmlCont =
+                    '<div class="lg-sub-html" role="status" aria-live="polite"></div>';
+            }
+            var addClasses = '';
+            if (this.settings.allowMediaOverlap) {
+                // Do not remove space before last single quote
+                addClasses += 'lg-media-overlap ';
+            }
+            var ariaLabelledby = this.settings.ariaLabelledby
+                ? 'aria-labelledby="' + this.settings.ariaLabelledby + '"'
+                : '';
+            var ariaDescribedby = this.settings.ariaDescribedby
+                ? 'aria-describedby="' + this.settings.ariaDescribedby + '"'
+                : '';
+            var containerClassName = "lg-container " + this.settings.addClass + " " + (document.body !== this.settings.container ? 'lg-inline' : '');
+            var closeIcon = this.settings.closable && this.settings.showCloseIcon
+                ? "<button type=\"button\" aria-label=\"" + this.settings.strings['closeGallery'] + "\" id=\"" + this.getIdName('lg-close') + "\" class=\"lg-close lg-icon\"></button>"
+                : '';
+            var maximizeIcon = this.settings.showMaximizeIcon
+                ? "<button type=\"button\" aria-label=\"" + this.settings.strings['toggleMaximize'] + "\" id=\"" + this.getIdName('lg-maximize') + "\" class=\"lg-maximize lg-icon\"></button>"
+                : '';
+            var template = "\n        <div class=\"" + containerClassName + "\" id=\"" + this.getIdName('lg-container') + "\" tabindex=\"-1\" aria-modal=\"true\" " + ariaLabelledby + " " + ariaDescribedby + " role=\"dialog\"\n        >\n            <div id=\"" + this.getIdName('lg-backdrop') + "\" class=\"lg-backdrop\"></div>\n\n            <div id=\"" + this.getIdName('lg-outer') + "\" class=\"lg-outer lg-use-css3 lg-css3 lg-hide-items " + addClasses + " \">\n\n              <div id=\"" + this.getIdName('lg-content') + "\" class=\"lg-content\">\n                <div id=\"" + this.getIdName('lg-inner') + "\" class=\"lg-inner\">\n                </div>\n                " + controls + "\n              </div>\n                <div id=\"" + this.getIdName('lg-toolbar') + "\" class=\"lg-toolbar lg-group\">\n                    " + maximizeIcon + "\n                    " + closeIcon + "\n                    </div>\n                    " + (this.settings.appendSubHtmlTo === '.lg-outer'
+                ? subHtmlCont
+                : '') + "\n                <div id=\"" + this.getIdName('lg-components') + "\" class=\"lg-components\">\n                    " + (this.settings.appendSubHtmlTo === '.lg-sub-html'
+                ? subHtmlCont
+                : '') + "\n                </div>\n            </div>\n        </div>\n        ";
+            $LG(this.settings.container).append(template);
+            if (document.body !== this.settings.container) {
+                $LG(this.settings.container).css('position', 'relative');
+            }
+            this.outer = this.getElementById('lg-outer');
+            this.$lgComponents = this.getElementById('lg-components');
+            this.$backdrop = this.getElementById('lg-backdrop');
+            this.$container = this.getElementById('lg-container');
+            this.$inner = this.getElementById('lg-inner');
+            this.$content = this.getElementById('lg-content');
+            this.$toolbar = this.getElementById('lg-toolbar');
+            this.$backdrop.css('transition-duration', this.settings.backdropDuration + 'ms');
+            var outerClassNames = this.settings.mode + " ";
+            this.manageSingleSlideClassName();
+            if (this.settings.enableDrag) {
+                outerClassNames += 'lg-grab ';
+            }
+            this.outer.addClass(outerClassNames);
+            this.$inner.css('transition-timing-function', this.settings.easing);
+            this.$inner.css('transition-duration', this.settings.speed + 'ms');
+            if (this.settings.download) {
+                this.$toolbar.append("<a id=\"" + this.getIdName('lg-download') + "\" target=\"_blank\" rel=\"noopener\" aria-label=\"" + this.settings.strings['download'] + "\" download class=\"lg-download lg-icon\"></a>");
+            }
+            this.counter();
+            $LG(window).on("resize.lg.global" + this.lgId + " orientationchange.lg.global" + this.lgId, function () {
+                _this.refreshOnResize();
+            });
+            this.hideBars();
+            this.manageCloseGallery();
+            this.toggleMaximize();
+            this.initModules();
+        };
+        LightGallery.prototype.refreshOnResize = function () {
+            if (this.lgOpened) {
+                var currentGalleryItem = this.galleryItems[this.index];
+                var __slideVideoInfo = currentGalleryItem.__slideVideoInfo;
+                this.mediaContainerPosition = this.getMediaContainerPosition();
+                var _a = this.mediaContainerPosition, top_1 = _a.top, bottom = _a.bottom;
+                this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo && this.settings.videoMaxSize);
+                if (__slideVideoInfo) {
+                    this.resizeVideoSlide(this.index, this.currentImageSize);
+                }
+                if (this.zoomFromOrigin && !this.isDummyImageRemoved) {
+                    var imgStyle = this.getDummyImgStyles(this.currentImageSize);
+                    this.outer
+                        .find('.lg-current .lg-dummy-img')
+                        .first()
+                        .attr('style', imgStyle);
+                }
+                this.LGel.trigger(lGEvents.containerResize);
+            }
+        };
+        LightGallery.prototype.resizeVideoSlide = function (index, imageSize) {
+            var lgVideoStyle = this.getVideoContStyle(imageSize);
+            var currentSlide = this.getSlideItem(index);
+            currentSlide.find('.lg-video-cont').attr('style', lgVideoStyle);
+        };
+        /**
+         * Update slides dynamically.
+         * Add, edit or delete slides dynamically when lightGallery is opened.
+         * Modify the current gallery items and pass it via updateSlides method
+         * @note
+         * - Do not mutate existing lightGallery items directly.
+         * - Always pass new list of gallery items
+         * - You need to take care of thumbnails outside the gallery if any
+         * - user this method only if you want to update slides when the gallery is opened. Otherwise, use `refresh()` method.
+         * @param items Gallery items
+         * @param index After the update operation, which slide gallery should navigate to
+         * @category lGPublicMethods
+         * @example
+         * const plugin = lightGallery();
+         *
+         * // Adding slides dynamically
+         * let galleryItems = [
+         * // Access existing lightGallery items
+         * // galleryItems are automatically generated internally from the gallery HTML markup
+         * // or directly from galleryItems when dynamic gallery is used
+         *   ...plugin.galleryItems,
+         *     ...[
+         *       {
+         *         src: 'img/img-1.png',
+         *           thumb: 'img/thumb1.png',
+         *         },
+         *     ],
+         *   ];
+         *   plugin.updateSlides(
+         *     galleryItems,
+         *     plugin.index,
+         *   );
+         *
+         *
+         * // Remove slides dynamically
+         * galleryItems = JSON.parse(
+         *   JSON.stringify(updateSlideInstance.galleryItems),
+         * );
+         * galleryItems.shift();
+         * updateSlideInstance.updateSlides(galleryItems, 1);
+         * @see <a href="/demos/update-slides/">Demo</a>
+         */
+        LightGallery.prototype.updateSlides = function (items, index) {
+            if (this.index > items.length - 1) {
+                this.index = items.length - 1;
+            }
+            if (items.length === 1) {
+                this.index = 0;
+            }
+            if (!items.length) {
+                this.closeGallery();
+                return;
+            }
+            var currentSrc = this.galleryItems[index].src;
+            this.galleryItems = items;
+            this.updateControls();
+            this.$inner.empty();
+            this.currentItemsInDom = [];
+            var _index = 0;
+            // Find the current index based on source value of the slide
+            this.galleryItems.some(function (galleryItem, itemIndex) {
+                if (galleryItem.src === currentSrc) {
+                    _index = itemIndex;
+                    return true;
+                }
+                return false;
+            });
+            this.currentItemsInDom = this.organizeSlideItems(_index, -1);
+            this.loadContent(_index, true);
+            this.getSlideItem(_index).addClass('lg-current');
+            this.index = _index;
+            this.updateCurrentCounter(_index);
+            this.LGel.trigger(lGEvents.updateSlides);
+        };
+        // Get gallery items based on multiple conditions
+        LightGallery.prototype.getItems = function () {
+            // Gallery items
+            this.items = [];
+            if (!this.settings.dynamic) {
+                if (this.settings.selector === 'this') {
+                    this.items.push(this.el);
+                }
+                else if (this.settings.selector) {
+                    if (typeof this.settings.selector === 'string') {
+                        if (this.settings.selectWithin) {
+                            var selectWithin = $LG(this.settings.selectWithin);
+                            this.items = selectWithin
+                                .find(this.settings.selector)
+                                .get();
+                        }
+                        else {
+                            this.items = this.el.querySelectorAll(this.settings.selector);
+                        }
+                    }
+                    else {
+                        this.items = this.settings.selector;
+                    }
+                }
+                else {
+                    this.items = this.el.children;
+                }
+                return utils.getDynamicOptions(this.items, this.settings.extraProps, this.settings.getCaptionFromTitleOrAlt, this.settings.exThumbImage);
+            }
+            else {
+                return this.settings.dynamicEl || [];
+            }
+        };
+        /**
+         * Open lightGallery.
+         * Open gallery with specific slide by passing index of the slide as parameter.
+         * @category lGPublicMethods
+         * @param {Number} index  - index of the slide
+         * @param {HTMLElement} element - Which image lightGallery should zoom from
+         *
+         * @example
+         * const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
+         * const dynamicGallery = lightGallery($dynamicGallery, {
+         *     dynamic: true,
+         *     dynamicEl: [
+         *         {
+         *              src: 'img/1.jpg',
+         *              thumb: 'img/thumb-1.jpg',
+         *              subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
+         *         },
+         *         ...
+         *     ],
+         * });
+         * $dynamicGallery.addEventListener('click', function () {
+         *     // Starts with third item.(Optional).
+         *     // This is useful if you want use dynamic mode with
+         *     // custom thumbnails (thumbnails outside gallery),
+         *     dynamicGallery.openGallery(2);
+         * });
+         *
+         */
+        LightGallery.prototype.openGallery = function (index, element) {
+            var _this = this;
+            if (index === void 0) { index = this.settings.index; }
+            // prevent accidental double execution
+            if (this.lgOpened)
+                return;
+            this.lgOpened = true;
+            this.outer.get().focus();
+            this.outer.removeClass('lg-hide-items');
+            // Add display block, but still has opacity 0
+            this.$container.addClass('lg-show');
+            var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index);
+            this.currentItemsInDom = itemsToBeInsertedToDom;
+            var items = '';
+            itemsToBeInsertedToDom.forEach(function (item) {
+                items = items + ("<div id=\"" + item + "\" class=\"lg-item\"></div>");
+            });
+            this.$inner.append(items);
+            this.addHtml(index);
+            var transform = '';
+            this.mediaContainerPosition = this.getMediaContainerPosition();
+            var _a = this.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
+            if (!this.settings.allowMediaOverlap) {
+                this.setMediaContainerPosition(top, bottom);
+            }
+            var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo;
+            if (this.zoomFromOrigin && element) {
+                this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize);
+                transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize);
+            }
+            if (!this.zoomFromOrigin || !transform) {
+                this.outer.addClass(this.settings.startClass);
+                this.getSlideItem(index).removeClass('lg-complete');
+            }
+            var timeout = this.settings.zoomFromOrigin
+                ? 100
+                : this.settings.backdropDuration;
+            setTimeout(function () {
+                _this.outer.addClass('lg-components-open');
+            }, timeout);
+            this.index = index;
+            this.LGel.trigger(lGEvents.beforeOpen);
+            // add class lg-current to remove initial transition
+            this.getSlideItem(index).addClass('lg-current');
+            this.lGalleryOn = false;
+            // Store the current scroll top value to scroll back after closing the gallery..
+            this.prevScrollTop = $LG(window).scrollTop();
+            setTimeout(function () {
+                // Need to check both zoomFromOrigin and transform values as we need to set set the
+                // default opening animation if user missed to add the lg-size attribute
+                if (_this.zoomFromOrigin && transform) {
+                    var currentSlide_1 = _this.getSlideItem(index);
+                    currentSlide_1.css('transform', transform);
+                    setTimeout(function () {
+                        currentSlide_1
+                            .addClass('lg-start-progress lg-start-end-progress')
+                            .css('transition-duration', _this.settings.startAnimationDuration + 'ms');
+                        _this.outer.addClass('lg-zoom-from-image');
+                    });
+                    setTimeout(function () {
+                        currentSlide_1.css('transform', 'translate3d(0, 0, 0)');
+                    }, 100);
+                }
+                setTimeout(function () {
+                    _this.$backdrop.addClass('in');
+                    _this.$container.addClass('lg-show-in');
+                }, 10);
+                // lg-visible class resets gallery opacity to 1
+                if (!_this.zoomFromOrigin || !transform) {
+                    setTimeout(function () {
+                        _this.outer.addClass('lg-visible');
+                    }, _this.settings.backdropDuration);
+                }
+                // initiate slide function
+                _this.slide(index, false, false, false);
+                _this.LGel.trigger(lGEvents.afterOpen);
+            });
+            if (document.body === this.settings.container) {
+                $LG('html').addClass('lg-on');
+            }
+        };
+        /**
+         * Note - Changing the position of the media on every slide transition creates a flickering effect.
+         * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption.
+         * if you have dynamic captions for each media,
+         * you can provide an appropriate height for the captions via allowMediaOverlap option
+         */
+        LightGallery.prototype.getMediaContainerPosition = function () {
+            if (this.settings.allowMediaOverlap) {
+                return {
+                    top: 0,
+                    bottom: 0,
+                };
+            }
+            var top = this.$toolbar.get().clientHeight || 0;
+            var subHtml = this.outer.find('.lg-components .lg-sub-html').get();
+            var captionHeight = this.settings.defaultCaptionHeight ||
+                (subHtml && subHtml.clientHeight) ||
+                0;
+            var thumbContainer = this.outer.find('.lg-thumb-outer').get();
+            var thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0;
+            var bottom = thumbHeight + captionHeight;
+            return {
+                top: top,
+                bottom: bottom,
+            };
+        };
+        LightGallery.prototype.setMediaContainerPosition = function (top, bottom) {
+            if (top === void 0) { top = 0; }
+            if (bottom === void 0) { bottom = 0; }
+            this.$content.css('top', top + 'px').css('bottom', bottom + 'px');
+        };
+        LightGallery.prototype.hideBars = function () {
+            var _this = this;
+            // Hide controllers if mouse doesn't move for some period
+            setTimeout(function () {
+                _this.outer.removeClass('lg-hide-items');
+                if (_this.settings.hideBarsDelay > 0) {
+                    _this.outer.on('mousemove.lg click.lg touchstart.lg', function () {
+                        _this.outer.removeClass('lg-hide-items');
+                        clearTimeout(_this.hideBarTimeout);
+                        // Timeout will be cleared on each slide movement also
+                        _this.hideBarTimeout = setTimeout(function () {
+                            _this.outer.addClass('lg-hide-items');
+                        }, _this.settings.hideBarsDelay);
+                    });
+                    _this.outer.trigger('mousemove.lg');
+                }
+            }, this.settings.showBarsAfter);
+        };
+        LightGallery.prototype.initPictureFill = function ($img) {
+            if (this.settings.supportLegacyBrowser) {
+                try {
+                    picturefill({
+                        elements: [$img.get()],
+                    });
+                }
+                catch (e) {
+                    console.warn('lightGallery :- If you want srcset or picture tag to be supported for older browser please include picturefil javascript library in your document.');
+                }
+            }
+        };
+        /**
+         *  @desc Create image counter
+         *  Ex: 1/10
+         */
+        LightGallery.prototype.counter = function () {
+            if (this.settings.counter) {
+                var counterHtml = "<div class=\"lg-counter\" role=\"status\" aria-live=\"polite\">\n                <span id=\"" + this.getIdName('lg-counter-current') + "\" class=\"lg-counter-current\">" + (this.index + 1) + " </span> /\n                <span id=\"" + this.getIdName('lg-counter-all') + "\" class=\"lg-counter-all\">" + this.galleryItems.length + " </span></div>";
+                this.outer.find(this.settings.appendCounterTo).append(counterHtml);
+            }
+        };
+        /**
+         *  @desc add sub-html into the slide
+         *  @param {Number} index - index of the slide
+         */
+        LightGallery.prototype.addHtml = function (index) {
+            var subHtml;
+            var subHtmlUrl;
+            if (this.galleryItems[index].subHtmlUrl) {
+                subHtmlUrl = this.galleryItems[index].subHtmlUrl;
+            }
+            else {
+                subHtml = this.galleryItems[index].subHtml;
+            }
+            if (!subHtmlUrl) {
+                if (subHtml) {
+                    // get first letter of sub-html
+                    // if first letter starts with . or # get the html form the jQuery object
+                    var fL = subHtml.substring(0, 1);
+                    if (fL === '.' || fL === '#') {
+                        if (this.settings.subHtmlSelectorRelative &&
+                            !this.settings.dynamic) {
+                            subHtml = $LG(this.items)
+                                .eq(index)
+                                .find(subHtml)
+                                .first()
+                                .html();
+                        }
+                        else {
+                            subHtml = $LG(subHtml).first().html();
+                        }
+                    }
+                }
+                else {
+                    subHtml = '';
+                }
+            }
+            if (this.settings.appendSubHtmlTo !== '.lg-item') {
+                if (subHtmlUrl) {
+                    this.outer.find('.lg-sub-html').load(subHtmlUrl);
+                }
+                else {
+                    this.outer.find('.lg-sub-html').html(subHtml);
+                }
+            }
+            else {
+                var currentSlide = $LG(this.getSlideItemId(index));
+                if (subHtmlUrl) {
+                    currentSlide.load(subHtmlUrl);
+                }
+                else {
+                    currentSlide.append("<div class=\"lg-sub-html\">" + subHtml + "</div>");
+                }
+            }
+            // Add lg-empty-html class if title doesn't exist
+            if (typeof subHtml !== 'undefined' && subHtml !== null) {
+                if (subHtml === '') {
+                    this.outer
+                        .find(this.settings.appendSubHtmlTo)
+                        .addClass('lg-empty-html');
+                }
+                else {
+                    this.outer
+                        .find(this.settings.appendSubHtmlTo)
+                        .removeClass('lg-empty-html');
+                }
+            }
+            this.LGel.trigger(lGEvents.afterAppendSubHtml, {
+                index: index,
+            });
+        };
+        /**
+         *  @desc Preload slides
+         *  @param {Number} index - index of the slide
+         * @todo preload not working for the first slide, Also, should work for the first and last slide as well
+         */
+        LightGallery.prototype.preload = function (index) {
+            for (var i = 1; i <= this.settings.preload; i++) {
+                if (i >= this.galleryItems.length - index) {
+                    break;
+                }
+                this.loadContent(index + i, false);
+            }
+            for (var j = 1; j <= this.settings.preload; j++) {
+                if (index - j < 0) {
+                    break;
+                }
+                this.loadContent(index - j, false);
+            }
+        };
+        LightGallery.prototype.getDummyImgStyles = function (imageSize) {
+            if (!imageSize)
+                return '';
+            return "width:" + imageSize.width + "px;\n                margin-left: -" + imageSize.width / 2 + "px;\n                margin-top: -" + imageSize.height / 2 + "px;\n                height:" + imageSize.height + "px";
+        };
+        LightGallery.prototype.getVideoContStyle = function (imageSize) {
+            if (!imageSize)
+                return '';
+            return "width:" + imageSize.width + "px;\n                height:" + imageSize.height + "px";
+        };
+        LightGallery.prototype.getDummyImageContent = function ($currentSlide, index, alt) {
+            var $currentItem;
+            if (!this.settings.dynamic) {
+                $currentItem = $LG(this.items).eq(index);
+            }
+            if ($currentItem) {
+                var _dummyImgSrc = void 0;
+                if (!this.settings.exThumbImage) {
+                    _dummyImgSrc = $currentItem.find('img').first().attr('src');
+                }
+                else {
+                    _dummyImgSrc = $currentItem.attr(this.settings.exThumbImage);
+                }
+                if (!_dummyImgSrc)
+                    return '';
+                var imgStyle = this.getDummyImgStyles(this.currentImageSize);
+                var dummyImgContent = "<img " + alt + " style=\"" + imgStyle + "\" class=\"lg-dummy-img\" src=\"" + _dummyImgSrc + "\" />";
+                $currentSlide.addClass('lg-first-slide');
+                this.outer.addClass('lg-first-slide-loading');
+                return dummyImgContent;
+            }
+            return '';
+        };
+        LightGallery.prototype.setImgMarkup = function (src, $currentSlide, index) {
+            var currentGalleryItem = this.galleryItems[index];
+            var alt = currentGalleryItem.alt, srcset = currentGalleryItem.srcset, sizes = currentGalleryItem.sizes, sources = currentGalleryItem.sources;
+            // Use the thumbnail as dummy image which will be resized to actual image size and
+            // displayed on top of actual image
+            var imgContent = '';
+            var altAttr = alt ? 'alt="' + alt + '"' : '';
+            if (this.isFirstSlideWithZoomAnimation()) {
+                imgContent = this.getDummyImageContent($currentSlide, index, altAttr);
+            }
+            else {
+                imgContent = utils.getImgMarkup(index, src, altAttr, srcset, sizes, sources);
+            }
+            var imgMarkup = "<picture class=\"lg-img-wrap\"> " + imgContent + "</picture>";
+            $currentSlide.prepend(imgMarkup);
+        };
+        LightGallery.prototype.onSlideObjectLoad = function ($slide, isHTML5VideoWithoutPoster, onLoad, onError) {
+            var mediaObject = $slide.find('.lg-object').first();
+            if (utils.isImageLoaded(mediaObject.get()) ||
+                isHTML5VideoWithoutPoster) {
+                onLoad();
+            }
+            else {
+                mediaObject.on('load.lg error.lg', function () {
+                    onLoad && onLoad();
+                });
+                mediaObject.on('error.lg', function () {
+                    onError && onError();
+                });
+            }
+        };
+        /**
+         *
+         * @param $el Current slide item
+         * @param index
+         * @param delay Delay is 0 except first time
+         * @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin
+         * @param isFirstSlide
+         */
+        LightGallery.prototype.onLgObjectLoad = function (currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) {
+            var _this = this;
+            this.onSlideObjectLoad(currentSlide, isHTML5VideoWithoutPoster, function () {
+                _this.triggerSlideItemLoad(currentSlide, index, delay, speed, isFirstSlide);
+            }, function () {
+                currentSlide.addClass('lg-complete lg-complete_');
+                currentSlide.html('<span class="lg-error-msg">Oops... Failed to load content...</span>');
+            });
+        };
+        LightGallery.prototype.triggerSlideItemLoad = function ($currentSlide, index, delay, speed, isFirstSlide) {
+            var _this = this;
+            var currentGalleryItem = this.galleryItems[index];
+            // Adding delay for video slides without poster for better performance and user experience
+            // Videos should start playing once once the gallery is completely loaded
+            var _speed = isFirstSlide &&
+                this.getSlideType(currentGalleryItem) === 'video' &&
+                !currentGalleryItem.poster
+                ? speed
+                : 0;
+            setTimeout(function () {
+                $currentSlide.addClass('lg-complete lg-complete_');
+                _this.LGel.trigger(lGEvents.slideItemLoad, {
+                    index: index,
+                    delay: delay || 0,
+                    isFirstSlide: isFirstSlide,
+                });
+            }, _speed);
+        };
+        LightGallery.prototype.isFirstSlideWithZoomAnimation = function () {
+            return !!(!this.lGalleryOn &&
+                this.zoomFromOrigin &&
+                this.currentImageSize);
+        };
+        // Add video slideInfo
+        LightGallery.prototype.addSlideVideoInfo = function (items) {
+            var _this = this;
+            items.forEach(function (element, index) {
+                element.__slideVideoInfo = utils.isVideo(element.src, !!element.video, index);
+                if (element.__slideVideoInfo &&
+                    _this.settings.loadYouTubePoster &&
+                    !element.poster &&
+                    element.__slideVideoInfo.youtube) {
+                    element.poster = "//img.youtube.com/vi/" + element.__slideVideoInfo.youtube[1] + "/maxresdefault.jpg";
+                }
+            });
+        };
+        /**
+         *  Load slide content into slide.
+         *  This is used to load content into slides that is not visible too
+         *  @param {Number} index - index of the slide.
+         *  @param {Boolean} rec - if true call loadcontent() function again.
+         */
+        LightGallery.prototype.loadContent = function (index, rec) {
+            var _this = this;
+            var currentGalleryItem = this.galleryItems[index];
+            var $currentSlide = $LG(this.getSlideItemId(index));
+            var poster = currentGalleryItem.poster, srcset = currentGalleryItem.srcset, sizes = currentGalleryItem.sizes, sources = currentGalleryItem.sources;
+            var src = currentGalleryItem.src;
+            var video = currentGalleryItem.video;
+            var _html5Video = video && typeof video === 'string' ? JSON.parse(video) : video;
+            if (currentGalleryItem.responsive) {
+                var srcDyItms = currentGalleryItem.responsive.split(',');
+                src = utils.getResponsiveSrc(srcDyItms) || src;
+            }
+            var videoInfo = currentGalleryItem.__slideVideoInfo;
+            var lgVideoStyle = '';
+            var iframe = !!currentGalleryItem.iframe;
+            var isFirstSlide = !this.lGalleryOn;
+            // delay for adding complete class. it is 0 except first time.
+            var delay = 0;
+            if (isFirstSlide) {
+                if (this.zoomFromOrigin && this.currentImageSize) {
+                    delay = this.settings.startAnimationDuration + 10;
+                }
+                else {
+                    delay = this.settings.backdropDuration + 10;
+                }
+            }
+            if (!$currentSlide.hasClass('lg-loaded')) {
+                if (videoInfo) {
+                    var _a = this.mediaContainerPosition, top_2 = _a.top, bottom = _a.bottom;
+                    var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom, videoInfo && this.settings.videoMaxSize);
+                    lgVideoStyle = this.getVideoContStyle(videoSize);
+                }
+                if (iframe) {
+                    var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle);
+                    $currentSlide.prepend(markup);
+                }
+                else if (poster) {
+                    var dummyImg = '';
+                    var hasStartAnimation = isFirstSlide &&
+                        this.zoomFromOrigin &&
+                        this.currentImageSize;
+                    if (hasStartAnimation) {
+                        dummyImg = this.getDummyImageContent($currentSlide, index, '');
+                    }
+                    var markup = utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, this.settings.strings['playVideo'], videoInfo);
+                    $currentSlide.prepend(markup);
+                }
+                else if (videoInfo) {
+                    var markup = "<div class=\"lg-video-cont \" style=\"" + lgVideoStyle + "\"></div>";
+                    $currentSlide.prepend(markup);
+                }
+                else {
+                    this.setImgMarkup(src, $currentSlide, index);
+                    if (srcset || sources) {
+                        var $img = $currentSlide.find('.lg-object');
+                        this.initPictureFill($img);
+                    }
+                }
+                if (poster || videoInfo) {
+                    this.LGel.trigger(lGEvents.hasVideo, {
+                        index: index,
+                        src: src,
+                        html5Video: _html5Video,
+                        hasPoster: !!poster,
+                    });
+                }
+                this.LGel.trigger(lGEvents.afterAppendSlide, { index: index });
+                if (this.lGalleryOn &&
+                    this.settings.appendSubHtmlTo === '.lg-item') {
+                    this.addHtml(index);
+                }
+            }
+            // For first time add some delay for displaying the start animation.
+            var _speed = 0;
+            // Do not change the delay value because it is required for zoom plugin.
+            // If gallery opened from direct url (hash) speed value should be 0
+            if (delay && !$LG(document.body).hasClass('lg-from-hash')) {
+                _speed = delay;
+            }
+            // Only for first slide and zoomFromOrigin is enabled
+            if (this.isFirstSlideWithZoomAnimation()) {
+                setTimeout(function () {
+                    $currentSlide
+                        .removeClass('lg-start-end-progress lg-start-progress')
+                        .removeAttr('style');
+                }, this.settings.startAnimationDuration + 100);
+                if (!$currentSlide.hasClass('lg-loaded')) {
+                    setTimeout(function () {
+                        if (_this.getSlideType(currentGalleryItem) === 'image') {
+                            $currentSlide
+                                .find('.lg-img-wrap')
+                                .append(utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
+                            if (srcset || sources) {
+                                var $img = $currentSlide.find('.lg-object');
+                                _this.initPictureFill($img);
+                            }
+                        }
+                        if (_this.getSlideType(currentGalleryItem) === 'image' ||
+                            (_this.getSlideType(currentGalleryItem) === 'video' &&
+                                poster)) {
+                            _this.onLgObjectLoad($currentSlide, index, delay, _speed, true, false);
+                            // load remaining slides once the slide is completely loaded
+                            _this.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () {
+                                _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
+                            }, function () {
+                                _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed);
+                            });
+                        }
+                    }, this.settings.startAnimationDuration + 100);
+                }
+            }
+            // SLide content has been added to dom
+            $currentSlide.addClass('lg-loaded');
+            if (!this.isFirstSlideWithZoomAnimation() ||
+                (this.getSlideType(currentGalleryItem) === 'video' && !poster)) {
+                this.onLgObjectLoad($currentSlide, index, delay, _speed, isFirstSlide, !!(videoInfo && videoInfo.html5 && !poster));
+            }
+            // When gallery is opened once content is loaded (second time) need to add lg-complete class for css styling
+            if ((!this.zoomFromOrigin || !this.currentImageSize) &&
+                $currentSlide.hasClass('lg-complete_') &&
+                !this.lGalleryOn) {
+                setTimeout(function () {
+                    $currentSlide.addClass('lg-complete');
+                }, this.settings.backdropDuration);
+            }
+            // Content loaded
+            // Need to set lGalleryOn before calling preload function
+            this.lGalleryOn = true;
+            if (rec === true) {
+                if (!$currentSlide.hasClass('lg-complete_')) {
+                    $currentSlide
+                        .find('.lg-object')
+                        .first()
+                        .on('load.lg error.lg', function () {
+                        _this.preload(index);
+                    });
+                }
+                else {
+                    this.preload(index);
+                }
+            }
+        };
+        /**
+         * @desc Remove dummy image content and load next slides
+         * Called only for the first time if zoomFromOrigin animation is enabled
+         * @param index
+         * @param $currentSlide
+         * @param speed
+         */
+        LightGallery.prototype.loadContentOnFirstSlideLoad = function (index, $currentSlide, speed) {
+            var _this = this;
+            setTimeout(function () {
+                $currentSlide.find('.lg-dummy-img').remove();
+                $currentSlide.removeClass('lg-first-slide');
+                _this.outer.removeClass('lg-first-slide-loading');
+                _this.isDummyImageRemoved = true;
+                _this.preload(index);
+            }, speed + 300);
+        };
+        LightGallery.prototype.getItemsToBeInsertedToDom = function (index, prevIndex, numberOfItems) {
+            var _this = this;
+            if (numberOfItems === void 0) { numberOfItems = 0; }
+            var itemsToBeInsertedToDom = [];
+            // Minimum 2 items should be there
+            var possibleNumberOfItems = Math.max(numberOfItems, 3);
+            possibleNumberOfItems = Math.min(possibleNumberOfItems, this.galleryItems.length);
+            var prevIndexItem = "lg-item-" + this.lgId + "-" + prevIndex;
+            if (this.galleryItems.length <= 3) {
+                this.galleryItems.forEach(function (_element, index) {
+                    itemsToBeInsertedToDom.push("lg-item-" + _this.lgId + "-" + index);
+                });
+                return itemsToBeInsertedToDom;
+            }
+            if (index < (this.galleryItems.length - 1) / 2) {
+                for (var idx = index; idx > index - possibleNumberOfItems / 2 && idx >= 0; idx--) {
+                    itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx);
+                }
+                var numberOfExistingItems = itemsToBeInsertedToDom.length;
+                for (var idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) {
+                    itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (index + idx + 1));
+                }
+            }
+            else {
+                for (var idx = index; idx <= this.galleryItems.length - 1 &&
+                    idx < index + possibleNumberOfItems / 2; idx++) {
+                    itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx);
+                }
+                var numberOfExistingItems = itemsToBeInsertedToDom.length;
+                for (var idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) {
+                    itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (index - idx - 1));
+                }
+            }
+            if (this.settings.loop) {
+                if (index === this.galleryItems.length - 1) {
+                    itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + 0);
+                }
+                else if (index === 0) {
+                    itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (this.galleryItems.length - 1));
+                }
+            }
+            if (itemsToBeInsertedToDom.indexOf(prevIndexItem) === -1) {
+                itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + prevIndex);
+            }
+            return itemsToBeInsertedToDom;
+        };
+        LightGallery.prototype.organizeSlideItems = function (index, prevIndex) {
+            var _this = this;
+            var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, prevIndex, this.settings.numberOfSlideItemsInDom);
+            itemsToBeInsertedToDom.forEach(function (item) {
+                if (_this.currentItemsInDom.indexOf(item) === -1) {
+                    _this.$inner.append("<div id=\"" + item + "\" class=\"lg-item\"></div>");
+                }
+            });
+            this.currentItemsInDom.forEach(function (item) {
+                if (itemsToBeInsertedToDom.indexOf(item) === -1) {
+                    $LG("#" + item).remove();
+                }
+            });
+            return itemsToBeInsertedToDom;
+        };
+        /**
+         * Get previous index of the slide
+         */
+        LightGallery.prototype.getPreviousSlideIndex = function () {
+            var prevIndex = 0;
+            try {
+                var currentItemId = this.outer
+                    .find('.lg-current')
+                    .first()
+                    .attr('id');
+                prevIndex = parseInt(currentItemId.split('-')[3]) || 0;
+            }
+            catch (error) {
+                prevIndex = 0;
+            }
+            return prevIndex;
+        };
+        LightGallery.prototype.setDownloadValue = function (index) {
+            if (this.settings.download) {
+                var currentGalleryItem = this.galleryItems[index];
+                var hideDownloadBtn = currentGalleryItem.downloadUrl === false ||
+                    currentGalleryItem.downloadUrl === 'false';
+                if (hideDownloadBtn) {
+                    this.outer.addClass('lg-hide-download');
+                }
+                else {
+                    var $download = this.getElementById('lg-download');
+                    this.outer.removeClass('lg-hide-download');
+                    $download.attr('href', currentGalleryItem.downloadUrl ||
+                        currentGalleryItem.src);
+                    if (currentGalleryItem.download) {
+                        $download.attr('download', currentGalleryItem.download);
+                    }
+                }
+            }
+        };
+        LightGallery.prototype.makeSlideAnimation = function (direction, currentSlideItem, previousSlideItem) {
+            var _this = this;
+            if (this.lGalleryOn) {
+                previousSlideItem.addClass('lg-slide-progress');
+            }
+            setTimeout(function () {
+                // remove all transitions
+                _this.outer.addClass('lg-no-trans');
+                _this.outer
+                    .find('.lg-item')
+                    .removeClass('lg-prev-slide lg-next-slide');
+                if (direction === 'prev') {
+                    //prevslide
+                    currentSlideItem.addClass('lg-prev-slide');
+                    previousSlideItem.addClass('lg-next-slide');
+                }
+                else {
+                    // next slide
+                    currentSlideItem.addClass('lg-next-slide');
+                    previousSlideItem.addClass('lg-prev-slide');
+                }
+                // give 50 ms for browser to add/remove class
+                setTimeout(function () {
+                    _this.outer.find('.lg-item').removeClass('lg-current');
+                    currentSlideItem.addClass('lg-current');
+                    // reset all transitions
+                    _this.outer.removeClass('lg-no-trans');
+                }, 50);
+            }, this.lGalleryOn ? this.settings.slideDelay : 0);
+        };
+        /**
+         * Goto a specific slide.
+         * @param {Number} index - index of the slide
+         * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
+         * @param {Boolean} fromThumb - true if slide function called via thumbnail click
+         * @param {String} direction - Direction of the slide(next/prev)
+         * @category lGPublicMethods
+         * @example
+         *  const plugin = lightGallery();
+         *  // to go to 3rd slide
+         *  plugin.slide(2);
+         *
+         */
+        LightGallery.prototype.slide = function (index, fromTouch, fromThumb, direction) {
+            var _this = this;
+            var prevIndex = this.getPreviousSlideIndex();
+            this.currentItemsInDom = this.organizeSlideItems(index, prevIndex);
+            // Prevent multiple call, Required for hsh plugin
+            if (this.lGalleryOn && prevIndex === index) {
+                return;
+            }
+            var numberOfGalleryItems = this.galleryItems.length;
+            if (!this.lgBusy) {
+                if (this.settings.counter) {
+                    this.updateCurrentCounter(index);
+                }
+                var currentSlideItem = this.getSlideItem(index);
+                var previousSlideItem_1 = this.getSlideItem(prevIndex);
+                var currentGalleryItem = this.galleryItems[index];
+                var videoInfo = currentGalleryItem.__slideVideoInfo;
+                this.outer.attr('data-lg-slide-type', this.getSlideType(currentGalleryItem));
+                this.setDownloadValue(index);
+                if (videoInfo) {
+                    var _a = this.mediaContainerPosition, top_3 = _a.top, bottom = _a.bottom;
+                    var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom, videoInfo && this.settings.videoMaxSize);
+                    this.resizeVideoSlide(index, videoSize);
+                }
+                this.LGel.trigger(lGEvents.beforeSlide, {
+                    prevIndex: prevIndex,
+                    index: index,
+                    fromTouch: !!fromTouch,
+                    fromThumb: !!fromThumb,
+                });
+                this.lgBusy = true;
+                clearTimeout(this.hideBarTimeout);
+                this.arrowDisable(index);
+                if (!direction) {
+                    if (index < prevIndex) {
+                        direction = 'prev';
+                    }
+                    else if (index > prevIndex) {
+                        direction = 'next';
+                    }
+                }
+                if (!fromTouch) {
+                    this.makeSlideAnimation(direction, currentSlideItem, previousSlideItem_1);
+                }
+                else {
+                    this.outer
+                        .find('.lg-item')
+                        .removeClass('lg-prev-slide lg-current lg-next-slide');
+                    var touchPrev = void 0;
+                    var touchNext = void 0;
+                    if (numberOfGalleryItems > 2) {
+                        touchPrev = index - 1;
+                        touchNext = index + 1;
+                        if (index === 0 && prevIndex === numberOfGalleryItems - 1) {
+                            // next slide
+                            touchNext = 0;
+                            touchPrev = numberOfGalleryItems - 1;
+                        }
+                        else if (index === numberOfGalleryItems - 1 &&
+                            prevIndex === 0) {
+                            // prev slide
+                            touchNext = 0;
+                            touchPrev = numberOfGalleryItems - 1;
+                        }
+                    }
+                    else {
+                        touchPrev = 0;
+                        touchNext = 1;
+                    }
+                    if (direction === 'prev') {
+                        this.getSlideItem(touchNext).addClass('lg-next-slide');
+                    }
+                    else {
+                        this.getSlideItem(touchPrev).addClass('lg-prev-slide');
+                    }
+                    currentSlideItem.addClass('lg-current');
+                }
+                // Do not put load content in set timeout as it needs to load immediately when the gallery is opened
+                if (!this.lGalleryOn) {
+                    this.loadContent(index, true);
+                }
+                else {
+                    setTimeout(function () {
+                        _this.loadContent(index, true);
+                        // Add title if this.settings.appendSubHtmlTo === lg-sub-html
+                        if (_this.settings.appendSubHtmlTo !== '.lg-item') {
+                            _this.addHtml(index);
+                        }
+                    }, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay));
+                }
+                setTimeout(function () {
+                    _this.lgBusy = false;
+                    previousSlideItem_1.removeClass('lg-slide-progress');
+                    _this.LGel.trigger(lGEvents.afterSlide, {
+                        prevIndex: prevIndex,
+                        index: index,
+                        fromTouch: fromTouch,
+                        fromThumb: fromThumb,
+                    });
+                }, (this.lGalleryOn ? this.settings.speed + 100 : 100) + (fromTouch ? 0 : this.settings.slideDelay));
+            }
+            this.index = index;
+        };
+        LightGallery.prototype.updateCurrentCounter = function (index) {
+            this.getElementById('lg-counter-current').html(index + 1 + '');
+        };
+        LightGallery.prototype.updateCounterTotal = function () {
+            this.getElementById('lg-counter-all').html(this.galleryItems.length + '');
+        };
+        LightGallery.prototype.getSlideType = function (item) {
+            if (item.__slideVideoInfo) {
+                return 'video';
+            }
+            else if (item.iframe) {
+                return 'iframe';
+            }
+            else {
+                return 'image';
+            }
+        };
+        LightGallery.prototype.touchMove = function (startCoords, endCoords, e) {
+            var distanceX = endCoords.pageX - startCoords.pageX;
+            var distanceY = endCoords.pageY - startCoords.pageY;
+            var allowSwipe = false;
+            if (this.swipeDirection) {
+                allowSwipe = true;
+            }
+            else {
+                if (Math.abs(distanceX) > 15) {
+                    this.swipeDirection = 'horizontal';
+                    allowSwipe = true;
+                }
+                else if (Math.abs(distanceY) > 15) {
+                    this.swipeDirection = 'vertical';
+                    allowSwipe = true;
+                }
+            }
+            if (!allowSwipe) {
+                return;
+            }
+            var $currentSlide = this.getSlideItem(this.index);
+            if (this.swipeDirection === 'horizontal') {
+                e === null || e === void 0 ? void 0 : e.preventDefault();
+                // reset opacity and transition duration
+                this.outer.addClass('lg-dragging');
+                // move current slide
+                this.setTranslate($currentSlide, distanceX, 0);
+                // move next and prev slide with current slide
+                var width = $currentSlide.get().offsetWidth;
+                var slideWidthAmount = (width * 15) / 100;
+                var gutter = slideWidthAmount - Math.abs((distanceX * 10) / 100);
+                this.setTranslate(this.outer.find('.lg-prev-slide').first(), -width + distanceX - gutter, 0);
+                this.setTranslate(this.outer.find('.lg-next-slide').first(), width + distanceX + gutter, 0);
+            }
+            else if (this.swipeDirection === 'vertical') {
+                if (this.settings.swipeToClose) {
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    this.$container.addClass('lg-dragging-vertical');
+                    var opacity = 1 - Math.abs(distanceY) / window.innerHeight;
+                    this.$backdrop.css('opacity', opacity);
+                    var scale = 1 - Math.abs(distanceY) / (window.innerWidth * 2);
+                    this.setTranslate($currentSlide, 0, distanceY, scale, scale);
+                    if (Math.abs(distanceY) > 100) {
+                        this.outer
+                            .addClass('lg-hide-items')
+                            .removeClass('lg-components-open');
+                    }
+                }
+            }
+        };
+        LightGallery.prototype.touchEnd = function (endCoords, startCoords, event) {
+            var _this = this;
+            var distance;
+            // keep slide animation for any mode while dragg/swipe
+            if (this.settings.mode !== 'lg-slide') {
+                this.outer.addClass('lg-slide');
+            }
+            // set transition duration
+            setTimeout(function () {
+                _this.$container.removeClass('lg-dragging-vertical');
+                _this.outer
+                    .removeClass('lg-dragging lg-hide-items')
+                    .addClass('lg-components-open');
+                var triggerClick = true;
+                if (_this.swipeDirection === 'horizontal') {
+                    distance = endCoords.pageX - startCoords.pageX;
+                    var distanceAbs = Math.abs(endCoords.pageX - startCoords.pageX);
+                    if (distance < 0 &&
+                        distanceAbs > _this.settings.swipeThreshold) {
+                        _this.goToNextSlide(true);
+                        triggerClick = false;
+                    }
+                    else if (distance > 0 &&
+                        distanceAbs > _this.settings.swipeThreshold) {
+                        _this.goToPrevSlide(true);
+                        triggerClick = false;
+                    }
+                }
+                else if (_this.swipeDirection === 'vertical') {
+                    distance = Math.abs(endCoords.pageY - startCoords.pageY);
+                    if (_this.settings.closable &&
+                        _this.settings.swipeToClose &&
+                        distance > 100) {
+                        _this.closeGallery();
+                        return;
+                    }
+                    else {
+                        _this.$backdrop.css('opacity', 1);
+                    }
+                }
+                _this.outer.find('.lg-item').removeAttr('style');
+                if (triggerClick &&
+                    Math.abs(endCoords.pageX - startCoords.pageX) < 5) {
+                    // Trigger click if distance is less than 5 pix
+                    var target = $LG(event.target);
+                    if (_this.isPosterElement(target)) {
+                        _this.LGel.trigger(lGEvents.posterClick);
+                    }
+                }
+                _this.swipeDirection = undefined;
+            });
+            // remove slide class once drag/swipe is completed if mode is not slide
+            setTimeout(function () {
+                if (!_this.outer.hasClass('lg-dragging') &&
+                    _this.settings.mode !== 'lg-slide') {
+                    _this.outer.removeClass('lg-slide');
+                }
+            }, this.settings.speed + 100);
+        };
+        LightGallery.prototype.enableSwipe = function () {
+            var _this = this;
+            var startCoords = {};
+            var endCoords = {};
+            var isMoved = false;
+            var isSwiping = false;
+            if (this.settings.enableSwipe) {
+                this.$inner.on('touchstart.lg', function (e) {
+                    _this.dragOrSwipeEnabled = true;
+                    var $item = _this.getSlideItem(_this.index);
+                    if (($LG(e.target).hasClass('lg-item') ||
+                        $item.get().contains(e.target)) &&
+                        !_this.outer.hasClass('lg-zoomed') &&
+                        !_this.lgBusy &&
+                        e.targetTouches.length === 1) {
+                        isSwiping = true;
+                        _this.touchAction = 'swipe';
+                        _this.manageSwipeClass();
+                        startCoords = {
+                            pageX: e.targetTouches[0].pageX,
+                            pageY: e.targetTouches[0].pageY,
+                        };
+                    }
+                });
+                this.$inner.on('touchmove.lg', function (e) {
+                    if (isSwiping &&
+                        _this.touchAction === 'swipe' &&
+                        e.targetTouches.length === 1) {
+                        endCoords = {
+                            pageX: e.targetTouches[0].pageX,
+                            pageY: e.targetTouches[0].pageY,
+                        };
+                        _this.touchMove(startCoords, endCoords, e);
+                        isMoved = true;
+                    }
+                });
+                this.$inner.on('touchend.lg', function (event) {
+                    if (_this.touchAction === 'swipe') {
+                        if (isMoved) {
+                            isMoved = false;
+                            _this.touchEnd(endCoords, startCoords, event);
+                        }
+                        else if (isSwiping) {
+                            var target = $LG(event.target);
+                            if (_this.isPosterElement(target)) {
+                                _this.LGel.trigger(lGEvents.posterClick);
+                            }
+                        }
+                        _this.touchAction = undefined;
+                        isSwiping = false;
+                    }
+                });
+            }
+        };
+        LightGallery.prototype.enableDrag = function () {
+            var _this = this;
+            var startCoords = {};
+            var endCoords = {};
+            var isDraging = false;
+            var isMoved = false;
+            if (this.settings.enableDrag) {
+                this.outer.on('mousedown.lg', function (e) {
+                    _this.dragOrSwipeEnabled = true;
+                    var $item = _this.getSlideItem(_this.index);
+                    if ($LG(e.target).hasClass('lg-item') ||
+                        $item.get().contains(e.target)) {
+                        if (!_this.outer.hasClass('lg-zoomed') && !_this.lgBusy) {
+                            e.preventDefault();
+                            if (!_this.lgBusy) {
+                                _this.manageSwipeClass();
+                                startCoords = {
+                                    pageX: e.pageX,
+                                    pageY: e.pageY,
+                                };
+                                isDraging = true;
+                                // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+                                _this.outer.get().scrollLeft += 1;
+                                _this.outer.get().scrollLeft -= 1;
+                                // *
+                                _this.outer
+                                    .removeClass('lg-grab')
+                                    .addClass('lg-grabbing');
+                                _this.LGel.trigger(lGEvents.dragStart);
+                            }
+                        }
+                    }
+                });
+                $LG(window).on("mousemove.lg.global" + this.lgId, function (e) {
+                    if (isDraging && _this.lgOpened) {
+                        isMoved = true;
+                        endCoords = {
+                            pageX: e.pageX,
+                            pageY: e.pageY,
+                        };
+                        _this.touchMove(startCoords, endCoords);
+                        _this.LGel.trigger(lGEvents.dragMove);
+                    }
+                });
+                $LG(window).on("mouseup.lg.global" + this.lgId, function (event) {
+                    if (!_this.lgOpened) {
+                        return;
+                    }
+                    var target = $LG(event.target);
+                    if (isMoved) {
+                        isMoved = false;
+                        _this.touchEnd(endCoords, startCoords, event);
+                        _this.LGel.trigger(lGEvents.dragEnd);
+                    }
+                    else if (_this.isPosterElement(target)) {
+                        _this.LGel.trigger(lGEvents.posterClick);
+                    }
+                    // Prevent execution on click
+                    if (isDraging) {
+                        isDraging = false;
+                        _this.outer.removeClass('lg-grabbing').addClass('lg-grab');
+                    }
+                });
+            }
+        };
+        LightGallery.prototype.triggerPosterClick = function () {
+            var _this = this;
+            this.$inner.on('click.lg', function (event) {
+                if (!_this.dragOrSwipeEnabled &&
+                    _this.isPosterElement($LG(event.target))) {
+                    _this.LGel.trigger(lGEvents.posterClick);
+                }
+            });
+        };
+        LightGallery.prototype.manageSwipeClass = function () {
+            var _touchNext = this.index + 1;
+            var _touchPrev = this.index - 1;
+            if (this.settings.loop && this.galleryItems.length > 2) {
+                if (this.index === 0) {
+                    _touchPrev = this.galleryItems.length - 1;
+                }
+                else if (this.index === this.galleryItems.length - 1) {
+                    _touchNext = 0;
+                }
+            }
+            this.outer.find('.lg-item').removeClass('lg-next-slide lg-prev-slide');
+            if (_touchPrev > -1) {
+                this.getSlideItem(_touchPrev).addClass('lg-prev-slide');
+            }
+            this.getSlideItem(_touchNext).addClass('lg-next-slide');
+        };
+        /**
+         * Go to next slide
+         * @param {Boolean} fromTouch - true if slide function called via touch event
+         * @category lGPublicMethods
+         * @example
+         *  const plugin = lightGallery();
+         *  plugin.goToNextSlide();
+         * @see <a href="/demos/methods/">Demo</a>
+         */
+        LightGallery.prototype.goToNextSlide = function (fromTouch) {
+            var _this = this;
+            var _loop = this.settings.loop;
+            if (fromTouch && this.galleryItems.length < 3) {
+                _loop = false;
+            }
+            if (!this.lgBusy) {
+                if (this.index + 1 < this.galleryItems.length) {
+                    this.index++;
+                    this.LGel.trigger(lGEvents.beforeNextSlide, {
+                        index: this.index,
+                    });
+                    this.slide(this.index, !!fromTouch, false, 'next');
+                }
+                else {
+                    if (_loop) {
+                        this.index = 0;
+                        this.LGel.trigger(lGEvents.beforeNextSlide, {
+                            index: this.index,
+                        });
+                        this.slide(this.index, !!fromTouch, false, 'next');
+                    }
+                    else if (this.settings.slideEndAnimation && !fromTouch) {
+                        this.outer.addClass('lg-right-end');
+                        setTimeout(function () {
+                            _this.outer.removeClass('lg-right-end');
+                        }, 400);
+                    }
+                }
+            }
+        };
+        /**
+         * Go to previous slides
+         * @param {Boolean} fromTouch - true if slide function called via touch event
+         * @category lGPublicMethods
+         * @example
+         *  const plugin = lightGallery({});
+         *  plugin.goToPrevSlide();
+         * @see <a href="/demos/methods/">Demo</a>
+         *
+         */
+        LightGallery.prototype.goToPrevSlide = function (fromTouch) {
+            var _this = this;
+            var _loop = this.settings.loop;
+            if (fromTouch && this.galleryItems.length < 3) {
+                _loop = false;
+            }
+            if (!this.lgBusy) {
+                if (this.index > 0) {
+                    this.index--;
+                    this.LGel.trigger(lGEvents.beforePrevSlide, {
+                        index: this.index,
+                        fromTouch: fromTouch,
+                    });
+                    this.slide(this.index, !!fromTouch, false, 'prev');
+                }
+                else {
+                    if (_loop) {
+                        this.index = this.galleryItems.length - 1;
+                        this.LGel.trigger(lGEvents.beforePrevSlide, {
+                            index: this.index,
+                            fromTouch: fromTouch,
+                        });
+                        this.slide(this.index, !!fromTouch, false, 'prev');
+                    }
+                    else if (this.settings.slideEndAnimation && !fromTouch) {
+                        this.outer.addClass('lg-left-end');
+                        setTimeout(function () {
+                            _this.outer.removeClass('lg-left-end');
+                        }, 400);
+                    }
+                }
+            }
+        };
+        LightGallery.prototype.keyPress = function () {
+            var _this = this;
+            $LG(window).on("keydown.lg.global" + this.lgId, function (e) {
+                if (_this.lgOpened &&
+                    _this.settings.escKey === true &&
+                    e.keyCode === 27) {
+                    e.preventDefault();
+                    if (_this.settings.allowMediaOverlap &&
+                        _this.outer.hasClass('lg-can-toggle') &&
+                        _this.outer.hasClass('lg-components-open')) {
+                        _this.outer.removeClass('lg-components-open');
+                    }
+                    else {
+                        _this.closeGallery();
+                    }
+                }
+                if (_this.lgOpened && _this.galleryItems.length > 1) {
+                    if (e.keyCode === 37) {
+                        e.preventDefault();
+                        _this.goToPrevSlide();
+                    }
+                    if (e.keyCode === 39) {
+                        e.preventDefault();
+                        _this.goToNextSlide();
+                    }
+                }
+            });
+        };
+        LightGallery.prototype.arrow = function () {
+            var _this = this;
+            this.getElementById('lg-prev').on('click.lg', function () {
+                _this.goToPrevSlide();
+            });
+            this.getElementById('lg-next').on('click.lg', function () {
+                _this.goToNextSlide();
+            });
+        };
+        LightGallery.prototype.arrowDisable = function (index) {
+            // Disable arrows if settings.hideControlOnEnd is true
+            if (!this.settings.loop && this.settings.hideControlOnEnd) {
+                var $prev = this.getElementById('lg-prev');
+                var $next = this.getElementById('lg-next');
+                if (index + 1 === this.galleryItems.length) {
+                    $next.attr('disabled', 'disabled').addClass('disabled');
+                }
+                else {
+                    $next.removeAttr('disabled').removeClass('disabled');
+                }
+                if (index === 0) {
+                    $prev.attr('disabled', 'disabled').addClass('disabled');
+                }
+                else {
+                    $prev.removeAttr('disabled').removeClass('disabled');
+                }
+            }
+        };
+        LightGallery.prototype.setTranslate = function ($el, xValue, yValue, scaleX, scaleY) {
+            if (scaleX === void 0) { scaleX = 1; }
+            if (scaleY === void 0) { scaleY = 1; }
+            $el.css('transform', 'translate3d(' +
+                xValue +
+                'px, ' +
+                yValue +
+                'px, 0px) scale3d(' +
+                scaleX +
+                ', ' +
+                scaleY +
+                ', 1)');
+        };
+        LightGallery.prototype.mousewheel = function () {
+            var _this = this;
+            var lastCall = 0;
+            this.outer.on('wheel.lg', function (e) {
+                if (!e.deltaY || _this.galleryItems.length < 2) {
+                    return;
+                }
+                e.preventDefault();
+                var now = new Date().getTime();
+                if (now - lastCall < 1000) {
+                    return;
+                }
+                lastCall = now;
+                if (e.deltaY > 0) {
+                    _this.goToNextSlide();
+                }
+                else if (e.deltaY < 0) {
+                    _this.goToPrevSlide();
+                }
+            });
+        };
+        LightGallery.prototype.isSlideElement = function (target) {
+            return (target.hasClass('lg-outer') ||
+                target.hasClass('lg-item') ||
+                target.hasClass('lg-img-wrap'));
+        };
+        LightGallery.prototype.isPosterElement = function (target) {
+            var playButton = this.getSlideItem(this.index)
+                .find('.lg-video-play-button')
+                .get();
+            return (target.hasClass('lg-video-poster') ||
+                target.hasClass('lg-video-play-button') ||
+                (playButton && playButton.contains(target.get())));
+        };
+        /**
+         * Maximize minimize inline gallery.
+         * @category lGPublicMethods
+         */
+        LightGallery.prototype.toggleMaximize = function () {
+            var _this = this;
+            this.getElementById('lg-maximize').on('click.lg', function () {
+                _this.$container.toggleClass('lg-inline');
+                _this.refreshOnResize();
+            });
+        };
+        LightGallery.prototype.invalidateItems = function () {
+            for (var index = 0; index < this.items.length; index++) {
+                var element = this.items[index];
+                var $element = $LG(element);
+                $element.off("click.lgcustom-item-" + $element.attr('data-lg-id'));
+            }
+        };
+        LightGallery.prototype.manageCloseGallery = function () {
+            var _this = this;
+            if (!this.settings.closable)
+                return;
+            var mousedown = false;
+            this.getElementById('lg-close').on('click.lg', function () {
+                _this.closeGallery();
+            });
+            if (this.settings.closeOnTap) {
+                // If you drag the slide and release outside gallery gets close on chrome
+                // for preventing this check mousedown and mouseup happened on .lg-item or lg-outer
+                this.outer.on('mousedown.lg', function (e) {
+                    var target = $LG(e.target);
+                    if (_this.isSlideElement(target)) {
+                        mousedown = true;
+                    }
+                    else {
+                        mousedown = false;
+                    }
+                });
+                this.outer.on('mousemove.lg', function () {
+                    mousedown = false;
+                });
+                this.outer.on('mouseup.lg', function (e) {
+                    var target = $LG(e.target);
+                    if (_this.isSlideElement(target) && mousedown) {
+                        if (!_this.outer.hasClass('lg-dragging')) {
+                            _this.closeGallery();
+                        }
+                    }
+                });
+            }
+        };
+        /**
+         * Close lightGallery if it is opened.
+         *
+         * @description If closable is false in the settings, you need to pass true via closeGallery method to force close gallery
+         * @return returns the estimated time to close gallery completely including the close animation duration
+         * @category lGPublicMethods
+         * @example
+         *  const plugin = lightGallery();
+         *  plugin.closeGallery();
+         *
+         */
+        LightGallery.prototype.closeGallery = function (force) {
+            var _this = this;
+            if (!this.lgOpened || (!this.settings.closable && !force)) {
+                return 0;
+            }
+            this.LGel.trigger(lGEvents.beforeClose);
+            $LG(window).scrollTop(this.prevScrollTop);
+            var currentItem = this.items[this.index];
+            var transform;
+            if (this.zoomFromOrigin && currentItem) {
+                var _a = this.mediaContainerPosition, top_4 = _a.top, bottom = _a.bottom;
+                var _b = this.galleryItems[this.index], __slideVideoInfo = _b.__slideVideoInfo, poster = _b.poster;
+                var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo && poster && this.settings.videoMaxSize);
+                transform = utils.getTransform(currentItem, this.outer, top_4, bottom, imageSize);
+            }
+            if (this.zoomFromOrigin && transform) {
+                this.outer.addClass('lg-closing lg-zoom-from-image');
+                this.getSlideItem(this.index)
+                    .addClass('lg-start-end-progress')
+                    .css('transition-duration', this.settings.startAnimationDuration + 'ms')
+                    .css('transform', transform);
+            }
+            else {
+                this.outer.addClass('lg-hide-items');
+                // lg-zoom-from-image is used for setting the opacity to 1 if zoomFromOrigin is true
+                // If the closing item doesn't have the lg-size attribute, remove this class to avoid the closing css conflicts
+                this.outer.removeClass('lg-zoom-from-image');
+            }
+            // Unbind all events added by lightGallery
+            // @todo
+            //this.$el.off('.lg.tm');
+            this.destroyModules();
+            this.lGalleryOn = false;
+            this.isDummyImageRemoved = false;
+            this.zoomFromOrigin = this.settings.zoomFromOrigin;
+            clearTimeout(this.hideBarTimeout);
+            this.hideBarTimeout = false;
+            $LG('html').removeClass('lg-on');
+            this.outer.removeClass('lg-visible lg-components-open');
+            // Resetting opacity to 0 isd required as  vertical swipe to close function adds inline opacity.
+            this.$backdrop.removeClass('in').css('opacity', 0);
+            var removeTimeout = this.zoomFromOrigin && transform
+                ? Math.max(this.settings.startAnimationDuration, this.settings.backdropDuration)
+                : this.settings.backdropDuration;
+            this.$container.removeClass('lg-show-in');
+            // Once the closign animation is completed and gallery is invisible
+            setTimeout(function () {
+                if (_this.zoomFromOrigin && transform) {
+                    _this.outer.removeClass('lg-zoom-from-image');
+                }
+                _this.$container.removeClass('lg-show');
+                // Need to remove inline opacity as it is used in the stylesheet as well
+                _this.$backdrop
+                    .removeAttr('style')
+                    .css('transition-duration', _this.settings.backdropDuration + 'ms');
+                _this.outer.removeClass("lg-closing " + _this.settings.startClass);
+                _this.getSlideItem(_this.index).removeClass('lg-start-end-progress');
+                _this.$inner.empty();
+                if (_this.lgOpened) {
+                    _this.LGel.trigger(lGEvents.afterClose, {
+                        instance: _this,
+                    });
+                }
+                if (_this.outer.get()) {
+                    _this.outer.get().blur();
+                }
+                _this.lgOpened = false;
+            }, removeTimeout + 100);
+            return removeTimeout + 100;
+        };
+        LightGallery.prototype.initModules = function () {
+            this.plugins.forEach(function (module) {
+                try {
+                    module.init();
+                }
+                catch (err) {
+                    console.warn("lightGallery:- make sure lightGallery module is properly initiated");
+                }
+            });
+        };
+        LightGallery.prototype.destroyModules = function (destroy) {
+            this.plugins.forEach(function (module) {
+                try {
+                    if (destroy) {
+                        module.destroy();
+                    }
+                    else {
+                        module.closeGallery && module.closeGallery();
+                    }
+                }
+                catch (err) {
+                    console.warn("lightGallery:- make sure lightGallery module is properly destroyed");
+                }
+            });
+        };
+        /**
+         * Refresh lightGallery with new set of children.
+         *
+         * @description This is useful to update the gallery when the child elements are changed without calling destroy method.
+         *
+         * If you are using dynamic mode, you can pass the modified array of dynamicEl as the first parameter to refresh the dynamic gallery
+         * @see <a href="/demos/dynamic-mode/">Demo</a>
+         * @category lGPublicMethods
+         * @example
+         *  const plugin = lightGallery();
+         *  // Delete or add children, then call
+         *  plugin.refresh();
+         *
+         */
+        LightGallery.prototype.refresh = function (galleryItems) {
+            if (!this.settings.dynamic) {
+                this.invalidateItems();
+            }
+            if (galleryItems) {
+                this.galleryItems = galleryItems;
+            }
+            else {
+                this.galleryItems = this.getItems();
+            }
+            this.updateControls();
+            this.openGalleryOnItemClick();
+            this.LGel.trigger(lGEvents.updateSlides);
+        };
+        LightGallery.prototype.updateControls = function () {
+            this.addSlideVideoInfo(this.galleryItems);
+            this.updateCounterTotal();
+            this.manageSingleSlideClassName();
+        };
+        /**
+         * Destroy lightGallery.
+         * Destroy lightGallery and its plugin instances completely
+         *
+         * @description This method also calls CloseGallery function internally. Returns the time takes to completely close and destroy the instance.
+         * In case if you want to re-initialize lightGallery right after destroying it, initialize it only once the destroy process is completed.
+         * You can use refresh method most of the times.
+         * @category lGPublicMethods
+         * @example
+         *  const plugin = lightGallery();
+         *  plugin.destroy();
+         *
+         */
+        LightGallery.prototype.destroy = function () {
+            var _this = this;
+            var closeTimeout = this.closeGallery(true);
+            setTimeout(function () {
+                _this.destroyModules(true);
+                if (!_this.settings.dynamic) {
+                    _this.invalidateItems();
+                }
+                $LG(window).off(".lg.global" + _this.lgId);
+                _this.LGel.off('.lg');
+                _this.$container.remove();
+            }, closeTimeout);
+            return closeTimeout;
+        };
+        return LightGallery;
+    }());
+
+    function lightGallery(el, options) {
+        return new LightGallery(el, options);
+    }
+
+    return lightGallery;
+
+})));
+//# sourceMappingURL=lightgallery.umd.js.map

res/js/zipfile_creation.js

@@ -0,0 +1,50 @@
+const startButton = document.getElementById('startButton');
+const statusDiv = document.getElementById('zipstatus');
+
+let pollingInterval = null;
+
+startButton.addEventListener('click', startZipCreation);
+
+function startZipCreation() {
+    console.log(startButton.getAttribute('data-dir2zip'));
+    const sourcePath = startButton.getAttribute('data-dir2zip');
+    if (!sourcePath) {
+        alert('Please enter the source path');
+        return;
+    }
+    
+    fetch('/start_zip', {
+        method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ source_path: sourcePath })
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log(data);
+            startPolling();
+        })
+        .catch(error => console.error('Error starting zip creation:', error));
+}
+
+function startPolling() {
+    statusDiv.innerText = 'Zip creation in progress...';
+    pollingInterval = setInterval(pollStatus, 1000);
+}
+
+function pollStatus() {
+    fetch('/status')
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'completed') {
+                clearInterval(pollingInterval);
+                statusDiv.innerText = 'Zip creation completed. Downloading...';
+                window.location.href = '/download';
+            } else if (data.status === 'failed') {
+                    clearInterval(pollingInterval);
+                statusDiv.innerText = `Error: ${data.error}`;
+            } else {
+                statusDiv.innerText = 'Zip creation in progress...';
+            }
+        })
+        .catch(error => console.error('Error polling status:', error));
+}

res/lightgallery_search.js

@@ -0,0 +1,83 @@
+var icons = { 'title': {img: 'text.png',   alt: 'Titel / Beschreibung'},
+              'where': {img: 'map.png',    alt: 'Ort'},
+              'what':  {img: 'thing.png',    alt: 'Sache'},
+              'photography':  {img: 'camera.png',    alt: 'Fotografie'},
+              'gallery':  {img: 'gallery.png',    alt: 'Galerie'},
+              'who'  : {img: 'person.png', alt: 'Person'},
+              'year' : {img: 'calendar.png', alt: 'Jahr'},
+              'default' : {img: 'calendar.png', alt: 'default'},
+              'description' : {img: 'description.png', alt: 'Beschreibung'} };
+
+var jdata = JSON.parse(data);
+var metadata = JSON.parse(metadata);
+
+$(document).ready(function(){
+    // $('#txt-search').keyup(function(){
+    $('#txt-search').on('keyup input', function(){
+        $('#myTab a[href="#filters"]').tab('show') 
+        var searchField = $(this).val();
+	if(searchField === '')  {
+	    $('#filter-records').html('');
+	    return;
+	}
+	
+        var regex = new RegExp(searchField, "i");
+        var output = '<div class="row">';
+        var count = 1;
+        $.each(jdata, function(key, val) {
+	    if (val.name.search(regex) != -1) {
+                // console.log('Type: ' + val.type);
+		output += '<div id="search-'+val.id+'"class="col-md-6 well" onclick="javascript:build_lightgallery('+val.id+')">';
+		output += '<div class="col-md-3"><img class="img-responsive" src="/res/images/' + icons[val.type || 'default']['img'] + '" alt="' + icons[val.type]['alt'] + '" title="' + icons[val.type]['alt'] + '" /></div>';
+		output += '<div class="col-md-8">';
+		output += '<h4>' + val.name + '</h4>';
+		output += '</div>';
+		output += '</div>';
+		if(count%4 == 0){
+		    output += '</div><div class="row">'
+		}
+		count++;
+	    }
+	});
+	output += '</div>';
+	$('#filters').html(output);
+    });
+});
+
+function thumb_with_path( img ) {
+    path = img.replace(/\/.*$/gi, '');
+    thumb = img.replace(/.*\//gi, '');
+    return(path + '/_thumbnails/' + thumb);
+}
+
+function build_lightgallery(id) {
+    console.log('build_lightgallery ' + id);
+    record = jdata[id];
+    if (record.type == 'gallery') {
+        console.log(window.location + record.dir + '/');
+        window.open(window.location + record.dir + '/');
+    } else {
+        images = record.images;
+        var dynimages = [];
+        var output = ''
+        // i = 0;
+        for (let img of images) {
+            // console.log(img);
+            // dynimages[i] = {'src': img, 'thumb': thumb_with_path(img), 'subHtml':'dummy'};
+            output += '<div class="img-wrapper" data-src="' + img + '" data-sub-html="' + metadata[img] + '">';
+            output += '<a href="' + img + '">'
+            output += '<img src="' + thumb_with_path(img) + '"></a></div>';
+            //i = i + 1;
+        }
+        $('#results').html(output);
+        $('#myTab a[href="#results"]').tab('show')
+        
+        lightGallery(document.getElementById('results'), {
+            plugins: [lgZoom, lgThumbnail, lgAutoplay, lgFullscreen
+                     ], /* , lgMediumZoom, lgRelativeCaption, lgShare, lgPager, lgHash */
+            speed: 500,
+            // licenseKey: '0000-0000-000-0000',
+            mode: 'fade'
+        });
+    }
+}

res/plugins/autoplay/lg-autoplay.es5.js

@@ -0,0 +1,248 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var autoplaySettings = {
+    autoplay: true,
+    slideShowAutoplay: false,
+    slideShowInterval: 5000,
+    progressBar: true,
+    forceSlideShowAutoplay: false,
+    autoplayControls: true,
+    appendAutoplayControlsTo: '.lg-toolbar',
+    autoplayPluginStrings: { toggleAutoplay: 'Toggle Autoplay' },
+};
+
+/**
+ * Creates the autoplay plugin.
+ * @param {object} element - lightGallery element
+ */
+var Autoplay = /** @class */ (function () {
+    function Autoplay(instance) {
+        this.core = instance;
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, autoplaySettings), this.core.settings);
+        return this;
+    }
+    Autoplay.prototype.init = function () {
+        var _this = this;
+        if (!this.settings.autoplay) {
+            return;
+        }
+        this.interval = false;
+        // Identify if slide happened from autoplay
+        this.fromAuto = true;
+        // Identify if autoplay canceled from touch/drag
+        this.pausedOnTouchDrag = false;
+        this.pausedOnSlideChange = false;
+        // append autoplay controls
+        if (this.settings.autoplayControls) {
+            this.controls();
+        }
+        // Create progress bar
+        if (this.settings.progressBar) {
+            this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
+        }
+        // Start autoplay
+        if (this.settings.slideShowAutoplay) {
+            this.core.LGel.once(lGEvents.slideItemLoad + ".autoplay", function () {
+                _this.startAutoPlay();
+            });
+        }
+        // cancel interval on touchstart and dragstart
+        this.core.LGel.on(lGEvents.dragStart + ".autoplay touchstart.lg.autoplay", function () {
+            if (_this.interval) {
+                _this.stopAutoPlay();
+                _this.pausedOnTouchDrag = true;
+            }
+        });
+        // restore autoplay if autoplay canceled from touchstart / dragstart
+        this.core.LGel.on(lGEvents.dragEnd + ".autoplay touchend.lg.autoplay", function () {
+            if (!_this.interval && _this.pausedOnTouchDrag) {
+                _this.startAutoPlay();
+                _this.pausedOnTouchDrag = false;
+            }
+        });
+        this.core.LGel.on(lGEvents.beforeSlide + ".autoplay", function () {
+            _this.showProgressBar();
+            if (!_this.fromAuto && _this.interval) {
+                _this.stopAutoPlay();
+                _this.pausedOnSlideChange = true;
+            }
+            else {
+                _this.pausedOnSlideChange = false;
+            }
+            _this.fromAuto = false;
+        });
+        // restore autoplay if autoplay canceled from touchstart / dragstart
+        this.core.LGel.on(lGEvents.afterSlide + ".autoplay", function () {
+            if (_this.pausedOnSlideChange &&
+                !_this.interval &&
+                _this.settings.forceSlideShowAutoplay) {
+                _this.startAutoPlay();
+                _this.pausedOnSlideChange = false;
+            }
+        });
+        // set progress
+        this.showProgressBar();
+    };
+    Autoplay.prototype.showProgressBar = function () {
+        var _this = this;
+        if (this.settings.progressBar && this.fromAuto) {
+            var _$progressBar_1 = this.core.outer.find('.lg-progress-bar');
+            var _$progress_1 = this.core.outer.find('.lg-progress');
+            if (this.interval) {
+                _$progress_1.removeAttr('style');
+                _$progressBar_1.removeClass('lg-start');
+                setTimeout(function () {
+                    _$progress_1.css('transition', 'width ' +
+                        (_this.core.settings.speed +
+                            _this.settings.slideShowInterval) +
+                        'ms ease 0s');
+                    _$progressBar_1.addClass('lg-start');
+                }, 20);
+            }
+        }
+    };
+    // Manage autoplay via play/stop buttons
+    Autoplay.prototype.controls = function () {
+        var _this = this;
+        var _html = "<button aria-label=\"" + this.settings.autoplayPluginStrings['toggleAutoplay'] + "\" type=\"button\" class=\"lg-autoplay-button lg-icon\"></button>";
+        // Append autoplay controls
+        this.core.outer
+            .find(this.settings.appendAutoplayControlsTo)
+            .append(_html);
+        this.core.outer
+            .find('.lg-autoplay-button')
+            .first()
+            .on('click.lg.autoplay', function () {
+            if (_this.core.outer.hasClass('lg-show-autoplay')) {
+                _this.stopAutoPlay();
+            }
+            else {
+                if (!_this.interval) {
+                    _this.startAutoPlay();
+                }
+            }
+        });
+    };
+    // Autostart gallery
+    Autoplay.prototype.startAutoPlay = function () {
+        var _this = this;
+        this.core.outer
+            .find('.lg-progress')
+            .css('transition', 'width ' +
+            (this.core.settings.speed +
+                this.settings.slideShowInterval) +
+            'ms ease 0s');
+        this.core.outer.addClass('lg-show-autoplay');
+        this.core.outer.find('.lg-progress-bar').addClass('lg-start');
+        this.core.LGel.trigger(lGEvents.autoplayStart, {
+            index: this.core.index,
+        });
+        this.interval = setInterval(function () {
+            if (_this.core.index + 1 < _this.core.galleryItems.length) {
+                _this.core.index++;
+            }
+            else {
+                _this.core.index = 0;
+            }
+            _this.core.LGel.trigger(lGEvents.autoplay, {
+                index: _this.core.index,
+            });
+            _this.fromAuto = true;
+            _this.core.slide(_this.core.index, false, false, 'next');
+        }, this.core.settings.speed + this.settings.slideShowInterval);
+    };
+    // cancel Autostart
+    Autoplay.prototype.stopAutoPlay = function () {
+        if (this.interval) {
+            this.core.LGel.trigger(lGEvents.autoplayStop, {
+                index: this.core.index,
+            });
+            this.core.outer.find('.lg-progress').removeAttr('style');
+            this.core.outer.removeClass('lg-show-autoplay');
+            this.core.outer.find('.lg-progress-bar').removeClass('lg-start');
+        }
+        clearInterval(this.interval);
+        this.interval = false;
+    };
+    Autoplay.prototype.closeGallery = function () {
+        this.stopAutoPlay();
+    };
+    Autoplay.prototype.destroy = function () {
+        if (this.settings.autoplay) {
+            this.core.outer.find('.lg-progress-bar').remove();
+        }
+        // Remove all event listeners added by autoplay plugin
+        this.core.LGel.off('.lg.autoplay');
+        this.core.LGel.off('.autoplay');
+    };
+    return Autoplay;
+}());
+
+export default Autoplay;
+//# sourceMappingURL=lg-autoplay.es5.js.map

res/plugins/autoplay/lg-autoplay.umd.js

@@ -0,0 +1,256 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgAutoplay = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var autoplaySettings = {
+        autoplay: true,
+        slideShowAutoplay: false,
+        slideShowInterval: 5000,
+        progressBar: true,
+        forceSlideShowAutoplay: false,
+        autoplayControls: true,
+        appendAutoplayControlsTo: '.lg-toolbar',
+        autoplayPluginStrings: { toggleAutoplay: 'Toggle Autoplay' },
+    };
+
+    /**
+     * Creates the autoplay plugin.
+     * @param {object} element - lightGallery element
+     */
+    var Autoplay = /** @class */ (function () {
+        function Autoplay(instance) {
+            this.core = instance;
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, autoplaySettings), this.core.settings);
+            return this;
+        }
+        Autoplay.prototype.init = function () {
+            var _this = this;
+            if (!this.settings.autoplay) {
+                return;
+            }
+            this.interval = false;
+            // Identify if slide happened from autoplay
+            this.fromAuto = true;
+            // Identify if autoplay canceled from touch/drag
+            this.pausedOnTouchDrag = false;
+            this.pausedOnSlideChange = false;
+            // append autoplay controls
+            if (this.settings.autoplayControls) {
+                this.controls();
+            }
+            // Create progress bar
+            if (this.settings.progressBar) {
+                this.core.outer.append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
+            }
+            // Start autoplay
+            if (this.settings.slideShowAutoplay) {
+                this.core.LGel.once(lGEvents.slideItemLoad + ".autoplay", function () {
+                    _this.startAutoPlay();
+                });
+            }
+            // cancel interval on touchstart and dragstart
+            this.core.LGel.on(lGEvents.dragStart + ".autoplay touchstart.lg.autoplay", function () {
+                if (_this.interval) {
+                    _this.stopAutoPlay();
+                    _this.pausedOnTouchDrag = true;
+                }
+            });
+            // restore autoplay if autoplay canceled from touchstart / dragstart
+            this.core.LGel.on(lGEvents.dragEnd + ".autoplay touchend.lg.autoplay", function () {
+                if (!_this.interval && _this.pausedOnTouchDrag) {
+                    _this.startAutoPlay();
+                    _this.pausedOnTouchDrag = false;
+                }
+            });
+            this.core.LGel.on(lGEvents.beforeSlide + ".autoplay", function () {
+                _this.showProgressBar();
+                if (!_this.fromAuto && _this.interval) {
+                    _this.stopAutoPlay();
+                    _this.pausedOnSlideChange = true;
+                }
+                else {
+                    _this.pausedOnSlideChange = false;
+                }
+                _this.fromAuto = false;
+            });
+            // restore autoplay if autoplay canceled from touchstart / dragstart
+            this.core.LGel.on(lGEvents.afterSlide + ".autoplay", function () {
+                if (_this.pausedOnSlideChange &&
+                    !_this.interval &&
+                    _this.settings.forceSlideShowAutoplay) {
+                    _this.startAutoPlay();
+                    _this.pausedOnSlideChange = false;
+                }
+            });
+            // set progress
+            this.showProgressBar();
+        };
+        Autoplay.prototype.showProgressBar = function () {
+            var _this = this;
+            if (this.settings.progressBar && this.fromAuto) {
+                var _$progressBar_1 = this.core.outer.find('.lg-progress-bar');
+                var _$progress_1 = this.core.outer.find('.lg-progress');
+                if (this.interval) {
+                    _$progress_1.removeAttr('style');
+                    _$progressBar_1.removeClass('lg-start');
+                    setTimeout(function () {
+                        _$progress_1.css('transition', 'width ' +
+                            (_this.core.settings.speed +
+                                _this.settings.slideShowInterval) +
+                            'ms ease 0s');
+                        _$progressBar_1.addClass('lg-start');
+                    }, 20);
+                }
+            }
+        };
+        // Manage autoplay via play/stop buttons
+        Autoplay.prototype.controls = function () {
+            var _this = this;
+            var _html = "<button aria-label=\"" + this.settings.autoplayPluginStrings['toggleAutoplay'] + "\" type=\"button\" class=\"lg-autoplay-button lg-icon\"></button>";
+            // Append autoplay controls
+            this.core.outer
+                .find(this.settings.appendAutoplayControlsTo)
+                .append(_html);
+            this.core.outer
+                .find('.lg-autoplay-button')
+                .first()
+                .on('click.lg.autoplay', function () {
+                if (_this.core.outer.hasClass('lg-show-autoplay')) {
+                    _this.stopAutoPlay();
+                }
+                else {
+                    if (!_this.interval) {
+                        _this.startAutoPlay();
+                    }
+                }
+            });
+        };
+        // Autostart gallery
+        Autoplay.prototype.startAutoPlay = function () {
+            var _this = this;
+            this.core.outer
+                .find('.lg-progress')
+                .css('transition', 'width ' +
+                (this.core.settings.speed +
+                    this.settings.slideShowInterval) +
+                'ms ease 0s');
+            this.core.outer.addClass('lg-show-autoplay');
+            this.core.outer.find('.lg-progress-bar').addClass('lg-start');
+            this.core.LGel.trigger(lGEvents.autoplayStart, {
+                index: this.core.index,
+            });
+            this.interval = setInterval(function () {
+                if (_this.core.index + 1 < _this.core.galleryItems.length) {
+                    _this.core.index++;
+                }
+                else {
+                    _this.core.index = 0;
+                }
+                _this.core.LGel.trigger(lGEvents.autoplay, {
+                    index: _this.core.index,
+                });
+                _this.fromAuto = true;
+                _this.core.slide(_this.core.index, false, false, 'next');
+            }, this.core.settings.speed + this.settings.slideShowInterval);
+        };
+        // cancel Autostart
+        Autoplay.prototype.stopAutoPlay = function () {
+            if (this.interval) {
+                this.core.LGel.trigger(lGEvents.autoplayStop, {
+                    index: this.core.index,
+                });
+                this.core.outer.find('.lg-progress').removeAttr('style');
+                this.core.outer.removeClass('lg-show-autoplay');
+                this.core.outer.find('.lg-progress-bar').removeClass('lg-start');
+            }
+            clearInterval(this.interval);
+            this.interval = false;
+        };
+        Autoplay.prototype.closeGallery = function () {
+            this.stopAutoPlay();
+        };
+        Autoplay.prototype.destroy = function () {
+            if (this.settings.autoplay) {
+                this.core.outer.find('.lg-progress-bar').remove();
+            }
+            // Remove all event listeners added by autoplay plugin
+            this.core.LGel.off('.lg.autoplay');
+            this.core.LGel.off('.autoplay');
+        };
+        return Autoplay;
+    }());
+
+    return Autoplay;
+
+})));
+//# sourceMappingURL=lg-autoplay.umd.js.map

res/plugins/comment/lg-comment.es5.js

@@ -0,0 +1,203 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var commentSettings = {
+    commentBox: false,
+    fbComments: false,
+    disqusComments: false,
+    disqusConfig: {
+        title: undefined,
+        language: 'en',
+    },
+    commentsMarkup: '<div id="lg-comment-box" class="lg-comment-box lg-fb-comment-box"><div class="lg-comment-header"><h3 class="lg-comment-title">Leave a comment.</h3><span class="lg-comment-close lg-icon"></span></div><div class="lg-comment-body"></div></div>',
+    commentPluginStrings: { toggleComments: 'Toggle Comments' },
+};
+
+/**
+ * lightGallery comments module
+ * Supports facebook and disqus comments
+ *
+ * @ref - https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables
+ * @ref - https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html
+ * @ref - https://css-tricks.com/lazy-loading-disqus-comments/
+ * @ref - https://developers.facebook.com/docs/plugins/comments/#comments-plugin
+ *
+ */
+var CommentBox = /** @class */ (function () {
+    function CommentBox(instance, $LG) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, commentSettings), this.core.settings);
+        return this;
+    }
+    CommentBox.prototype.init = function () {
+        if (!this.settings.commentBox) {
+            return;
+        }
+        this.setMarkup();
+        this.toggleCommentBox();
+        if (this.settings.fbComments) {
+            this.addFbComments();
+        }
+        else if (this.settings.disqusComments) {
+            this.addDisqusComments();
+        }
+    };
+    CommentBox.prototype.setMarkup = function () {
+        this.core.outer.append(this.settings.commentsMarkup +
+            '<div class="lg-comment-overlay"></div>');
+        var commentToggleBtn = "<button type=\"button\" aria-label=\"" + this.settings.commentPluginStrings['toggleComments'] + "\" class=\"lg-comment-toggle lg-icon\"></button>";
+        this.core.$toolbar.append(commentToggleBtn);
+    };
+    CommentBox.prototype.toggleCommentBox = function () {
+        var _this_1 = this;
+        this.core.outer
+            .find('.lg-comment-toggle')
+            .first()
+            .on('click.lg.comment', function () {
+            _this_1.core.outer.toggleClass('lg-comment-active');
+        });
+        this.core.outer
+            .find('.lg-comment-overlay')
+            .first()
+            .on('click.lg.comment', function () {
+            _this_1.core.outer.removeClass('lg-comment-active');
+        });
+        this.core.outer
+            .find('.lg-comment-close')
+            .first()
+            .on('click.lg.comment', function () {
+            _this_1.core.outer.removeClass('lg-comment-active');
+        });
+    };
+    CommentBox.prototype.addFbComments = function () {
+        var _this_1 = this;
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        var _this = this;
+        this.core.LGel.on(lGEvents.beforeSlide + ".comment", function (event) {
+            var html = _this_1.core.galleryItems[event.detail.index].fbHtml;
+            _this_1.core.outer.find('.lg-comment-body').html(html);
+        });
+        this.core.LGel.on(lGEvents.afterSlide + ".comment", function () {
+            try {
+                FB.XFBML.parse();
+            }
+            catch (err) {
+                _this.$LG(window).on('fbAsyncInit', function () {
+                    FB.XFBML.parse();
+                });
+            }
+        });
+    };
+    CommentBox.prototype.addDisqusComments = function () {
+        var _this_1 = this;
+        var $disqusThread = this.$LG('#disqus_thread');
+        $disqusThread.remove();
+        this.core.outer
+            .find('.lg-comment-body')
+            .append('<div id="disqus_thread"></div>');
+        this.core.LGel.on(lGEvents.beforeSlide + ".comment", function () {
+            $disqusThread.html('');
+        });
+        this.core.LGel.on(lGEvents.afterSlide + ".comment", function (event) {
+            var index = event.detail.index;
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            var _this = _this_1;
+            // DISQUS needs sometime to intialize when lightGallery is opened from direct url(hash plugin).
+            setTimeout(function () {
+                try {
+                    DISQUS.reset({
+                        reload: true,
+                        config: function () {
+                            this.page.identifier =
+                                _this.core.galleryItems[index].disqusIdentifier;
+                            this.page.url =
+                                _this.core.galleryItems[index].disqusURL;
+                            this.page.title =
+                                _this.settings.disqusConfig.title;
+                            this.language =
+                                _this.settings.disqusConfig.language;
+                        },
+                    });
+                }
+                catch (err) {
+                    console.error('Make sure you have included disqus JavaScript code in your document. Ex - https://lg-disqus.disqus.com/admin/install/platforms/universalcode/');
+                }
+            }, _this.core.lGalleryOn ? 0 : 1000);
+        });
+    };
+    CommentBox.prototype.destroy = function () {
+        this.core.LGel.off('.lg.comment');
+        this.core.LGel.off('.comment');
+    };
+    return CommentBox;
+}());
+
+export default CommentBox;
+//# sourceMappingURL=lg-comment.es5.js.map

res/plugins/comment/lg-comment.umd.js

@@ -0,0 +1,211 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgComment = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var commentSettings = {
+        commentBox: false,
+        fbComments: false,
+        disqusComments: false,
+        disqusConfig: {
+            title: undefined,
+            language: 'en',
+        },
+        commentsMarkup: '<div id="lg-comment-box" class="lg-comment-box lg-fb-comment-box"><div class="lg-comment-header"><h3 class="lg-comment-title">Leave a comment.</h3><span class="lg-comment-close lg-icon"></span></div><div class="lg-comment-body"></div></div>',
+        commentPluginStrings: { toggleComments: 'Toggle Comments' },
+    };
+
+    /**
+     * lightGallery comments module
+     * Supports facebook and disqus comments
+     *
+     * @ref - https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables
+     * @ref - https://github.com/disqus/DISQUS-API-Recipes/blob/master/snippets/js/disqus-reset/disqus_reset.html
+     * @ref - https://css-tricks.com/lazy-loading-disqus-comments/
+     * @ref - https://developers.facebook.com/docs/plugins/comments/#comments-plugin
+     *
+     */
+    var CommentBox = /** @class */ (function () {
+        function CommentBox(instance, $LG) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, commentSettings), this.core.settings);
+            return this;
+        }
+        CommentBox.prototype.init = function () {
+            if (!this.settings.commentBox) {
+                return;
+            }
+            this.setMarkup();
+            this.toggleCommentBox();
+            if (this.settings.fbComments) {
+                this.addFbComments();
+            }
+            else if (this.settings.disqusComments) {
+                this.addDisqusComments();
+            }
+        };
+        CommentBox.prototype.setMarkup = function () {
+            this.core.outer.append(this.settings.commentsMarkup +
+                '<div class="lg-comment-overlay"></div>');
+            var commentToggleBtn = "<button type=\"button\" aria-label=\"" + this.settings.commentPluginStrings['toggleComments'] + "\" class=\"lg-comment-toggle lg-icon\"></button>";
+            this.core.$toolbar.append(commentToggleBtn);
+        };
+        CommentBox.prototype.toggleCommentBox = function () {
+            var _this_1 = this;
+            this.core.outer
+                .find('.lg-comment-toggle')
+                .first()
+                .on('click.lg.comment', function () {
+                _this_1.core.outer.toggleClass('lg-comment-active');
+            });
+            this.core.outer
+                .find('.lg-comment-overlay')
+                .first()
+                .on('click.lg.comment', function () {
+                _this_1.core.outer.removeClass('lg-comment-active');
+            });
+            this.core.outer
+                .find('.lg-comment-close')
+                .first()
+                .on('click.lg.comment', function () {
+                _this_1.core.outer.removeClass('lg-comment-active');
+            });
+        };
+        CommentBox.prototype.addFbComments = function () {
+            var _this_1 = this;
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            var _this = this;
+            this.core.LGel.on(lGEvents.beforeSlide + ".comment", function (event) {
+                var html = _this_1.core.galleryItems[event.detail.index].fbHtml;
+                _this_1.core.outer.find('.lg-comment-body').html(html);
+            });
+            this.core.LGel.on(lGEvents.afterSlide + ".comment", function () {
+                try {
+                    FB.XFBML.parse();
+                }
+                catch (err) {
+                    _this.$LG(window).on('fbAsyncInit', function () {
+                        FB.XFBML.parse();
+                    });
+                }
+            });
+        };
+        CommentBox.prototype.addDisqusComments = function () {
+            var _this_1 = this;
+            var $disqusThread = this.$LG('#disqus_thread');
+            $disqusThread.remove();
+            this.core.outer
+                .find('.lg-comment-body')
+                .append('<div id="disqus_thread"></div>');
+            this.core.LGel.on(lGEvents.beforeSlide + ".comment", function () {
+                $disqusThread.html('');
+            });
+            this.core.LGel.on(lGEvents.afterSlide + ".comment", function (event) {
+                var index = event.detail.index;
+                // eslint-disable-next-line @typescript-eslint/no-this-alias
+                var _this = _this_1;
+                // DISQUS needs sometime to intialize when lightGallery is opened from direct url(hash plugin).
+                setTimeout(function () {
+                    try {
+                        DISQUS.reset({
+                            reload: true,
+                            config: function () {
+                                this.page.identifier =
+                                    _this.core.galleryItems[index].disqusIdentifier;
+                                this.page.url =
+                                    _this.core.galleryItems[index].disqusURL;
+                                this.page.title =
+                                    _this.settings.disqusConfig.title;
+                                this.language =
+                                    _this.settings.disqusConfig.language;
+                            },
+                        });
+                    }
+                    catch (err) {
+                        console.error('Make sure you have included disqus JavaScript code in your document. Ex - https://lg-disqus.disqus.com/admin/install/platforms/universalcode/');
+                    }
+                }, _this.core.lGalleryOn ? 0 : 1000);
+            });
+        };
+        CommentBox.prototype.destroy = function () {
+            this.core.LGel.off('.lg.comment');
+            this.core.LGel.off('.comment');
+        };
+        return CommentBox;
+    }());
+
+    return CommentBox;
+
+})));
+//# sourceMappingURL=lg-comment.umd.js.map

res/plugins/fullscreen/lg-fullscreen.es5.js

@@ -0,0 +1,133 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var fullscreenSettings = {
+    fullScreen: true,
+    fullscreenPluginStrings: { toggleFullscreen: 'Toggle Fullscreen' },
+};
+
+var FullScreen = /** @class */ (function () {
+    function FullScreen(instance, $LG) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, fullscreenSettings), this.core.settings);
+        return this;
+    }
+    FullScreen.prototype.init = function () {
+        var fullScreen = '';
+        if (this.settings.fullScreen) {
+            // check for fullscreen browser support
+            if (!document.fullscreenEnabled &&
+                !document.webkitFullscreenEnabled &&
+                !document.mozFullScreenEnabled &&
+                !document.msFullscreenEnabled) {
+                return;
+            }
+            else {
+                fullScreen = "<button type=\"button\" aria-label=\"" + this.settings.fullscreenPluginStrings['toggleFullscreen'] + "\" class=\"lg-fullscreen lg-icon\"></button>";
+                this.core.$toolbar.append(fullScreen);
+                this.fullScreen();
+            }
+        }
+    };
+    FullScreen.prototype.isFullScreen = function () {
+        return (document.fullscreenElement ||
+            document.mozFullScreenElement ||
+            document.webkitFullscreenElement ||
+            document.msFullscreenElement);
+    };
+    FullScreen.prototype.requestFullscreen = function () {
+        var el = document.documentElement;
+        if (el.requestFullscreen) {
+            el.requestFullscreen();
+        }
+        else if (el.msRequestFullscreen) {
+            el.msRequestFullscreen();
+        }
+        else if (el.mozRequestFullScreen) {
+            el.mozRequestFullScreen();
+        }
+        else if (el.webkitRequestFullscreen) {
+            el.webkitRequestFullscreen();
+        }
+    };
+    FullScreen.prototype.exitFullscreen = function () {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+        else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+        else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+        else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    };
+    // https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
+    FullScreen.prototype.fullScreen = function () {
+        var _this = this;
+        this.$LG(document).on("fullscreenchange.lg.global" + this.core.lgId + " \n            webkitfullscreenchange.lg.global" + this.core.lgId + " \n            mozfullscreenchange.lg.global" + this.core.lgId + " \n            MSFullscreenChange.lg.global" + this.core.lgId, function () {
+            if (!_this.core.lgOpened)
+                return;
+            _this.core.outer.toggleClass('lg-fullscreen-on');
+        });
+        this.core.outer
+            .find('.lg-fullscreen')
+            .first()
+            .on('click.lg', function () {
+            if (_this.isFullScreen()) {
+                _this.exitFullscreen();
+            }
+            else {
+                _this.requestFullscreen();
+            }
+        });
+    };
+    FullScreen.prototype.closeGallery = function () {
+        // exit from fullscreen if activated
+        if (this.isFullScreen()) {
+            this.exitFullscreen();
+        }
+    };
+    FullScreen.prototype.destroy = function () {
+        this.$LG(document).off("fullscreenchange.lg.global" + this.core.lgId + " \n            webkitfullscreenchange.lg.global" + this.core.lgId + " \n            mozfullscreenchange.lg.global" + this.core.lgId + " \n            MSFullscreenChange.lg.global" + this.core.lgId);
+    };
+    return FullScreen;
+}());
+
+export default FullScreen;
+//# sourceMappingURL=lg-fullscreen.es5.js.map

res/plugins/fullscreen/lg-fullscreen.umd.js

@@ -0,0 +1,141 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgFullscreen = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    var fullscreenSettings = {
+        fullScreen: true,
+        fullscreenPluginStrings: { toggleFullscreen: 'Toggle Fullscreen' },
+    };
+
+    var FullScreen = /** @class */ (function () {
+        function FullScreen(instance, $LG) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, fullscreenSettings), this.core.settings);
+            return this;
+        }
+        FullScreen.prototype.init = function () {
+            var fullScreen = '';
+            if (this.settings.fullScreen) {
+                // check for fullscreen browser support
+                if (!document.fullscreenEnabled &&
+                    !document.webkitFullscreenEnabled &&
+                    !document.mozFullScreenEnabled &&
+                    !document.msFullscreenEnabled) {
+                    return;
+                }
+                else {
+                    fullScreen = "<button type=\"button\" aria-label=\"" + this.settings.fullscreenPluginStrings['toggleFullscreen'] + "\" class=\"lg-fullscreen lg-icon\"></button>";
+                    this.core.$toolbar.append(fullScreen);
+                    this.fullScreen();
+                }
+            }
+        };
+        FullScreen.prototype.isFullScreen = function () {
+            return (document.fullscreenElement ||
+                document.mozFullScreenElement ||
+                document.webkitFullscreenElement ||
+                document.msFullscreenElement);
+        };
+        FullScreen.prototype.requestFullscreen = function () {
+            var el = document.documentElement;
+            if (el.requestFullscreen) {
+                el.requestFullscreen();
+            }
+            else if (el.msRequestFullscreen) {
+                el.msRequestFullscreen();
+            }
+            else if (el.mozRequestFullScreen) {
+                el.mozRequestFullScreen();
+            }
+            else if (el.webkitRequestFullscreen) {
+                el.webkitRequestFullscreen();
+            }
+        };
+        FullScreen.prototype.exitFullscreen = function () {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            }
+            else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            }
+            else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            }
+            else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
+        };
+        // https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
+        FullScreen.prototype.fullScreen = function () {
+            var _this = this;
+            this.$LG(document).on("fullscreenchange.lg.global" + this.core.lgId + " \n            webkitfullscreenchange.lg.global" + this.core.lgId + " \n            mozfullscreenchange.lg.global" + this.core.lgId + " \n            MSFullscreenChange.lg.global" + this.core.lgId, function () {
+                if (!_this.core.lgOpened)
+                    return;
+                _this.core.outer.toggleClass('lg-fullscreen-on');
+            });
+            this.core.outer
+                .find('.lg-fullscreen')
+                .first()
+                .on('click.lg', function () {
+                if (_this.isFullScreen()) {
+                    _this.exitFullscreen();
+                }
+                else {
+                    _this.requestFullscreen();
+                }
+            });
+        };
+        FullScreen.prototype.closeGallery = function () {
+            // exit from fullscreen if activated
+            if (this.isFullScreen()) {
+                this.exitFullscreen();
+            }
+        };
+        FullScreen.prototype.destroy = function () {
+            this.$LG(document).off("fullscreenchange.lg.global" + this.core.lgId + " \n            webkitfullscreenchange.lg.global" + this.core.lgId + " \n            mozfullscreenchange.lg.global" + this.core.lgId + " \n            MSFullscreenChange.lg.global" + this.core.lgId);
+        };
+        return FullScreen;
+    }());
+
+    return FullScreen;
+
+})));
+//# sourceMappingURL=lg-fullscreen.umd.js.map

res/plugins/hash/lg-hash.es5.js

@@ -0,0 +1,198 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var hashSettings = {
+    hash: true,
+    galleryId: '1',
+    customSlideName: false,
+};
+
+var Hash = /** @class */ (function () {
+    function Hash(instance, $LG) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, hashSettings), this.core.settings);
+        return this;
+    }
+    Hash.prototype.init = function () {
+        var _this = this;
+        if (!this.settings.hash) {
+            return;
+        }
+        this.oldHash = window.location.hash;
+        setTimeout(function () {
+            _this.buildFromHash();
+        }, 100);
+        // Change hash value on after each slide transition
+        this.core.LGel.on(lGEvents.afterSlide + ".hash", this.onAfterSlide.bind(this));
+        this.core.LGel.on(lGEvents.afterClose + ".hash", this.onCloseAfter.bind(this));
+        // Listen hash change and change the slide according to slide value
+        this.$LG(window).on("hashchange.lg.hash.global" + this.core.lgId, this.onHashchange.bind(this));
+    };
+    Hash.prototype.onAfterSlide = function (event) {
+        var slideName = this.core.galleryItems[event.detail.index].slideName;
+        slideName = this.settings.customSlideName
+            ? slideName || event.detail.index
+            : event.detail.index;
+        if (history.replaceState) {
+            history.replaceState(null, '', window.location.pathname +
+                window.location.search +
+                '#lg=' +
+                this.settings.galleryId +
+                '&slide=' +
+                slideName);
+        }
+        else {
+            window.location.hash =
+                'lg=' + this.settings.galleryId + '&slide=' + slideName;
+        }
+    };
+    /**
+     * Get index of the slide from custom slideName. Has to be a public method. Used in hash plugin
+     * @param {String} hash
+     * @returns {Number} Index of the slide.
+     */
+    Hash.prototype.getIndexFromUrl = function (hash) {
+        if (hash === void 0) { hash = window.location.hash; }
+        var slideName = hash.split('&slide=')[1];
+        var _idx = 0;
+        if (this.settings.customSlideName) {
+            for (var index = 0; index < this.core.galleryItems.length; index++) {
+                var dynamicEl = this.core.galleryItems[index];
+                if (dynamicEl.slideName === slideName) {
+                    _idx = index;
+                    break;
+                }
+            }
+        }
+        else {
+            _idx = parseInt(slideName, 10);
+        }
+        return isNaN(_idx) ? 0 : _idx;
+    };
+    // Build Gallery if gallery id exist in the URL
+    Hash.prototype.buildFromHash = function () {
+        // if dynamic option is enabled execute immediately
+        var _hash = window.location.hash;
+        if (_hash.indexOf('lg=' + this.settings.galleryId) > 0) {
+            // This class is used to remove the initial animation if galleryId present in the URL
+            this.$LG(document.body).addClass('lg-from-hash');
+            var index = this.getIndexFromUrl(_hash);
+            this.core.openGallery(index);
+            return true;
+        }
+    };
+    Hash.prototype.onCloseAfter = function () {
+        // Reset to old hash value
+        if (this.oldHash &&
+            this.oldHash.indexOf('lg=' + this.settings.galleryId) < 0) {
+            if (history.replaceState) {
+                history.replaceState(null, '', this.oldHash);
+            }
+            else {
+                window.location.hash = this.oldHash;
+            }
+        }
+        else {
+            if (history.replaceState) {
+                history.replaceState(null, document.title, window.location.pathname + window.location.search);
+            }
+            else {
+                window.location.hash = '';
+            }
+        }
+    };
+    Hash.prototype.onHashchange = function () {
+        if (!this.core.lgOpened)
+            return;
+        var _hash = window.location.hash;
+        var index = this.getIndexFromUrl(_hash);
+        // it galleryId doesn't exist in the url close the gallery
+        if (_hash.indexOf('lg=' + this.settings.galleryId) > -1) {
+            this.core.slide(index, false, false);
+        }
+        else if (this.core.lGalleryOn) {
+            this.core.closeGallery();
+        }
+    };
+    Hash.prototype.closeGallery = function () {
+        if (this.settings.hash) {
+            this.$LG(document.body).removeClass('lg-from-hash');
+        }
+    };
+    Hash.prototype.destroy = function () {
+        this.core.LGel.off('.lg.hash');
+        this.core.LGel.off('.hash');
+        this.$LG(window).off("hashchange.lg.hash.global" + this.core.lgId);
+    };
+    return Hash;
+}());
+
+export default Hash;
+//# sourceMappingURL=lg-hash.es5.js.map

res/plugins/hash/lg-hash.umd.js

@@ -0,0 +1,206 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgHash = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var hashSettings = {
+        hash: true,
+        galleryId: '1',
+        customSlideName: false,
+    };
+
+    var Hash = /** @class */ (function () {
+        function Hash(instance, $LG) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, hashSettings), this.core.settings);
+            return this;
+        }
+        Hash.prototype.init = function () {
+            var _this = this;
+            if (!this.settings.hash) {
+                return;
+            }
+            this.oldHash = window.location.hash;
+            setTimeout(function () {
+                _this.buildFromHash();
+            }, 100);
+            // Change hash value on after each slide transition
+            this.core.LGel.on(lGEvents.afterSlide + ".hash", this.onAfterSlide.bind(this));
+            this.core.LGel.on(lGEvents.afterClose + ".hash", this.onCloseAfter.bind(this));
+            // Listen hash change and change the slide according to slide value
+            this.$LG(window).on("hashchange.lg.hash.global" + this.core.lgId, this.onHashchange.bind(this));
+        };
+        Hash.prototype.onAfterSlide = function (event) {
+            var slideName = this.core.galleryItems[event.detail.index].slideName;
+            slideName = this.settings.customSlideName
+                ? slideName || event.detail.index
+                : event.detail.index;
+            if (history.replaceState) {
+                history.replaceState(null, '', window.location.pathname +
+                    window.location.search +
+                    '#lg=' +
+                    this.settings.galleryId +
+                    '&slide=' +
+                    slideName);
+            }
+            else {
+                window.location.hash =
+                    'lg=' + this.settings.galleryId + '&slide=' + slideName;
+            }
+        };
+        /**
+         * Get index of the slide from custom slideName. Has to be a public method. Used in hash plugin
+         * @param {String} hash
+         * @returns {Number} Index of the slide.
+         */
+        Hash.prototype.getIndexFromUrl = function (hash) {
+            if (hash === void 0) { hash = window.location.hash; }
+            var slideName = hash.split('&slide=')[1];
+            var _idx = 0;
+            if (this.settings.customSlideName) {
+                for (var index = 0; index < this.core.galleryItems.length; index++) {
+                    var dynamicEl = this.core.galleryItems[index];
+                    if (dynamicEl.slideName === slideName) {
+                        _idx = index;
+                        break;
+                    }
+                }
+            }
+            else {
+                _idx = parseInt(slideName, 10);
+            }
+            return isNaN(_idx) ? 0 : _idx;
+        };
+        // Build Gallery if gallery id exist in the URL
+        Hash.prototype.buildFromHash = function () {
+            // if dynamic option is enabled execute immediately
+            var _hash = window.location.hash;
+            if (_hash.indexOf('lg=' + this.settings.galleryId) > 0) {
+                // This class is used to remove the initial animation if galleryId present in the URL
+                this.$LG(document.body).addClass('lg-from-hash');
+                var index = this.getIndexFromUrl(_hash);
+                this.core.openGallery(index);
+                return true;
+            }
+        };
+        Hash.prototype.onCloseAfter = function () {
+            // Reset to old hash value
+            if (this.oldHash &&
+                this.oldHash.indexOf('lg=' + this.settings.galleryId) < 0) {
+                if (history.replaceState) {
+                    history.replaceState(null, '', this.oldHash);
+                }
+                else {
+                    window.location.hash = this.oldHash;
+                }
+            }
+            else {
+                if (history.replaceState) {
+                    history.replaceState(null, document.title, window.location.pathname + window.location.search);
+                }
+                else {
+                    window.location.hash = '';
+                }
+            }
+        };
+        Hash.prototype.onHashchange = function () {
+            if (!this.core.lgOpened)
+                return;
+            var _hash = window.location.hash;
+            var index = this.getIndexFromUrl(_hash);
+            // it galleryId doesn't exist in the url close the gallery
+            if (_hash.indexOf('lg=' + this.settings.galleryId) > -1) {
+                this.core.slide(index, false, false);
+            }
+            else if (this.core.lGalleryOn) {
+                this.core.closeGallery();
+            }
+        };
+        Hash.prototype.closeGallery = function () {
+            if (this.settings.hash) {
+                this.$LG(document.body).removeClass('lg-from-hash');
+            }
+        };
+        Hash.prototype.destroy = function () {
+            this.core.LGel.off('.lg.hash');
+            this.core.LGel.off('.hash');
+            this.$LG(window).off("hashchange.lg.hash.global" + this.core.lgId);
+        };
+        return Hash;
+    }());
+
+    return Hash;
+
+})));
+//# sourceMappingURL=lg-hash.umd.js.map

res/plugins/mediumZoom/lg-medium-zoom.es5.js

@@ -0,0 +1,132 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var mediumZoomSettings = {
+    margin: 40,
+    mediumZoom: true,
+    backgroundColor: '#000',
+};
+
+var MediumZoom = /** @class */ (function () {
+    function MediumZoom(instance, $LG) {
+        var _this = this;
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        // Set margin
+        this.core.getMediaContainerPosition = function () {
+            return {
+                top: _this.settings.margin,
+                bottom: _this.settings.margin,
+            };
+        };
+        // Override some of lightGallery default settings
+        var defaultSettings = {
+            controls: false,
+            download: false,
+            counter: false,
+            showCloseIcon: false,
+            extraProps: ['lgBackgroundColor'],
+            closeOnTap: false,
+            enableSwipe: false,
+            enableDrag: false,
+            swipeToClose: false,
+            addClass: this.core.settings.addClass + ' lg-medium-zoom',
+        };
+        this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign(__assign({}, mediumZoomSettings), this.core.settings), defaultSettings);
+        return this;
+    }
+    MediumZoom.prototype.toggleItemClass = function () {
+        for (var index = 0; index < this.core.items.length; index++) {
+            var $element = this.$LG(this.core.items[index]);
+            $element.toggleClass('lg-medium-zoom-item');
+        }
+    };
+    MediumZoom.prototype.init = function () {
+        var _this = this;
+        if (!this.settings.mediumZoom) {
+            return;
+        }
+        this.core.LGel.on(lGEvents.beforeOpen + ".medium", function () {
+            _this.core.$backdrop.css('background-color', _this.core.galleryItems[_this.core.index].lgBackgroundColor ||
+                _this.settings.backgroundColor);
+        });
+        this.toggleItemClass();
+        this.core.outer.on('click.lg.medium', function () {
+            _this.core.closeGallery();
+        });
+    };
+    MediumZoom.prototype.destroy = function () {
+        this.toggleItemClass();
+    };
+    return MediumZoom;
+}());
+
+export default MediumZoom;
+//# sourceMappingURL=lg-medium-zoom.es5.js.map

res/plugins/mediumZoom/lg-medium-zoom.min.js

@@ -0,0 +1,8 @@
+/**
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(o="undefined"!=typeof globalThis?globalThis:o||self).lgMediumZoom=t()}(this,(function(){"use strict";var o=function(){return(o=Object.assign||function(o){for(var t,e=1,i=arguments.length;e<i;e++)for(var n in t=arguments[e])Object.prototype.hasOwnProperty.call(t,n)&&(o[n]=t[n]);return o}).apply(this,arguments)},t="lgBeforeOpen",e={margin:40,mediumZoom:!0,backgroundColor:"#000"};return function(){function i(t,i){var n=this;this.core=t,this.$LG=i,this.core.getMediaContainerPosition=function(){return{top:n.settings.margin,bottom:n.settings.margin}};var s={controls:!1,download:!1,counter:!1,showCloseIcon:!1,extraProps:["lgBackgroundColor"],closeOnTap:!1,enableSwipe:!1,enableDrag:!1,swipeToClose:!1,addClass:this.core.settings.addClass+" lg-medium-zoom"};return this.core.settings=o(o({},this.core.settings),s),this.settings=o(o(o({},e),this.core.settings),s),this}return i.prototype.toggleItemClass=function(){for(var o=0;o<this.core.items.length;o++){this.$LG(this.core.items[o]).toggleClass("lg-medium-zoom-item")}},i.prototype.init=function(){var o=this;this.settings.mediumZoom&&(this.core.LGel.on(t+".medium",(function(){o.core.$backdrop.css("background-color",o.core.galleryItems[o.core.index].lgBackgroundColor||o.settings.backgroundColor)})),this.toggleItemClass(),this.core.outer.on("click.lg.medium",(function(){o.core.closeGallery()})))},i.prototype.destroy=function(){this.toggleItemClass()},i}()}));

res/plugins/mediumZoom/lg-medium-zoom.umd.js

@@ -0,0 +1,140 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgMediumZoom = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var mediumZoomSettings = {
+        margin: 40,
+        mediumZoom: true,
+        backgroundColor: '#000',
+    };
+
+    var MediumZoom = /** @class */ (function () {
+        function MediumZoom(instance, $LG) {
+            var _this = this;
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            // Set margin
+            this.core.getMediaContainerPosition = function () {
+                return {
+                    top: _this.settings.margin,
+                    bottom: _this.settings.margin,
+                };
+            };
+            // Override some of lightGallery default settings
+            var defaultSettings = {
+                controls: false,
+                download: false,
+                counter: false,
+                showCloseIcon: false,
+                extraProps: ['lgBackgroundColor'],
+                closeOnTap: false,
+                enableSwipe: false,
+                enableDrag: false,
+                swipeToClose: false,
+                addClass: this.core.settings.addClass + ' lg-medium-zoom',
+            };
+            this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign(__assign({}, mediumZoomSettings), this.core.settings), defaultSettings);
+            return this;
+        }
+        MediumZoom.prototype.toggleItemClass = function () {
+            for (var index = 0; index < this.core.items.length; index++) {
+                var $element = this.$LG(this.core.items[index]);
+                $element.toggleClass('lg-medium-zoom-item');
+            }
+        };
+        MediumZoom.prototype.init = function () {
+            var _this = this;
+            if (!this.settings.mediumZoom) {
+                return;
+            }
+            this.core.LGel.on(lGEvents.beforeOpen + ".medium", function () {
+                _this.core.$backdrop.css('background-color', _this.core.galleryItems[_this.core.index].lgBackgroundColor ||
+                    _this.settings.backgroundColor);
+            });
+            this.toggleItemClass();
+            this.core.outer.on('click.lg.medium', function () {
+                _this.core.closeGallery();
+            });
+        };
+        MediumZoom.prototype.destroy = function () {
+            this.toggleItemClass();
+        };
+        return MediumZoom;
+    }());
+
+    return MediumZoom;
+
+})));
+//# sourceMappingURL=lg-medium-zoom.umd.js.map

res/plugins/pager/lg-pager.es5.js

@@ -0,0 +1,139 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var pagerSettings = {
+    pager: true,
+};
+
+var Pager = /** @class */ (function () {
+    function Pager(instance, $LG) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, pagerSettings), this.core.settings);
+        return this;
+    }
+    Pager.prototype.getPagerHtml = function (items) {
+        var pagerList = '';
+        for (var i = 0; i < items.length; i++) {
+            pagerList += "<span  data-lg-item-id=\"" + i + "\" class=\"lg-pager-cont\"> \n                    <span data-lg-item-id=\"" + i + "\" class=\"lg-pager\"></span>\n                    <div class=\"lg-pager-thumb-cont\"><span class=\"lg-caret\"></span> <img src=\"" + items[i].thumb + "\" /></div>\n                    </span>";
+        }
+        return pagerList;
+    };
+    Pager.prototype.init = function () {
+        var _this = this;
+        if (!this.settings.pager) {
+            return;
+        }
+        var timeout;
+        this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');
+        var $pagerOuter = this.core.outer.find('.lg-pager-outer');
+        $pagerOuter.html(this.getPagerHtml(this.core.galleryItems));
+        // @todo enable click
+        $pagerOuter.first().on('click.lg touchend.lg', function (event) {
+            var $target = _this.$LG(event.target);
+            if (!$target.hasAttribute('data-lg-item-id')) {
+                return;
+            }
+            var index = parseInt($target.attr('data-lg-item-id'));
+            _this.core.slide(index, false, true, false);
+        });
+        $pagerOuter.first().on('mouseover.lg', function () {
+            clearTimeout(timeout);
+            $pagerOuter.addClass('lg-pager-hover');
+        });
+        $pagerOuter.first().on('mouseout.lg', function () {
+            timeout = setTimeout(function () {
+                $pagerOuter.removeClass('lg-pager-hover');
+            });
+        });
+        this.core.LGel.on(lGEvents.beforeSlide + ".pager", function (event) {
+            var index = event.detail.index;
+            _this.manageActiveClass.call(_this, index);
+        });
+        this.core.LGel.on(lGEvents.updateSlides + ".pager", function () {
+            $pagerOuter.empty();
+            $pagerOuter.html(_this.getPagerHtml(_this.core.galleryItems));
+            _this.manageActiveClass(_this.core.index);
+        });
+    };
+    Pager.prototype.manageActiveClass = function (index) {
+        var $pagerCont = this.core.outer.find('.lg-pager-cont');
+        $pagerCont.removeClass('lg-pager-active');
+        $pagerCont.eq(index).addClass('lg-pager-active');
+    };
+    Pager.prototype.destroy = function () {
+        this.core.outer.find('.lg-pager-outer').remove();
+        this.core.LGel.off('.lg.pager');
+        this.core.LGel.off('.pager');
+    };
+    return Pager;
+}());
+
+export default Pager;
+//# sourceMappingURL=lg-pager.es5.js.map

res/plugins/pager/lg-pager.umd.js

@@ -0,0 +1,147 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgPager = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var pagerSettings = {
+        pager: true,
+    };
+
+    var Pager = /** @class */ (function () {
+        function Pager(instance, $LG) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, pagerSettings), this.core.settings);
+            return this;
+        }
+        Pager.prototype.getPagerHtml = function (items) {
+            var pagerList = '';
+            for (var i = 0; i < items.length; i++) {
+                pagerList += "<span  data-lg-item-id=\"" + i + "\" class=\"lg-pager-cont\"> \n                    <span data-lg-item-id=\"" + i + "\" class=\"lg-pager\"></span>\n                    <div class=\"lg-pager-thumb-cont\"><span class=\"lg-caret\"></span> <img src=\"" + items[i].thumb + "\" /></div>\n                    </span>";
+            }
+            return pagerList;
+        };
+        Pager.prototype.init = function () {
+            var _this = this;
+            if (!this.settings.pager) {
+                return;
+            }
+            var timeout;
+            this.core.$lgComponents.prepend('<div class="lg-pager-outer"></div>');
+            var $pagerOuter = this.core.outer.find('.lg-pager-outer');
+            $pagerOuter.html(this.getPagerHtml(this.core.galleryItems));
+            // @todo enable click
+            $pagerOuter.first().on('click.lg touchend.lg', function (event) {
+                var $target = _this.$LG(event.target);
+                if (!$target.hasAttribute('data-lg-item-id')) {
+                    return;
+                }
+                var index = parseInt($target.attr('data-lg-item-id'));
+                _this.core.slide(index, false, true, false);
+            });
+            $pagerOuter.first().on('mouseover.lg', function () {
+                clearTimeout(timeout);
+                $pagerOuter.addClass('lg-pager-hover');
+            });
+            $pagerOuter.first().on('mouseout.lg', function () {
+                timeout = setTimeout(function () {
+                    $pagerOuter.removeClass('lg-pager-hover');
+                });
+            });
+            this.core.LGel.on(lGEvents.beforeSlide + ".pager", function (event) {
+                var index = event.detail.index;
+                _this.manageActiveClass.call(_this, index);
+            });
+            this.core.LGel.on(lGEvents.updateSlides + ".pager", function () {
+                $pagerOuter.empty();
+                $pagerOuter.html(_this.getPagerHtml(_this.core.galleryItems));
+                _this.manageActiveClass(_this.core.index);
+            });
+        };
+        Pager.prototype.manageActiveClass = function (index) {
+            var $pagerCont = this.core.outer.find('.lg-pager-cont');
+            $pagerCont.removeClass('lg-pager-active');
+            $pagerCont.eq(index).addClass('lg-pager-active');
+        };
+        Pager.prototype.destroy = function () {
+            this.core.outer.find('.lg-pager-outer').remove();
+            this.core.LGel.off('.lg.pager');
+            this.core.LGel.off('.pager');
+        };
+        return Pager;
+    }());
+
+    return Pager;
+
+})));
+//# sourceMappingURL=lg-pager.umd.js.map

res/plugins/relativeCaption/lg-relative-caption.es5.js

@@ -0,0 +1,154 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var relativeCaptionSettings = {
+    relativeCaption: false,
+};
+
+/**
+ * lightGallery caption for placing captions relative to the image
+ */
+var RelativeCaption = /** @class */ (function () {
+    function RelativeCaption(instance) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        // Override some of lightGallery default settings
+        var defaultSettings = {
+            addClass: this.core.settings.addClass + ' lg-relative-caption',
+        };
+        this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign(__assign({}, relativeCaptionSettings), this.core.settings), defaultSettings);
+        return this;
+    }
+    RelativeCaption.prototype.init = function () {
+        var _this = this;
+        if (!this.settings.relativeCaption) {
+            return;
+        }
+        this.core.LGel.on(lGEvents.slideItemLoad + ".caption", function (event) {
+            var _a = event.detail, index = _a.index, delay = _a.delay;
+            setTimeout(function () {
+                if (index === _this.core.index) {
+                    _this.setRelativeCaption(index);
+                }
+            }, delay);
+        });
+        this.core.LGel.on(lGEvents.afterSlide + ".caption", function (event) {
+            var index = event.detail.index;
+            setTimeout(function () {
+                var slide = _this.core.getSlideItem(index);
+                if (slide.hasClass('lg-complete')) {
+                    _this.setRelativeCaption(index);
+                }
+            });
+        });
+        this.core.LGel.on(lGEvents.beforeSlide + ".caption", function (event) {
+            var index = event.detail.index;
+            setTimeout(function () {
+                var slide = _this.core.getSlideItem(index);
+                slide.removeClass('lg-show-caption');
+            });
+        });
+        this.core.LGel.on(lGEvents.containerResize + ".caption", function (event) {
+            _this.setRelativeCaption(_this.core.index);
+        });
+    };
+    RelativeCaption.prototype.setCaptionStyle = function (index, rect, slideWrapRect) {
+        var $subHtmlInner = this.core
+            .getSlideItem(index)
+            .find('.lg-relative-caption-item');
+        var $subHtml = this.core.getSlideItem(index).find('.lg-sub-html');
+        $subHtml.css('width', rect.width + "px").css('left', rect.left + "px");
+        var subHtmlRect = $subHtmlInner.get().getBoundingClientRect();
+        var bottom = slideWrapRect.bottom - rect.bottom - subHtmlRect.height;
+        $subHtml.css('top', "auto").css('bottom', Math.max(bottom, 0) + "px");
+    };
+    RelativeCaption.prototype.setRelativeCaption = function (index) {
+        var slide = this.core.getSlideItem(index);
+        if (slide.hasClass('lg-current')) {
+            var rect = this.core
+                .getSlideItem(index)
+                .find('.lg-object')
+                .get()
+                .getBoundingClientRect();
+            var slideWrapRect = this.core
+                .getSlideItem(index)
+                .get()
+                .getBoundingClientRect();
+            this.setCaptionStyle(index, rect, slideWrapRect);
+            slide.addClass('lg-show-caption');
+        }
+    };
+    RelativeCaption.prototype.destroy = function () {
+        this.core.LGel.off('.caption');
+    };
+    return RelativeCaption;
+}());
+
+export default RelativeCaption;
+//# sourceMappingURL=lg-relative-caption.es5.js.map

res/plugins/relativeCaption/lg-relative-caption.umd.js

@@ -0,0 +1,162 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgRelativeCaption = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var relativeCaptionSettings = {
+        relativeCaption: false,
+    };
+
+    /**
+     * lightGallery caption for placing captions relative to the image
+     */
+    var RelativeCaption = /** @class */ (function () {
+        function RelativeCaption(instance) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            // Override some of lightGallery default settings
+            var defaultSettings = {
+                addClass: this.core.settings.addClass + ' lg-relative-caption',
+            };
+            this.core.settings = __assign(__assign({}, this.core.settings), defaultSettings);
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign(__assign({}, relativeCaptionSettings), this.core.settings), defaultSettings);
+            return this;
+        }
+        RelativeCaption.prototype.init = function () {
+            var _this = this;
+            if (!this.settings.relativeCaption) {
+                return;
+            }
+            this.core.LGel.on(lGEvents.slideItemLoad + ".caption", function (event) {
+                var _a = event.detail, index = _a.index, delay = _a.delay;
+                setTimeout(function () {
+                    if (index === _this.core.index) {
+                        _this.setRelativeCaption(index);
+                    }
+                }, delay);
+            });
+            this.core.LGel.on(lGEvents.afterSlide + ".caption", function (event) {
+                var index = event.detail.index;
+                setTimeout(function () {
+                    var slide = _this.core.getSlideItem(index);
+                    if (slide.hasClass('lg-complete')) {
+                        _this.setRelativeCaption(index);
+                    }
+                });
+            });
+            this.core.LGel.on(lGEvents.beforeSlide + ".caption", function (event) {
+                var index = event.detail.index;
+                setTimeout(function () {
+                    var slide = _this.core.getSlideItem(index);
+                    slide.removeClass('lg-show-caption');
+                });
+            });
+            this.core.LGel.on(lGEvents.containerResize + ".caption", function (event) {
+                _this.setRelativeCaption(_this.core.index);
+            });
+        };
+        RelativeCaption.prototype.setCaptionStyle = function (index, rect, slideWrapRect) {
+            var $subHtmlInner = this.core
+                .getSlideItem(index)
+                .find('.lg-relative-caption-item');
+            var $subHtml = this.core.getSlideItem(index).find('.lg-sub-html');
+            $subHtml.css('width', rect.width + "px").css('left', rect.left + "px");
+            var subHtmlRect = $subHtmlInner.get().getBoundingClientRect();
+            var bottom = slideWrapRect.bottom - rect.bottom - subHtmlRect.height;
+            $subHtml.css('top', "auto").css('bottom', Math.max(bottom, 0) + "px");
+        };
+        RelativeCaption.prototype.setRelativeCaption = function (index) {
+            var slide = this.core.getSlideItem(index);
+            if (slide.hasClass('lg-current')) {
+                var rect = this.core
+                    .getSlideItem(index)
+                    .find('.lg-object')
+                    .get()
+                    .getBoundingClientRect();
+                var slideWrapRect = this.core
+                    .getSlideItem(index)
+                    .get()
+                    .getBoundingClientRect();
+                this.setCaptionStyle(index, rect, slideWrapRect);
+                slide.addClass('lg-show-caption');
+            }
+        };
+        RelativeCaption.prototype.destroy = function () {
+            this.core.LGel.off('.caption');
+        };
+        return RelativeCaption;
+    }());
+
+    return RelativeCaption;
+
+})));
+//# sourceMappingURL=lg-relative-caption.umd.js.map

res/plugins/rotate/lg-rotate.es5.js

@@ -0,0 +1,267 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var rotateSettings = {
+    rotate: true,
+    rotateSpeed: 400,
+    rotateLeft: true,
+    rotateRight: true,
+    flipHorizontal: true,
+    flipVertical: true,
+    rotatePluginStrings: {
+        flipVertical: 'Flip vertical',
+        flipHorizontal: 'Flip horizontal',
+        rotateLeft: 'Rotate left',
+        rotateRight: 'Rotate right',
+    },
+};
+
+var Rotate = /** @class */ (function () {
+    function Rotate(instance, $LG) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, rotateSettings), this.core.settings);
+        return this;
+    }
+    Rotate.prototype.buildTemplates = function () {
+        var rotateIcons = '';
+        if (this.settings.flipVertical) {
+            rotateIcons += "<button type=\"button\" id=\"lg-flip-ver\" aria-label=\"" + this.settings.rotatePluginStrings['flipVertical'] + "\" class=\"lg-flip-ver lg-icon\"></button>";
+        }
+        if (this.settings.flipHorizontal) {
+            rotateIcons += "<button type=\"button\" id=\"lg-flip-hor\" aria-label=\"" + this.settings.rotatePluginStrings['flipHorizontal'] + "\" class=\"lg-flip-hor lg-icon\"></button>";
+        }
+        if (this.settings.rotateLeft) {
+            rotateIcons += "<button type=\"button\" id=\"lg-rotate-left\" aria-label=\"" + this.settings.rotatePluginStrings['rotateLeft'] + "\" class=\"lg-rotate-left lg-icon\"></button>";
+        }
+        if (this.settings.rotateRight) {
+            rotateIcons += "<button type=\"button\" id=\"lg-rotate-right\" aria-label=\"" + this.settings.rotatePluginStrings['rotateRight'] + "\" class=\"lg-rotate-right lg-icon\"></button>";
+        }
+        this.core.$toolbar.append(rotateIcons);
+    };
+    Rotate.prototype.init = function () {
+        var _this = this;
+        if (!this.settings.rotate) {
+            return;
+        }
+        this.buildTemplates();
+        // Save rotate config for each item to persist its rotate, flip values
+        // even after navigating to diferent slides
+        this.rotateValuesList = {};
+        // event triggered after appending slide content
+        this.core.LGel.on(lGEvents.afterAppendSlide + ".rotate", function (event) {
+            var index = event.detail.index;
+            var imageWrap = _this.core
+                .getSlideItem(index)
+                .find('.lg-img-wrap')
+                .first();
+            imageWrap.wrap('lg-img-rotate');
+            _this.core
+                .getSlideItem(_this.core.index)
+                .find('.lg-img-rotate')
+                .css('transition-duration', _this.settings.rotateSpeed + 'ms');
+        });
+        this.core.outer
+            .find('#lg-rotate-left')
+            .first()
+            .on('click.lg', this.rotateLeft.bind(this));
+        this.core.outer
+            .find('#lg-rotate-right')
+            .first()
+            .on('click.lg', this.rotateRight.bind(this));
+        this.core.outer
+            .find('#lg-flip-hor')
+            .first()
+            .on('click.lg', this.flipHorizontal.bind(this));
+        this.core.outer
+            .find('#lg-flip-ver')
+            .first()
+            .on('click.lg', this.flipVertical.bind(this));
+        // Reset rotate on slide change
+        this.core.LGel.on(lGEvents.beforeSlide + ".rotate", function (event) {
+            if (!_this.rotateValuesList[event.detail.index]) {
+                _this.rotateValuesList[event.detail.index] = {
+                    rotate: 0,
+                    flipHorizontal: 1,
+                    flipVertical: 1,
+                };
+            }
+        });
+    };
+    Rotate.prototype.applyStyles = function () {
+        var $image = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-img-rotate')
+            .first();
+        $image.css('transform', 'rotate(' +
+            this.rotateValuesList[this.core.index].rotate +
+            'deg)' +
+            ' scale3d(' +
+            this.rotateValuesList[this.core.index].flipHorizontal +
+            ', ' +
+            this.rotateValuesList[this.core.index].flipVertical +
+            ', 1)');
+    };
+    Rotate.prototype.rotateLeft = function () {
+        this.rotateValuesList[this.core.index].rotate -= 90;
+        this.applyStyles();
+        this.triggerEvents(lGEvents.rotateLeft, {
+            rotate: this.rotateValuesList[this.core.index].rotate,
+        });
+    };
+    Rotate.prototype.rotateRight = function () {
+        this.rotateValuesList[this.core.index].rotate += 90;
+        this.applyStyles();
+        this.triggerEvents(lGEvents.rotateRight, {
+            rotate: this.rotateValuesList[this.core.index].rotate,
+        });
+    };
+    Rotate.prototype.getCurrentRotation = function (el) {
+        if (!el) {
+            return 0;
+        }
+        var st = this.$LG(el).style();
+        var tm = st.getPropertyValue('-webkit-transform') ||
+            st.getPropertyValue('-moz-transform') ||
+            st.getPropertyValue('-ms-transform') ||
+            st.getPropertyValue('-o-transform') ||
+            st.getPropertyValue('transform') ||
+            'none';
+        if (tm !== 'none') {
+            var values = tm.split('(')[1].split(')')[0].split(',');
+            if (values) {
+                var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
+                return angle < 0 ? angle + 360 : angle;
+            }
+        }
+        return 0;
+    };
+    Rotate.prototype.flipHorizontal = function () {
+        var rotateEl = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-img-rotate')
+            .first()
+            .get();
+        var currentRotation = this.getCurrentRotation(rotateEl);
+        var rotateAxis = 'flipHorizontal';
+        if (currentRotation === 90 || currentRotation === 270) {
+            rotateAxis = 'flipVertical';
+        }
+        this.rotateValuesList[this.core.index][rotateAxis] *= -1;
+        this.applyStyles();
+        this.triggerEvents(lGEvents.flipHorizontal, {
+            flipHorizontal: this.rotateValuesList[this.core.index][rotateAxis],
+        });
+    };
+    Rotate.prototype.flipVertical = function () {
+        var rotateEl = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-img-rotate')
+            .first()
+            .get();
+        var currentRotation = this.getCurrentRotation(rotateEl);
+        var rotateAxis = 'flipVertical';
+        if (currentRotation === 90 || currentRotation === 270) {
+            rotateAxis = 'flipHorizontal';
+        }
+        this.rotateValuesList[this.core.index][rotateAxis] *= -1;
+        this.applyStyles();
+        this.triggerEvents(lGEvents.flipVertical, {
+            flipVertical: this.rotateValuesList[this.core.index][rotateAxis],
+        });
+    };
+    Rotate.prototype.triggerEvents = function (event, detail) {
+        var _this = this;
+        setTimeout(function () {
+            _this.core.LGel.trigger(event, detail);
+        }, this.settings.rotateSpeed + 10);
+    };
+    Rotate.prototype.isImageOrientationChanged = function () {
+        var rotateValue = this.rotateValuesList[this.core.index];
+        var isRotated = Math.abs(rotateValue.rotate) % 360 !== 0;
+        var ifFlippedHor = rotateValue.flipHorizontal < 0;
+        var ifFlippedVer = rotateValue.flipVertical < 0;
+        return isRotated || ifFlippedHor || ifFlippedVer;
+    };
+    Rotate.prototype.closeGallery = function () {
+        if (this.isImageOrientationChanged()) {
+            this.core.getSlideItem(this.core.index).css('opacity', 0);
+        }
+        this.rotateValuesList = {};
+    };
+    Rotate.prototype.destroy = function () {
+        // Unbind all events added by lightGallery rotate plugin
+        this.core.LGel.off('.lg.rotate');
+        this.core.LGel.off('.rotate');
+    };
+    return Rotate;
+}());
+
+export default Rotate;
+//# sourceMappingURL=lg-rotate.es5.js.map

res/plugins/rotate/lg-rotate.umd.js

@@ -0,0 +1,275 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgRotate = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var rotateSettings = {
+        rotate: true,
+        rotateSpeed: 400,
+        rotateLeft: true,
+        rotateRight: true,
+        flipHorizontal: true,
+        flipVertical: true,
+        rotatePluginStrings: {
+            flipVertical: 'Flip vertical',
+            flipHorizontal: 'Flip horizontal',
+            rotateLeft: 'Rotate left',
+            rotateRight: 'Rotate right',
+        },
+    };
+
+    var Rotate = /** @class */ (function () {
+        function Rotate(instance, $LG) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, rotateSettings), this.core.settings);
+            return this;
+        }
+        Rotate.prototype.buildTemplates = function () {
+            var rotateIcons = '';
+            if (this.settings.flipVertical) {
+                rotateIcons += "<button type=\"button\" id=\"lg-flip-ver\" aria-label=\"" + this.settings.rotatePluginStrings['flipVertical'] + "\" class=\"lg-flip-ver lg-icon\"></button>";
+            }
+            if (this.settings.flipHorizontal) {
+                rotateIcons += "<button type=\"button\" id=\"lg-flip-hor\" aria-label=\"" + this.settings.rotatePluginStrings['flipHorizontal'] + "\" class=\"lg-flip-hor lg-icon\"></button>";
+            }
+            if (this.settings.rotateLeft) {
+                rotateIcons += "<button type=\"button\" id=\"lg-rotate-left\" aria-label=\"" + this.settings.rotatePluginStrings['rotateLeft'] + "\" class=\"lg-rotate-left lg-icon\"></button>";
+            }
+            if (this.settings.rotateRight) {
+                rotateIcons += "<button type=\"button\" id=\"lg-rotate-right\" aria-label=\"" + this.settings.rotatePluginStrings['rotateRight'] + "\" class=\"lg-rotate-right lg-icon\"></button>";
+            }
+            this.core.$toolbar.append(rotateIcons);
+        };
+        Rotate.prototype.init = function () {
+            var _this = this;
+            if (!this.settings.rotate) {
+                return;
+            }
+            this.buildTemplates();
+            // Save rotate config for each item to persist its rotate, flip values
+            // even after navigating to diferent slides
+            this.rotateValuesList = {};
+            // event triggered after appending slide content
+            this.core.LGel.on(lGEvents.afterAppendSlide + ".rotate", function (event) {
+                var index = event.detail.index;
+                var imageWrap = _this.core
+                    .getSlideItem(index)
+                    .find('.lg-img-wrap')
+                    .first();
+                imageWrap.wrap('lg-img-rotate');
+                _this.core
+                    .getSlideItem(_this.core.index)
+                    .find('.lg-img-rotate')
+                    .css('transition-duration', _this.settings.rotateSpeed + 'ms');
+            });
+            this.core.outer
+                .find('#lg-rotate-left')
+                .first()
+                .on('click.lg', this.rotateLeft.bind(this));
+            this.core.outer
+                .find('#lg-rotate-right')
+                .first()
+                .on('click.lg', this.rotateRight.bind(this));
+            this.core.outer
+                .find('#lg-flip-hor')
+                .first()
+                .on('click.lg', this.flipHorizontal.bind(this));
+            this.core.outer
+                .find('#lg-flip-ver')
+                .first()
+                .on('click.lg', this.flipVertical.bind(this));
+            // Reset rotate on slide change
+            this.core.LGel.on(lGEvents.beforeSlide + ".rotate", function (event) {
+                if (!_this.rotateValuesList[event.detail.index]) {
+                    _this.rotateValuesList[event.detail.index] = {
+                        rotate: 0,
+                        flipHorizontal: 1,
+                        flipVertical: 1,
+                    };
+                }
+            });
+        };
+        Rotate.prototype.applyStyles = function () {
+            var $image = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-img-rotate')
+                .first();
+            $image.css('transform', 'rotate(' +
+                this.rotateValuesList[this.core.index].rotate +
+                'deg)' +
+                ' scale3d(' +
+                this.rotateValuesList[this.core.index].flipHorizontal +
+                ', ' +
+                this.rotateValuesList[this.core.index].flipVertical +
+                ', 1)');
+        };
+        Rotate.prototype.rotateLeft = function () {
+            this.rotateValuesList[this.core.index].rotate -= 90;
+            this.applyStyles();
+            this.triggerEvents(lGEvents.rotateLeft, {
+                rotate: this.rotateValuesList[this.core.index].rotate,
+            });
+        };
+        Rotate.prototype.rotateRight = function () {
+            this.rotateValuesList[this.core.index].rotate += 90;
+            this.applyStyles();
+            this.triggerEvents(lGEvents.rotateRight, {
+                rotate: this.rotateValuesList[this.core.index].rotate,
+            });
+        };
+        Rotate.prototype.getCurrentRotation = function (el) {
+            if (!el) {
+                return 0;
+            }
+            var st = this.$LG(el).style();
+            var tm = st.getPropertyValue('-webkit-transform') ||
+                st.getPropertyValue('-moz-transform') ||
+                st.getPropertyValue('-ms-transform') ||
+                st.getPropertyValue('-o-transform') ||
+                st.getPropertyValue('transform') ||
+                'none';
+            if (tm !== 'none') {
+                var values = tm.split('(')[1].split(')')[0].split(',');
+                if (values) {
+                    var angle = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
+                    return angle < 0 ? angle + 360 : angle;
+                }
+            }
+            return 0;
+        };
+        Rotate.prototype.flipHorizontal = function () {
+            var rotateEl = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-img-rotate')
+                .first()
+                .get();
+            var currentRotation = this.getCurrentRotation(rotateEl);
+            var rotateAxis = 'flipHorizontal';
+            if (currentRotation === 90 || currentRotation === 270) {
+                rotateAxis = 'flipVertical';
+            }
+            this.rotateValuesList[this.core.index][rotateAxis] *= -1;
+            this.applyStyles();
+            this.triggerEvents(lGEvents.flipHorizontal, {
+                flipHorizontal: this.rotateValuesList[this.core.index][rotateAxis],
+            });
+        };
+        Rotate.prototype.flipVertical = function () {
+            var rotateEl = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-img-rotate')
+                .first()
+                .get();
+            var currentRotation = this.getCurrentRotation(rotateEl);
+            var rotateAxis = 'flipVertical';
+            if (currentRotation === 90 || currentRotation === 270) {
+                rotateAxis = 'flipHorizontal';
+            }
+            this.rotateValuesList[this.core.index][rotateAxis] *= -1;
+            this.applyStyles();
+            this.triggerEvents(lGEvents.flipVertical, {
+                flipVertical: this.rotateValuesList[this.core.index][rotateAxis],
+            });
+        };
+        Rotate.prototype.triggerEvents = function (event, detail) {
+            var _this = this;
+            setTimeout(function () {
+                _this.core.LGel.trigger(event, detail);
+            }, this.settings.rotateSpeed + 10);
+        };
+        Rotate.prototype.isImageOrientationChanged = function () {
+            var rotateValue = this.rotateValuesList[this.core.index];
+            var isRotated = Math.abs(rotateValue.rotate) % 360 !== 0;
+            var ifFlippedHor = rotateValue.flipHorizontal < 0;
+            var ifFlippedVer = rotateValue.flipVertical < 0;
+            return isRotated || ifFlippedHor || ifFlippedVer;
+        };
+        Rotate.prototype.closeGallery = function () {
+            if (this.isImageOrientationChanged()) {
+                this.core.getSlideItem(this.core.index).css('opacity', 0);
+            }
+            this.rotateValuesList = {};
+        };
+        Rotate.prototype.destroy = function () {
+            // Unbind all events added by lightGallery rotate plugin
+            this.core.LGel.off('.lg.rotate');
+            this.core.LGel.off('.rotate');
+        };
+        return Rotate;
+    }());
+
+    return Rotate;
+
+})));
+//# sourceMappingURL=lg-rotate.umd.js.map

res/plugins/share/lg-share.es5.js

@@ -0,0 +1,219 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
+var shareSettings = {
+    share: true,
+    facebook: true,
+    facebookDropdownText: 'Facebook',
+    twitter: true,
+    twitterDropdownText: 'Twitter',
+    pinterest: true,
+    pinterestDropdownText: 'Pinterest',
+    additionalShareOptions: [],
+    sharePluginStrings: { share: 'Share' },
+};
+
+function getFacebookShareLink(galleryItem) {
+    var facebookBaseUrl = '//www.facebook.com/sharer/sharer.php?u=';
+    return (facebookBaseUrl +
+        encodeURIComponent(galleryItem.facebookShareUrl || window.location.href));
+}
+
+function getTwitterShareLink(galleryItem) {
+    var twitterBaseUrl = '//twitter.com/intent/tweet?text=';
+    var url = encodeURIComponent(galleryItem.twitterShareUrl || window.location.href);
+    var text = galleryItem.tweetText;
+    return twitterBaseUrl + text + '&url=' + url;
+}
+
+function getPinterestShareLink(galleryItem) {
+    var pinterestBaseUrl = 'http://www.pinterest.com/pin/create/button/?url=';
+    var description = galleryItem.pinterestText;
+    var media = encodeURIComponent(galleryItem.src);
+    var url = encodeURIComponent(galleryItem.pinterestShareUrl || window.location.href);
+    return (pinterestBaseUrl +
+        url +
+        '&media=' +
+        media +
+        '&description=' +
+        description);
+}
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var Share = /** @class */ (function () {
+    function Share(instance) {
+        this.shareOptions = [];
+        // get lightGallery core plugin instance
+        this.core = instance;
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, shareSettings), this.core.settings);
+        return this;
+    }
+    Share.prototype.init = function () {
+        if (!this.settings.share) {
+            return;
+        }
+        this.shareOptions = __spreadArrays(this.getDefaultShareOptions(), this.settings.additionalShareOptions);
+        this.setLgShareMarkup();
+        this.core.outer
+            .find('.lg-share .lg-dropdown')
+            .append(this.getShareListHtml());
+        this.core.LGel.on(lGEvents.afterSlide + ".share", this.onAfterSlide.bind(this));
+    };
+    Share.prototype.getShareListHtml = function () {
+        var shareHtml = '';
+        this.shareOptions.forEach(function (shareOption) {
+            shareHtml += shareOption.dropdownHTML;
+        });
+        return shareHtml;
+    };
+    Share.prototype.setLgShareMarkup = function () {
+        var _this = this;
+        this.core.$toolbar.append("<button type=\"button\" aria-label=\"" + this.settings.sharePluginStrings['share'] + "\" aria-haspopup=\"true\" aria-expanded=\"false\" class=\"lg-share lg-icon\">\n                <ul class=\"lg-dropdown\" style=\"position: absolute;\"></ul></button>");
+        this.core.outer.append('<div class="lg-dropdown-overlay"></div>');
+        var $shareButton = this.core.outer.find('.lg-share');
+        $shareButton.first().on('click.lg', function () {
+            _this.core.outer.toggleClass('lg-dropdown-active');
+            if (_this.core.outer.hasClass('lg-dropdown-active')) {
+                _this.core.outer.attr('aria-expanded', true);
+            }
+            else {
+                _this.core.outer.attr('aria-expanded', false);
+            }
+        });
+        this.core.outer
+            .find('.lg-dropdown-overlay')
+            .first()
+            .on('click.lg', function () {
+            _this.core.outer.removeClass('lg-dropdown-active');
+            _this.core.outer.attr('aria-expanded', false);
+        });
+    };
+    Share.prototype.onAfterSlide = function (event) {
+        var _this = this;
+        var index = event.detail.index;
+        var currentItem = this.core.galleryItems[index];
+        setTimeout(function () {
+            _this.shareOptions.forEach(function (shareOption) {
+                var selector = shareOption.selector;
+                _this.core.outer
+                    .find(selector)
+                    .attr('href', shareOption.generateLink(currentItem));
+            });
+        }, 100);
+    };
+    Share.prototype.getShareListItemHTML = function (type, text) {
+        return "<li><a class=\"lg-share-" + type + "\" rel=\"noopener\" target=\"_blank\"><span class=\"lg-icon\"></span><span class=\"lg-dropdown-text\">" + text + "</span></a></li>";
+    };
+    Share.prototype.getDefaultShareOptions = function () {
+        return __spreadArrays((this.settings.facebook
+            ? [
+                {
+                    type: 'facebook',
+                    generateLink: getFacebookShareLink,
+                    dropdownHTML: this.getShareListItemHTML('facebook', this.settings.facebookDropdownText),
+                    selector: '.lg-share-facebook',
+                },
+            ]
+            : []), (this.settings.twitter
+            ? [
+                {
+                    type: 'twitter',
+                    generateLink: getTwitterShareLink,
+                    dropdownHTML: this.getShareListItemHTML('twitter', this.settings.twitterDropdownText),
+                    selector: '.lg-share-twitter',
+                },
+            ]
+            : []), (this.settings.pinterest
+            ? [
+                {
+                    type: 'pinterest',
+                    generateLink: getPinterestShareLink,
+                    dropdownHTML: this.getShareListItemHTML('pinterest', this.settings.pinterestDropdownText),
+                    selector: '.lg-share-pinterest',
+                },
+            ]
+            : []));
+    };
+    Share.prototype.destroy = function () {
+        this.core.outer.find('.lg-dropdown-overlay').remove();
+        this.core.outer.find('.lg-share').remove();
+        this.core.LGel.off('.lg.share');
+        this.core.LGel.off('.share');
+    };
+    return Share;
+}());
+
+export default Share;
+//# sourceMappingURL=lg-share.es5.js.map

res/plugins/share/lg-share.umd.js

@@ -0,0 +1,227 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgShare = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+
+    var shareSettings = {
+        share: true,
+        facebook: true,
+        facebookDropdownText: 'Facebook',
+        twitter: true,
+        twitterDropdownText: 'Twitter',
+        pinterest: true,
+        pinterestDropdownText: 'Pinterest',
+        additionalShareOptions: [],
+        sharePluginStrings: { share: 'Share' },
+    };
+
+    function getFacebookShareLink(galleryItem) {
+        var facebookBaseUrl = '//www.facebook.com/sharer/sharer.php?u=';
+        return (facebookBaseUrl +
+            encodeURIComponent(galleryItem.facebookShareUrl || window.location.href));
+    }
+
+    function getTwitterShareLink(galleryItem) {
+        var twitterBaseUrl = '//twitter.com/intent/tweet?text=';
+        var url = encodeURIComponent(galleryItem.twitterShareUrl || window.location.href);
+        var text = galleryItem.tweetText;
+        return twitterBaseUrl + text + '&url=' + url;
+    }
+
+    function getPinterestShareLink(galleryItem) {
+        var pinterestBaseUrl = 'http://www.pinterest.com/pin/create/button/?url=';
+        var description = galleryItem.pinterestText;
+        var media = encodeURIComponent(galleryItem.src);
+        var url = encodeURIComponent(galleryItem.pinterestShareUrl || window.location.href);
+        return (pinterestBaseUrl +
+            url +
+            '&media=' +
+            media +
+            '&description=' +
+            description);
+    }
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var Share = /** @class */ (function () {
+        function Share(instance) {
+            this.shareOptions = [];
+            // get lightGallery core plugin instance
+            this.core = instance;
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, shareSettings), this.core.settings);
+            return this;
+        }
+        Share.prototype.init = function () {
+            if (!this.settings.share) {
+                return;
+            }
+            this.shareOptions = __spreadArrays(this.getDefaultShareOptions(), this.settings.additionalShareOptions);
+            this.setLgShareMarkup();
+            this.core.outer
+                .find('.lg-share .lg-dropdown')
+                .append(this.getShareListHtml());
+            this.core.LGel.on(lGEvents.afterSlide + ".share", this.onAfterSlide.bind(this));
+        };
+        Share.prototype.getShareListHtml = function () {
+            var shareHtml = '';
+            this.shareOptions.forEach(function (shareOption) {
+                shareHtml += shareOption.dropdownHTML;
+            });
+            return shareHtml;
+        };
+        Share.prototype.setLgShareMarkup = function () {
+            var _this = this;
+            this.core.$toolbar.append("<button type=\"button\" aria-label=\"" + this.settings.sharePluginStrings['share'] + "\" aria-haspopup=\"true\" aria-expanded=\"false\" class=\"lg-share lg-icon\">\n                <ul class=\"lg-dropdown\" style=\"position: absolute;\"></ul></button>");
+            this.core.outer.append('<div class="lg-dropdown-overlay"></div>');
+            var $shareButton = this.core.outer.find('.lg-share');
+            $shareButton.first().on('click.lg', function () {
+                _this.core.outer.toggleClass('lg-dropdown-active');
+                if (_this.core.outer.hasClass('lg-dropdown-active')) {
+                    _this.core.outer.attr('aria-expanded', true);
+                }
+                else {
+                    _this.core.outer.attr('aria-expanded', false);
+                }
+            });
+            this.core.outer
+                .find('.lg-dropdown-overlay')
+                .first()
+                .on('click.lg', function () {
+                _this.core.outer.removeClass('lg-dropdown-active');
+                _this.core.outer.attr('aria-expanded', false);
+            });
+        };
+        Share.prototype.onAfterSlide = function (event) {
+            var _this = this;
+            var index = event.detail.index;
+            var currentItem = this.core.galleryItems[index];
+            setTimeout(function () {
+                _this.shareOptions.forEach(function (shareOption) {
+                    var selector = shareOption.selector;
+                    _this.core.outer
+                        .find(selector)
+                        .attr('href', shareOption.generateLink(currentItem));
+                });
+            }, 100);
+        };
+        Share.prototype.getShareListItemHTML = function (type, text) {
+            return "<li><a class=\"lg-share-" + type + "\" rel=\"noopener\" target=\"_blank\"><span class=\"lg-icon\"></span><span class=\"lg-dropdown-text\">" + text + "</span></a></li>";
+        };
+        Share.prototype.getDefaultShareOptions = function () {
+            return __spreadArrays((this.settings.facebook
+                ? [
+                    {
+                        type: 'facebook',
+                        generateLink: getFacebookShareLink,
+                        dropdownHTML: this.getShareListItemHTML('facebook', this.settings.facebookDropdownText),
+                        selector: '.lg-share-facebook',
+                    },
+                ]
+                : []), (this.settings.twitter
+                ? [
+                    {
+                        type: 'twitter',
+                        generateLink: getTwitterShareLink,
+                        dropdownHTML: this.getShareListItemHTML('twitter', this.settings.twitterDropdownText),
+                        selector: '.lg-share-twitter',
+                    },
+                ]
+                : []), (this.settings.pinterest
+                ? [
+                    {
+                        type: 'pinterest',
+                        generateLink: getPinterestShareLink,
+                        dropdownHTML: this.getShareListItemHTML('pinterest', this.settings.pinterestDropdownText),
+                        selector: '.lg-share-pinterest',
+                    },
+                ]
+                : []));
+        };
+        Share.prototype.destroy = function () {
+            this.core.outer.find('.lg-dropdown-overlay').remove();
+            this.core.outer.find('.lg-share').remove();
+            this.core.LGel.off('.lg.share');
+            this.core.LGel.off('.share');
+        };
+        return Share;
+    }());
+
+    return Share;
+
+})));
+//# sourceMappingURL=lg-share.umd.js.map

res/plugins/thumbnail/lg-thumbnail.es5.js

@@ -0,0 +1,481 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var thumbnailsSettings = {
+    thumbnail: true,
+    animateThumb: true,
+    currentPagerPosition: 'middle',
+    alignThumbnails: 'middle',
+    thumbWidth: 100,
+    thumbHeight: '80px',
+    thumbMargin: 5,
+    appendThumbnailsTo: '.lg-components',
+    toggleThumb: false,
+    enableThumbDrag: true,
+    enableThumbSwipe: true,
+    thumbnailSwipeThreshold: 10,
+    loadYouTubeThumbnail: true,
+    youTubeThumbSize: 1,
+    thumbnailPluginStrings: { toggleThumbnails: 'Toggle thumbnails' },
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var Thumbnail = /** @class */ (function () {
+    function Thumbnail(instance, $LG) {
+        this.thumbOuterWidth = 0;
+        this.thumbTotalWidth = 0;
+        this.translateX = 0;
+        this.thumbClickable = false;
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        return this;
+    }
+    Thumbnail.prototype.init = function () {
+        // extend module default settings with lightGallery core settings
+        this.settings = __assign(__assign({}, thumbnailsSettings), this.core.settings);
+        this.thumbOuterWidth = 0;
+        this.thumbTotalWidth =
+            this.core.galleryItems.length *
+                (this.settings.thumbWidth + this.settings.thumbMargin);
+        // Thumbnail animation value
+        this.translateX = 0;
+        this.setAnimateThumbStyles();
+        if (!this.core.settings.allowMediaOverlap) {
+            this.settings.toggleThumb = false;
+        }
+        if (this.settings.thumbnail) {
+            this.build();
+            if (this.settings.animateThumb) {
+                if (this.settings.enableThumbDrag) {
+                    this.enableThumbDrag();
+                }
+                if (this.settings.enableThumbSwipe) {
+                    this.enableThumbSwipe();
+                }
+                this.thumbClickable = false;
+            }
+            else {
+                this.thumbClickable = true;
+            }
+            this.toggleThumbBar();
+            this.thumbKeyPress();
+        }
+    };
+    Thumbnail.prototype.build = function () {
+        var _this = this;
+        this.setThumbMarkup();
+        this.manageActiveClassOnSlideChange();
+        this.$lgThumb.first().on('click.lg touchend.lg', function (e) {
+            var $target = _this.$LG(e.target);
+            if (!$target.hasAttribute('data-lg-item-id')) {
+                return;
+            }
+            setTimeout(function () {
+                // In IE9 and bellow touch does not support
+                // Go to slide if browser does not support css transitions
+                if (_this.thumbClickable && !_this.core.lgBusy) {
+                    var index = parseInt($target.attr('data-lg-item-id'));
+                    _this.core.slide(index, false, true, false);
+                }
+            }, 50);
+        });
+        this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
+            var index = event.detail.index;
+            _this.animateThumb(index);
+        });
+        this.core.LGel.on(lGEvents.beforeOpen + ".thumb", function () {
+            _this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
+        });
+        this.core.LGel.on(lGEvents.updateSlides + ".thumb", function () {
+            _this.rebuildThumbnails();
+        });
+        this.core.LGel.on(lGEvents.containerResize + ".thumb", function () {
+            if (!_this.core.lgOpened)
+                return;
+            setTimeout(function () {
+                _this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
+                _this.animateThumb(_this.core.index);
+                _this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
+            }, 50);
+        });
+    };
+    Thumbnail.prototype.setThumbMarkup = function () {
+        var thumbOuterClassNames = 'lg-thumb-outer ';
+        if (this.settings.alignThumbnails) {
+            thumbOuterClassNames += "lg-thumb-align-" + this.settings.alignThumbnails;
+        }
+        var html = "<div class=\"" + thumbOuterClassNames + "\">\n        <div class=\"lg-thumb lg-group\">\n        </div>\n        </div>";
+        this.core.outer.addClass('lg-has-thumb');
+        if (this.settings.appendThumbnailsTo === '.lg-components') {
+            this.core.$lgComponents.append(html);
+        }
+        else {
+            this.core.outer.append(html);
+        }
+        this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first();
+        this.$lgThumb = this.core.outer.find('.lg-thumb').first();
+        if (this.settings.animateThumb) {
+            this.core.outer
+                .find('.lg-thumb')
+                .css('transition-duration', this.core.settings.speed + 'ms')
+                .css('width', this.thumbTotalWidth + 'px')
+                .css('position', 'relative');
+        }
+        this.setThumbItemHtml(this.core.galleryItems);
+    };
+    Thumbnail.prototype.enableThumbDrag = function () {
+        var _this = this;
+        var thumbDragUtils = {
+            cords: {
+                startX: 0,
+                endX: 0,
+            },
+            isMoved: false,
+            newTranslateX: 0,
+            startTime: new Date(),
+            endTime: new Date(),
+            touchMoveTime: 0,
+        };
+        var isDragging = false;
+        this.$thumbOuter.addClass('lg-grab');
+        this.core.outer
+            .find('.lg-thumb')
+            .first()
+            .on('mousedown.lg.thumb', function (e) {
+            if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
+                // execute only on .lg-object
+                e.preventDefault();
+                thumbDragUtils.cords.startX = e.pageX;
+                thumbDragUtils.startTime = new Date();
+                _this.thumbClickable = false;
+                isDragging = true;
+                // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+                _this.core.outer.get().scrollLeft += 1;
+                _this.core.outer.get().scrollLeft -= 1;
+                // *
+                _this.$thumbOuter
+                    .removeClass('lg-grab')
+                    .addClass('lg-grabbing');
+            }
+        });
+        this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) {
+            if (!_this.core.lgOpened)
+                return;
+            if (isDragging) {
+                thumbDragUtils.cords.endX = e.pageX;
+                thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
+            }
+        });
+        this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () {
+            if (!_this.core.lgOpened)
+                return;
+            if (thumbDragUtils.isMoved) {
+                thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
+            }
+            else {
+                _this.thumbClickable = true;
+            }
+            if (isDragging) {
+                isDragging = false;
+                _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
+            }
+        });
+    };
+    Thumbnail.prototype.enableThumbSwipe = function () {
+        var _this = this;
+        var thumbDragUtils = {
+            cords: {
+                startX: 0,
+                endX: 0,
+            },
+            isMoved: false,
+            newTranslateX: 0,
+            startTime: new Date(),
+            endTime: new Date(),
+            touchMoveTime: 0,
+        };
+        this.$lgThumb.on('touchstart.lg', function (e) {
+            if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
+                e.preventDefault();
+                thumbDragUtils.cords.startX = e.targetTouches[0].pageX;
+                _this.thumbClickable = false;
+                thumbDragUtils.startTime = new Date();
+            }
+        });
+        this.$lgThumb.on('touchmove.lg', function (e) {
+            if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
+                e.preventDefault();
+                thumbDragUtils.cords.endX = e.targetTouches[0].pageX;
+                thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
+            }
+        });
+        this.$lgThumb.on('touchend.lg', function () {
+            if (thumbDragUtils.isMoved) {
+                thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
+            }
+            else {
+                _this.thumbClickable = true;
+            }
+        });
+    };
+    // Rebuild thumbnails
+    Thumbnail.prototype.rebuildThumbnails = function () {
+        var _this = this;
+        // Remove transitions
+        this.$thumbOuter.addClass('lg-rebuilding-thumbnails');
+        setTimeout(function () {
+            _this.thumbTotalWidth =
+                _this.core.galleryItems.length *
+                    (_this.settings.thumbWidth + _this.settings.thumbMargin);
+            _this.$lgThumb.css('width', _this.thumbTotalWidth + 'px');
+            _this.$lgThumb.empty();
+            _this.setThumbItemHtml(_this.core.galleryItems);
+            _this.animateThumb(_this.core.index);
+        }, 50);
+        setTimeout(function () {
+            _this.$thumbOuter.removeClass('lg-rebuilding-thumbnails');
+        }, 200);
+    };
+    // @ts-check
+    Thumbnail.prototype.setTranslate = function (value) {
+        this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)');
+    };
+    Thumbnail.prototype.getPossibleTransformX = function (left) {
+        if (left > this.thumbTotalWidth - this.thumbOuterWidth) {
+            left = this.thumbTotalWidth - this.thumbOuterWidth;
+        }
+        if (left < 0) {
+            left = 0;
+        }
+        return left;
+    };
+    Thumbnail.prototype.animateThumb = function (index) {
+        this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms');
+        if (this.settings.animateThumb) {
+            var position = 0;
+            switch (this.settings.currentPagerPosition) {
+                case 'left':
+                    position = 0;
+                    break;
+                case 'middle':
+                    position =
+                        this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2;
+                    break;
+                case 'right':
+                    position = this.thumbOuterWidth - this.settings.thumbWidth;
+            }
+            this.translateX =
+                (this.settings.thumbWidth + this.settings.thumbMargin) * index -
+                    1 -
+                    position;
+            if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) {
+                this.translateX = this.thumbTotalWidth - this.thumbOuterWidth;
+            }
+            if (this.translateX < 0) {
+                this.translateX = 0;
+            }
+            this.setTranslate(this.translateX);
+        }
+    };
+    Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) {
+        thumbDragUtils.newTranslateX = this.translateX;
+        thumbDragUtils.isMoved = true;
+        thumbDragUtils.touchMoveTime = new Date().valueOf();
+        thumbDragUtils.newTranslateX -=
+            thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
+        thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX);
+        // move current slide
+        this.setTranslate(thumbDragUtils.newTranslateX);
+        this.$thumbOuter.addClass('lg-dragging');
+        return thumbDragUtils;
+    };
+    Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) {
+        thumbDragUtils.isMoved = false;
+        thumbDragUtils.endTime = new Date();
+        this.$thumbOuter.removeClass('lg-dragging');
+        var touchDuration = thumbDragUtils.endTime.valueOf() -
+            thumbDragUtils.startTime.valueOf();
+        var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
+        var speedX = Math.abs(distanceXnew) / touchDuration;
+        // Some magical numbers
+        // Can be improved
+        if (speedX > 0.15 &&
+            thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) {
+            speedX += 1;
+            if (speedX > 2) {
+                speedX += 1;
+            }
+            speedX =
+                speedX +
+                    speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth);
+            this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings');
+            distanceXnew = distanceXnew * speedX;
+            this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew);
+            this.setTranslate(this.translateX);
+        }
+        else {
+            this.translateX = thumbDragUtils.newTranslateX;
+        }
+        if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) <
+            this.settings.thumbnailSwipeThreshold) {
+            this.thumbClickable = true;
+        }
+        return thumbDragUtils;
+    };
+    Thumbnail.prototype.getThumbHtml = function (thumb, index) {
+        var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
+        var thumbImg;
+        if (slideVideoInfo.youtube) {
+            if (this.settings.loadYouTubeThumbnail) {
+                thumbImg =
+                    '//img.youtube.com/vi/' +
+                        slideVideoInfo.youtube[1] +
+                        '/' +
+                        this.settings.youTubeThumbSize +
+                        '.jpg';
+            }
+            else {
+                thumbImg = thumb;
+            }
+        }
+        else {
+            thumbImg = thumb;
+        }
+        return "<div data-lg-item-id=\"" + index + "\" class=\"lg-thumb-item " + (index === this.core.index ? ' active' : '') + "\" \n        style=\"width:" + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + ";\n            margin-right: " + this.settings.thumbMargin + "px;\">\n            <img data-lg-item-id=\"" + index + "\" src=\"" + thumbImg + "\" />\n        </div>";
+    };
+    Thumbnail.prototype.getThumbItemHtml = function (items) {
+        var thumbList = '';
+        for (var i = 0; i < items.length; i++) {
+            thumbList += this.getThumbHtml(items[i].thumb, i);
+        }
+        return thumbList;
+    };
+    Thumbnail.prototype.setThumbItemHtml = function (items) {
+        var thumbList = this.getThumbItemHtml(items);
+        this.$lgThumb.html(thumbList);
+    };
+    Thumbnail.prototype.setAnimateThumbStyles = function () {
+        if (this.settings.animateThumb) {
+            this.core.outer.addClass('lg-animate-thumb');
+        }
+    };
+    // Manage thumbnail active calss
+    Thumbnail.prototype.manageActiveClassOnSlideChange = function () {
+        var _this = this;
+        // manage active class for thumbnail
+        this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
+            var $thumb = _this.core.outer.find('.lg-thumb-item');
+            var index = event.detail.index;
+            $thumb.removeClass('active');
+            $thumb.eq(index).addClass('active');
+        });
+    };
+    // Toggle thumbnail bar
+    Thumbnail.prototype.toggleThumbBar = function () {
+        var _this = this;
+        if (this.settings.toggleThumb) {
+            this.core.outer.addClass('lg-can-toggle');
+            this.core.$toolbar.append('<button type="button" aria-label="' +
+                this.settings.thumbnailPluginStrings['toggleThumbnails'] +
+                '" class="lg-toggle-thumb lg-icon"></button>');
+            this.core.outer
+                .find('.lg-toggle-thumb')
+                .first()
+                .on('click.lg', function () {
+                _this.core.outer.toggleClass('lg-components-open');
+            });
+        }
+    };
+    Thumbnail.prototype.thumbKeyPress = function () {
+        var _this = this;
+        this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) {
+            if (!_this.core.lgOpened || !_this.settings.toggleThumb)
+                return;
+            if (e.keyCode === 38) {
+                e.preventDefault();
+                _this.core.outer.addClass('lg-components-open');
+            }
+            else if (e.keyCode === 40) {
+                e.preventDefault();
+                _this.core.outer.removeClass('lg-components-open');
+            }
+        });
+    };
+    Thumbnail.prototype.destroy = function () {
+        if (this.settings.thumbnail) {
+            this.$LG(window).off(".lg.thumb.global" + this.core.lgId);
+            this.core.LGel.off('.lg.thumb');
+            this.core.LGel.off('.thumb');
+            this.$thumbOuter.remove();
+            this.core.outer.removeClass('lg-has-thumb');
+        }
+    };
+    return Thumbnail;
+}());
+
+export default Thumbnail;
+//# sourceMappingURL=lg-thumbnail.es5.js.map

res/plugins/thumbnail/lg-thumbnail.umd.js

@@ -0,0 +1,489 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgThumbnail = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    var thumbnailsSettings = {
+        thumbnail: true,
+        animateThumb: true,
+        currentPagerPosition: 'middle',
+        alignThumbnails: 'middle',
+        thumbWidth: 100,
+        thumbHeight: '80px',
+        thumbMargin: 5,
+        appendThumbnailsTo: '.lg-components',
+        toggleThumb: false,
+        enableThumbDrag: true,
+        enableThumbSwipe: true,
+        thumbnailSwipeThreshold: 10,
+        loadYouTubeThumbnail: true,
+        youTubeThumbSize: 1,
+        thumbnailPluginStrings: { toggleThumbnails: 'Toggle thumbnails' },
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var Thumbnail = /** @class */ (function () {
+        function Thumbnail(instance, $LG) {
+            this.thumbOuterWidth = 0;
+            this.thumbTotalWidth = 0;
+            this.translateX = 0;
+            this.thumbClickable = false;
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            return this;
+        }
+        Thumbnail.prototype.init = function () {
+            // extend module default settings with lightGallery core settings
+            this.settings = __assign(__assign({}, thumbnailsSettings), this.core.settings);
+            this.thumbOuterWidth = 0;
+            this.thumbTotalWidth =
+                this.core.galleryItems.length *
+                    (this.settings.thumbWidth + this.settings.thumbMargin);
+            // Thumbnail animation value
+            this.translateX = 0;
+            this.setAnimateThumbStyles();
+            if (!this.core.settings.allowMediaOverlap) {
+                this.settings.toggleThumb = false;
+            }
+            if (this.settings.thumbnail) {
+                this.build();
+                if (this.settings.animateThumb) {
+                    if (this.settings.enableThumbDrag) {
+                        this.enableThumbDrag();
+                    }
+                    if (this.settings.enableThumbSwipe) {
+                        this.enableThumbSwipe();
+                    }
+                    this.thumbClickable = false;
+                }
+                else {
+                    this.thumbClickable = true;
+                }
+                this.toggleThumbBar();
+                this.thumbKeyPress();
+            }
+        };
+        Thumbnail.prototype.build = function () {
+            var _this = this;
+            this.setThumbMarkup();
+            this.manageActiveClassOnSlideChange();
+            this.$lgThumb.first().on('click.lg touchend.lg', function (e) {
+                var $target = _this.$LG(e.target);
+                if (!$target.hasAttribute('data-lg-item-id')) {
+                    return;
+                }
+                setTimeout(function () {
+                    // In IE9 and bellow touch does not support
+                    // Go to slide if browser does not support css transitions
+                    if (_this.thumbClickable && !_this.core.lgBusy) {
+                        var index = parseInt($target.attr('data-lg-item-id'));
+                        _this.core.slide(index, false, true, false);
+                    }
+                }, 50);
+            });
+            this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
+                var index = event.detail.index;
+                _this.animateThumb(index);
+            });
+            this.core.LGel.on(lGEvents.beforeOpen + ".thumb", function () {
+                _this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
+            });
+            this.core.LGel.on(lGEvents.updateSlides + ".thumb", function () {
+                _this.rebuildThumbnails();
+            });
+            this.core.LGel.on(lGEvents.containerResize + ".thumb", function () {
+                if (!_this.core.lgOpened)
+                    return;
+                setTimeout(function () {
+                    _this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
+                    _this.animateThumb(_this.core.index);
+                    _this.thumbOuterWidth = _this.core.outer.get().offsetWidth;
+                }, 50);
+            });
+        };
+        Thumbnail.prototype.setThumbMarkup = function () {
+            var thumbOuterClassNames = 'lg-thumb-outer ';
+            if (this.settings.alignThumbnails) {
+                thumbOuterClassNames += "lg-thumb-align-" + this.settings.alignThumbnails;
+            }
+            var html = "<div class=\"" + thumbOuterClassNames + "\">\n        <div class=\"lg-thumb lg-group\">\n        </div>\n        </div>";
+            this.core.outer.addClass('lg-has-thumb');
+            if (this.settings.appendThumbnailsTo === '.lg-components') {
+                this.core.$lgComponents.append(html);
+            }
+            else {
+                this.core.outer.append(html);
+            }
+            this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first();
+            this.$lgThumb = this.core.outer.find('.lg-thumb').first();
+            if (this.settings.animateThumb) {
+                this.core.outer
+                    .find('.lg-thumb')
+                    .css('transition-duration', this.core.settings.speed + 'ms')
+                    .css('width', this.thumbTotalWidth + 'px')
+                    .css('position', 'relative');
+            }
+            this.setThumbItemHtml(this.core.galleryItems);
+        };
+        Thumbnail.prototype.enableThumbDrag = function () {
+            var _this = this;
+            var thumbDragUtils = {
+                cords: {
+                    startX: 0,
+                    endX: 0,
+                },
+                isMoved: false,
+                newTranslateX: 0,
+                startTime: new Date(),
+                endTime: new Date(),
+                touchMoveTime: 0,
+            };
+            var isDragging = false;
+            this.$thumbOuter.addClass('lg-grab');
+            this.core.outer
+                .find('.lg-thumb')
+                .first()
+                .on('mousedown.lg.thumb', function (e) {
+                if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
+                    // execute only on .lg-object
+                    e.preventDefault();
+                    thumbDragUtils.cords.startX = e.pageX;
+                    thumbDragUtils.startTime = new Date();
+                    _this.thumbClickable = false;
+                    isDragging = true;
+                    // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+                    _this.core.outer.get().scrollLeft += 1;
+                    _this.core.outer.get().scrollLeft -= 1;
+                    // *
+                    _this.$thumbOuter
+                        .removeClass('lg-grab')
+                        .addClass('lg-grabbing');
+                }
+            });
+            this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) {
+                if (!_this.core.lgOpened)
+                    return;
+                if (isDragging) {
+                    thumbDragUtils.cords.endX = e.pageX;
+                    thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
+                }
+            });
+            this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () {
+                if (!_this.core.lgOpened)
+                    return;
+                if (thumbDragUtils.isMoved) {
+                    thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
+                }
+                else {
+                    _this.thumbClickable = true;
+                }
+                if (isDragging) {
+                    isDragging = false;
+                    _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
+                }
+            });
+        };
+        Thumbnail.prototype.enableThumbSwipe = function () {
+            var _this = this;
+            var thumbDragUtils = {
+                cords: {
+                    startX: 0,
+                    endX: 0,
+                },
+                isMoved: false,
+                newTranslateX: 0,
+                startTime: new Date(),
+                endTime: new Date(),
+                touchMoveTime: 0,
+            };
+            this.$lgThumb.on('touchstart.lg', function (e) {
+                if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
+                    e.preventDefault();
+                    thumbDragUtils.cords.startX = e.targetTouches[0].pageX;
+                    _this.thumbClickable = false;
+                    thumbDragUtils.startTime = new Date();
+                }
+            });
+            this.$lgThumb.on('touchmove.lg', function (e) {
+                if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
+                    e.preventDefault();
+                    thumbDragUtils.cords.endX = e.targetTouches[0].pageX;
+                    thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
+                }
+            });
+            this.$lgThumb.on('touchend.lg', function () {
+                if (thumbDragUtils.isMoved) {
+                    thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
+                }
+                else {
+                    _this.thumbClickable = true;
+                }
+            });
+        };
+        // Rebuild thumbnails
+        Thumbnail.prototype.rebuildThumbnails = function () {
+            var _this = this;
+            // Remove transitions
+            this.$thumbOuter.addClass('lg-rebuilding-thumbnails');
+            setTimeout(function () {
+                _this.thumbTotalWidth =
+                    _this.core.galleryItems.length *
+                        (_this.settings.thumbWidth + _this.settings.thumbMargin);
+                _this.$lgThumb.css('width', _this.thumbTotalWidth + 'px');
+                _this.$lgThumb.empty();
+                _this.setThumbItemHtml(_this.core.galleryItems);
+                _this.animateThumb(_this.core.index);
+            }, 50);
+            setTimeout(function () {
+                _this.$thumbOuter.removeClass('lg-rebuilding-thumbnails');
+            }, 200);
+        };
+        // @ts-check
+        Thumbnail.prototype.setTranslate = function (value) {
+            this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)');
+        };
+        Thumbnail.prototype.getPossibleTransformX = function (left) {
+            if (left > this.thumbTotalWidth - this.thumbOuterWidth) {
+                left = this.thumbTotalWidth - this.thumbOuterWidth;
+            }
+            if (left < 0) {
+                left = 0;
+            }
+            return left;
+        };
+        Thumbnail.prototype.animateThumb = function (index) {
+            this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms');
+            if (this.settings.animateThumb) {
+                var position = 0;
+                switch (this.settings.currentPagerPosition) {
+                    case 'left':
+                        position = 0;
+                        break;
+                    case 'middle':
+                        position =
+                            this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2;
+                        break;
+                    case 'right':
+                        position = this.thumbOuterWidth - this.settings.thumbWidth;
+                }
+                this.translateX =
+                    (this.settings.thumbWidth + this.settings.thumbMargin) * index -
+                        1 -
+                        position;
+                if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) {
+                    this.translateX = this.thumbTotalWidth - this.thumbOuterWidth;
+                }
+                if (this.translateX < 0) {
+                    this.translateX = 0;
+                }
+                this.setTranslate(this.translateX);
+            }
+        };
+        Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) {
+            thumbDragUtils.newTranslateX = this.translateX;
+            thumbDragUtils.isMoved = true;
+            thumbDragUtils.touchMoveTime = new Date().valueOf();
+            thumbDragUtils.newTranslateX -=
+                thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
+            thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX);
+            // move current slide
+            this.setTranslate(thumbDragUtils.newTranslateX);
+            this.$thumbOuter.addClass('lg-dragging');
+            return thumbDragUtils;
+        };
+        Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) {
+            thumbDragUtils.isMoved = false;
+            thumbDragUtils.endTime = new Date();
+            this.$thumbOuter.removeClass('lg-dragging');
+            var touchDuration = thumbDragUtils.endTime.valueOf() -
+                thumbDragUtils.startTime.valueOf();
+            var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
+            var speedX = Math.abs(distanceXnew) / touchDuration;
+            // Some magical numbers
+            // Can be improved
+            if (speedX > 0.15 &&
+                thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) {
+                speedX += 1;
+                if (speedX > 2) {
+                    speedX += 1;
+                }
+                speedX =
+                    speedX +
+                        speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth);
+                this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings');
+                distanceXnew = distanceXnew * speedX;
+                this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew);
+                this.setTranslate(this.translateX);
+            }
+            else {
+                this.translateX = thumbDragUtils.newTranslateX;
+            }
+            if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) <
+                this.settings.thumbnailSwipeThreshold) {
+                this.thumbClickable = true;
+            }
+            return thumbDragUtils;
+        };
+        Thumbnail.prototype.getThumbHtml = function (thumb, index) {
+            var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
+            var thumbImg;
+            if (slideVideoInfo.youtube) {
+                if (this.settings.loadYouTubeThumbnail) {
+                    thumbImg =
+                        '//img.youtube.com/vi/' +
+                            slideVideoInfo.youtube[1] +
+                            '/' +
+                            this.settings.youTubeThumbSize +
+                            '.jpg';
+                }
+                else {
+                    thumbImg = thumb;
+                }
+            }
+            else {
+                thumbImg = thumb;
+            }
+            return "<div data-lg-item-id=\"" + index + "\" class=\"lg-thumb-item " + (index === this.core.index ? ' active' : '') + "\" \n        style=\"width:" + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + ";\n            margin-right: " + this.settings.thumbMargin + "px;\">\n            <img data-lg-item-id=\"" + index + "\" src=\"" + thumbImg + "\" />\n        </div>";
+        };
+        Thumbnail.prototype.getThumbItemHtml = function (items) {
+            var thumbList = '';
+            for (var i = 0; i < items.length; i++) {
+                thumbList += this.getThumbHtml(items[i].thumb, i);
+            }
+            return thumbList;
+        };
+        Thumbnail.prototype.setThumbItemHtml = function (items) {
+            var thumbList = this.getThumbItemHtml(items);
+            this.$lgThumb.html(thumbList);
+        };
+        Thumbnail.prototype.setAnimateThumbStyles = function () {
+            if (this.settings.animateThumb) {
+                this.core.outer.addClass('lg-animate-thumb');
+            }
+        };
+        // Manage thumbnail active calss
+        Thumbnail.prototype.manageActiveClassOnSlideChange = function () {
+            var _this = this;
+            // manage active class for thumbnail
+            this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) {
+                var $thumb = _this.core.outer.find('.lg-thumb-item');
+                var index = event.detail.index;
+                $thumb.removeClass('active');
+                $thumb.eq(index).addClass('active');
+            });
+        };
+        // Toggle thumbnail bar
+        Thumbnail.prototype.toggleThumbBar = function () {
+            var _this = this;
+            if (this.settings.toggleThumb) {
+                this.core.outer.addClass('lg-can-toggle');
+                this.core.$toolbar.append('<button type="button" aria-label="' +
+                    this.settings.thumbnailPluginStrings['toggleThumbnails'] +
+                    '" class="lg-toggle-thumb lg-icon"></button>');
+                this.core.outer
+                    .find('.lg-toggle-thumb')
+                    .first()
+                    .on('click.lg', function () {
+                    _this.core.outer.toggleClass('lg-components-open');
+                });
+            }
+        };
+        Thumbnail.prototype.thumbKeyPress = function () {
+            var _this = this;
+            this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) {
+                if (!_this.core.lgOpened || !_this.settings.toggleThumb)
+                    return;
+                if (e.keyCode === 38) {
+                    e.preventDefault();
+                    _this.core.outer.addClass('lg-components-open');
+                }
+                else if (e.keyCode === 40) {
+                    e.preventDefault();
+                    _this.core.outer.removeClass('lg-components-open');
+                }
+            });
+        };
+        Thumbnail.prototype.destroy = function () {
+            if (this.settings.thumbnail) {
+                this.$LG(window).off(".lg.thumb.global" + this.core.lgId);
+                this.core.LGel.off('.lg.thumb');
+                this.core.LGel.off('.thumb');
+                this.$thumbOuter.remove();
+                this.core.outer.removeClass('lg-has-thumb');
+            }
+        };
+        return Thumbnail;
+    }());
+
+    return Thumbnail;
+
+})));
+//# sourceMappingURL=lg-thumbnail.umd.js.map

res/plugins/video/lg-video.es5.js

@@ -0,0 +1,495 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var videoSettings = {
+    autoplayFirstVideo: true,
+    youTubePlayerParams: false,
+    vimeoPlayerParams: false,
+    wistiaPlayerParams: false,
+    gotoNextSlideOnVideoEnd: true,
+    autoplayVideoOnSlide: false,
+    videojs: false,
+    videojsOptions: {},
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var param = function (obj) {
+    return Object.keys(obj)
+        .map(function (k) {
+        return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
+    })
+        .join('&');
+};
+var getVimeoURLParams = function (defaultParams, videoInfo) {
+    if (!videoInfo || !videoInfo.vimeo)
+        return '';
+    var urlParams = videoInfo.vimeo[2] || '';
+    urlParams =
+        urlParams[0] == '?' ? '&' + urlParams.slice(1) : urlParams || '';
+    var defaultPlayerParams = defaultParams
+        ? '&' + param(defaultParams)
+        : '';
+    // For vimeo last parms gets priority if duplicates found
+    var vimeoPlayerParams = "?autoplay=0&muted=1" + defaultPlayerParams + urlParams;
+    return vimeoPlayerParams;
+};
+
+/**
+ * Video module for lightGallery
+ * Supports HTML5, YouTube, Vimeo, wistia videos
+ *
+ *
+ * @ref Wistia
+ * https://wistia.com/support/integrations/wordpress(How to get url)
+ * https://wistia.com/support/developers/embed-options#using-embed-options
+ * https://wistia.com/support/developers/player-api
+ * https://wistia.com/support/developers/construct-an-embed-code
+ * http://jsfiddle.net/xvnm7xLm/
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
+ * https://wistia.com/support/embed-and-share/sharing-videos
+ * https://private-sharing.wistia.com/medias/mwhrulrucj
+ *
+ * @ref Youtube
+ * https://developers.google.com/youtube/player_parameters#enablejsapi
+ * https://developers.google.com/youtube/iframe_api_reference
+ * https://developer.chrome.com/blog/autoplay/#iframe-delegation
+ *
+ * @ref Vimeo
+ * https://stackoverflow.com/questions/10488943/easy-way-to-get-vimeo-id-from-a-vimeo-url
+ * https://vimeo.zendesk.com/hc/en-us/articles/360000121668-Starting-playback-at-a-specific-timecode
+ * https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
+ */
+var Video = /** @class */ (function () {
+    function Video(instance) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.settings = __assign(__assign({}, videoSettings), this.core.settings);
+        return this;
+    }
+    Video.prototype.init = function () {
+        var _this = this;
+        /**
+         * Event triggered when video url found without poster
+         * Append video HTML
+         * Play if autoplayFirstVideo is true
+         */
+        this.core.LGel.on(lGEvents.hasVideo + ".video", this.onHasVideo.bind(this));
+        this.core.LGel.on(lGEvents.posterClick + ".video", function () {
+            var $el = _this.core.getSlideItem(_this.core.index);
+            _this.loadVideoOnPosterClick($el);
+        });
+        this.core.LGel.on(lGEvents.slideItemLoad + ".video", this.onSlideItemLoad.bind(this));
+        // @desc fired immediately before each slide transition.
+        this.core.LGel.on(lGEvents.beforeSlide + ".video", this.onBeforeSlide.bind(this));
+        // @desc fired immediately after each slide transition.
+        this.core.LGel.on(lGEvents.afterSlide + ".video", this.onAfterSlide.bind(this));
+    };
+    /**
+     * @desc Event triggered when a slide is completely loaded
+     *
+     * @param {Event} event - lightGalley custom event
+     */
+    Video.prototype.onSlideItemLoad = function (event) {
+        var _this = this;
+        var _a = event.detail, isFirstSlide = _a.isFirstSlide, index = _a.index;
+        // Should check the active slide as well as user may have moved to different slide before the first slide is loaded
+        if (this.settings.autoplayFirstVideo &&
+            isFirstSlide &&
+            index === this.core.index) {
+            // Delay is just for the transition effect on video load
+            setTimeout(function () {
+                _this.loadAndPlayVideo(index);
+            }, 200);
+        }
+        // Should not call on first slide. should check only if the slide is active
+        if (!isFirstSlide &&
+            this.settings.autoplayVideoOnSlide &&
+            index === this.core.index) {
+            this.loadAndPlayVideo(index);
+        }
+    };
+    /**
+     * @desc Event triggered when video url or poster found
+     * Append video HTML is poster is not given
+     * Play if autoplayFirstVideo is true
+     *
+     * @param {Event} event - Javascript Event object.
+     */
+    Video.prototype.onHasVideo = function (event) {
+        var _a = event.detail, index = _a.index, src = _a.src, html5Video = _a.html5Video, hasPoster = _a.hasPoster;
+        if (!hasPoster) {
+            // All functions are called separately if poster exist in loadVideoOnPosterClick function
+            this.appendVideos(this.core.getSlideItem(index), {
+                src: src,
+                addClass: 'lg-object',
+                index: index,
+                html5Video: html5Video,
+            });
+            // Automatically navigate to next slide once video reaches the end.
+            this.gotoNextSlideOnVideoEnd(src, index);
+        }
+    };
+    /**
+     * @desc fired immediately before each slide transition.
+     * Pause the previous video
+     * Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos.
+     *
+     * @param {Event} event - Javascript Event object.
+     * @param {number} prevIndex - Previous index of the slide.
+     * @param {number} index - Current index of the slide
+     */
+    Video.prototype.onBeforeSlide = function (event) {
+        if (this.core.lGalleryOn) {
+            var prevIndex = event.detail.prevIndex;
+            this.pauseVideo(prevIndex);
+        }
+    };
+    /**
+     * @desc fired immediately after each slide transition.
+     * Play video if autoplayVideoOnSlide option is enabled.
+     *
+     * @param {Event} event - Javascript Event object.
+     * @param {number} prevIndex - Previous index of the slide.
+     * @param {number} index - Current index of the slide
+     * @todo should check on onSlideLoad as well if video is not loaded on after slide
+     */
+    Video.prototype.onAfterSlide = function (event) {
+        var _this = this;
+        var _a = event.detail, index = _a.index, prevIndex = _a.prevIndex;
+        // Do not call on first slide
+        var $slide = this.core.getSlideItem(index);
+        if (this.settings.autoplayVideoOnSlide && index !== prevIndex) {
+            if ($slide.hasClass('lg-complete')) {
+                setTimeout(function () {
+                    _this.loadAndPlayVideo(index);
+                }, 100);
+            }
+        }
+    };
+    Video.prototype.loadAndPlayVideo = function (index) {
+        var $slide = this.core.getSlideItem(index);
+        var currentGalleryItem = this.core.galleryItems[index];
+        if (currentGalleryItem.poster) {
+            this.loadVideoOnPosterClick($slide, true);
+        }
+        else {
+            this.playVideo(index);
+        }
+    };
+    /**
+     * Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
+     * @param {number} index - Index of the slide
+     */
+    Video.prototype.playVideo = function (index) {
+        this.controlVideo(index, 'play');
+    };
+    /**
+     * Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
+     * @param {number} index - Index of the slide
+     */
+    Video.prototype.pauseVideo = function (index) {
+        this.controlVideo(index, 'pause');
+    };
+    Video.prototype.getVideoHtml = function (src, addClass, index, html5Video) {
+        var video = '';
+        var videoInfo = this.core.galleryItems[index]
+            .__slideVideoInfo || {};
+        var currentGalleryItem = this.core.galleryItems[index];
+        var videoTitle = currentGalleryItem.title || currentGalleryItem.alt;
+        videoTitle = videoTitle ? 'title="' + videoTitle + '"' : '';
+        var commonIframeProps = "allowtransparency=\"true\"\n            frameborder=\"0\"\n            scrolling=\"no\"\n            allowfullscreen\n            mozallowfullscreen\n            webkitallowfullscreen\n            oallowfullscreen\n            msallowfullscreen";
+        if (videoInfo.youtube) {
+            var videoId = 'lg-youtube' + index;
+            var slideUrlParams = videoInfo.youtube[2]
+                ? videoInfo.youtube[2] + '&'
+                : '';
+            // For youtube first parms gets priority if duplicates found
+            var youTubePlayerParams = "?" + slideUrlParams + "wmode=opaque&autoplay=0&mute=1&enablejsapi=1";
+            var playerParams = youTubePlayerParams +
+                (this.settings.youTubePlayerParams
+                    ? '&' + param(this.settings.youTubePlayerParams)
+                    : '');
+            video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-youtube " + addClass + "\" " + videoTitle + " src=\"//www.youtube.com/embed/" + (videoInfo.youtube[1] + playerParams) + "\" " + commonIframeProps + "></iframe>";
+        }
+        else if (videoInfo.vimeo) {
+            var videoId = 'lg-vimeo' + index;
+            var playerParams = getVimeoURLParams(this.settings.vimeoPlayerParams, videoInfo);
+            video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-vimeo " + addClass + "\" " + videoTitle + " src=\"//player.vimeo.com/video/" + (videoInfo.vimeo[1] + playerParams) + "\" " + commonIframeProps + "></iframe>";
+        }
+        else if (videoInfo.wistia) {
+            var wistiaId = 'lg-wistia' + index;
+            var playerParams = param(this.settings.wistiaPlayerParams);
+            playerParams = playerParams ? '?' + playerParams : '';
+            video = "<iframe allow=\"autoplay\" id=\"" + wistiaId + "\" src=\"//fast.wistia.net/embed/iframe/" + (videoInfo.wistia[4] + playerParams) + "\" " + videoTitle + " class=\"wistia_embed lg-video-object lg-wistia " + addClass + "\" name=\"wistia_embed\" " + commonIframeProps + "></iframe>";
+        }
+        else if (videoInfo.html5) {
+            var html5VideoMarkup = '';
+            for (var i = 0; i < html5Video.source.length; i++) {
+                html5VideoMarkup += "<source src=\"" + html5Video.source[i].src + "\" type=\"" + html5Video.source[i].type + "\">";
+            }
+            if (html5Video.tracks) {
+                var _loop_1 = function (i) {
+                    var trackAttributes = '';
+                    var track = html5Video.tracks[i];
+                    Object.keys(track || {}).forEach(function (key) {
+                        trackAttributes += key + "=\"" + track[key] + "\" ";
+                    });
+                    html5VideoMarkup += "<track " + trackAttributes + ">";
+                };
+                for (var i = 0; i < html5Video.tracks.length; i++) {
+                    _loop_1(i);
+                }
+            }
+            var html5VideoAttrs_1 = '';
+            var videoAttributes_1 = html5Video.attributes || {};
+            Object.keys(videoAttributes_1 || {}).forEach(function (key) {
+                html5VideoAttrs_1 += key + "=\"" + videoAttributes_1[key] + "\" ";
+            });
+            video = "<video class=\"lg-video-object lg-html5 " + (this.settings.videojs ? 'video-js' : '') + "\" " + html5VideoAttrs_1 + ">\n                " + html5VideoMarkup + "\n                Your browser does not support HTML5 video.\n            </video>";
+        }
+        return video;
+    };
+    /**
+     * @desc - Append videos to the slide
+     *
+     * @param {HTMLElement} el - slide element
+     * @param {Object} videoParams - Video parameters, Contains src, class, index, htmlVideo
+     */
+    Video.prototype.appendVideos = function (el, videoParams) {
+        var _a;
+        var videoHtml = this.getVideoHtml(videoParams.src, videoParams.addClass, videoParams.index, videoParams.html5Video);
+        el.find('.lg-video-cont').append(videoHtml);
+        var $videoElement = el.find('.lg-video-object').first();
+        if (videoParams.html5Video) {
+            $videoElement.on('mousedown.lg.video', function (e) {
+                e.stopPropagation();
+            });
+        }
+        if (this.settings.videojs && ((_a = this.core.galleryItems[videoParams.index].__slideVideoInfo) === null || _a === void 0 ? void 0 : _a.html5)) {
+            try {
+                return videojs($videoElement.get(), this.settings.videojsOptions);
+            }
+            catch (e) {
+                console.error('lightGallery:- Make sure you have included videojs');
+            }
+        }
+    };
+    Video.prototype.gotoNextSlideOnVideoEnd = function (src, index) {
+        var _this = this;
+        var $videoElement = this.core
+            .getSlideItem(index)
+            .find('.lg-video-object')
+            .first();
+        var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
+        if (this.settings.gotoNextSlideOnVideoEnd) {
+            if (videoInfo.html5) {
+                $videoElement.on('ended', function () {
+                    _this.core.goToNextSlide();
+                });
+            }
+            else if (videoInfo.vimeo) {
+                try {
+                    // https://github.com/vimeo/player.js/#ended
+                    new Vimeo.Player($videoElement.get()).on('ended', function () {
+                        _this.core.goToNextSlide();
+                    });
+                }
+                catch (e) {
+                    console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
+                }
+            }
+            else if (videoInfo.wistia) {
+                try {
+                    window._wq = window._wq || [];
+                    // @todo Event is gettign triggered multiple times
+                    window._wq.push({
+                        id: $videoElement.attr('id'),
+                        onReady: function (video) {
+                            video.bind('end', function () {
+                                _this.core.goToNextSlide();
+                            });
+                        },
+                    });
+                }
+                catch (e) {
+                    console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
+                }
+            }
+        }
+    };
+    Video.prototype.controlVideo = function (index, action) {
+        var $videoElement = this.core
+            .getSlideItem(index)
+            .find('.lg-video-object')
+            .first();
+        var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
+        if (!$videoElement.get())
+            return;
+        if (videoInfo.youtube) {
+            try {
+                $videoElement.get().contentWindow.postMessage("{\"event\":\"command\",\"func\":\"" + action + "Video\",\"args\":\"\"}", '*');
+            }
+            catch (e) {
+                console.error("lightGallery:- " + e);
+            }
+        }
+        else if (videoInfo.vimeo) {
+            try {
+                new Vimeo.Player($videoElement.get())[action]();
+            }
+            catch (e) {
+                console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
+            }
+        }
+        else if (videoInfo.html5) {
+            if (this.settings.videojs) {
+                try {
+                    videojs($videoElement.get())[action]();
+                }
+                catch (e) {
+                    console.error('lightGallery:- Make sure you have included videojs');
+                }
+            }
+            else {
+                $videoElement.get()[action]();
+            }
+        }
+        else if (videoInfo.wistia) {
+            try {
+                window._wq = window._wq || [];
+                // @todo Find a way to destroy wistia player instance
+                window._wq.push({
+                    id: $videoElement.attr('id'),
+                    onReady: function (video) {
+                        video[action]();
+                    },
+                });
+            }
+            catch (e) {
+                console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
+            }
+        }
+    };
+    Video.prototype.loadVideoOnPosterClick = function ($el, forcePlay) {
+        var _this = this;
+        // check slide has poster
+        if (!$el.hasClass('lg-video-loaded')) {
+            // check already video element present
+            if (!$el.hasClass('lg-has-video')) {
+                $el.addClass('lg-has-video');
+                var _html = void 0;
+                var _src = this.core.galleryItems[this.core.index].src;
+                var video = this.core.galleryItems[this.core.index].video;
+                if (video) {
+                    _html =
+                        typeof video === 'string' ? JSON.parse(video) : video;
+                }
+                var videoJsPlayer_1 = this.appendVideos($el, {
+                    src: _src,
+                    addClass: '',
+                    index: this.core.index,
+                    html5Video: _html,
+                });
+                this.gotoNextSlideOnVideoEnd(_src, this.core.index);
+                var $tempImg = $el.find('.lg-object').first().get();
+                // @todo make sure it is working
+                $el.find('.lg-video-cont').first().append($tempImg);
+                $el.addClass('lg-video-loading');
+                videoJsPlayer_1 &&
+                    videoJsPlayer_1.ready(function () {
+                        videoJsPlayer_1.on('loadedmetadata', function () {
+                            _this.onVideoLoadAfterPosterClick($el, _this.core.index);
+                        });
+                    });
+                $el.find('.lg-video-object')
+                    .first()
+                    .on('load.lg error.lg loadedmetadata.lg', function () {
+                    setTimeout(function () {
+                        _this.onVideoLoadAfterPosterClick($el, _this.core.index);
+                    }, 50);
+                });
+            }
+            else {
+                this.playVideo(this.core.index);
+            }
+        }
+        else if (forcePlay) {
+            this.playVideo(this.core.index);
+        }
+    };
+    Video.prototype.onVideoLoadAfterPosterClick = function ($el, index) {
+        $el.addClass('lg-video-loaded');
+        this.playVideo(index);
+    };
+    Video.prototype.destroy = function () {
+        this.core.LGel.off('.lg.video');
+        this.core.LGel.off('.video');
+    };
+    return Video;
+}());
+
+export default Video;
+//# sourceMappingURL=lg-video.es5.js.map

res/plugins/video/lg-video.umd.js

@@ -0,0 +1,503 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgVideo = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    var videoSettings = {
+        autoplayFirstVideo: true,
+        youTubePlayerParams: false,
+        vimeoPlayerParams: false,
+        wistiaPlayerParams: false,
+        gotoNextSlideOnVideoEnd: true,
+        autoplayVideoOnSlide: false,
+        videojs: false,
+        videojsOptions: {},
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var param = function (obj) {
+        return Object.keys(obj)
+            .map(function (k) {
+            return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
+        })
+            .join('&');
+    };
+    var getVimeoURLParams = function (defaultParams, videoInfo) {
+        if (!videoInfo || !videoInfo.vimeo)
+            return '';
+        var urlParams = videoInfo.vimeo[2] || '';
+        urlParams =
+            urlParams[0] == '?' ? '&' + urlParams.slice(1) : urlParams || '';
+        var defaultPlayerParams = defaultParams
+            ? '&' + param(defaultParams)
+            : '';
+        // For vimeo last parms gets priority if duplicates found
+        var vimeoPlayerParams = "?autoplay=0&muted=1" + defaultPlayerParams + urlParams;
+        return vimeoPlayerParams;
+    };
+
+    /**
+     * Video module for lightGallery
+     * Supports HTML5, YouTube, Vimeo, wistia videos
+     *
+     *
+     * @ref Wistia
+     * https://wistia.com/support/integrations/wordpress(How to get url)
+     * https://wistia.com/support/developers/embed-options#using-embed-options
+     * https://wistia.com/support/developers/player-api
+     * https://wistia.com/support/developers/construct-an-embed-code
+     * http://jsfiddle.net/xvnm7xLm/
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
+     * https://wistia.com/support/embed-and-share/sharing-videos
+     * https://private-sharing.wistia.com/medias/mwhrulrucj
+     *
+     * @ref Youtube
+     * https://developers.google.com/youtube/player_parameters#enablejsapi
+     * https://developers.google.com/youtube/iframe_api_reference
+     * https://developer.chrome.com/blog/autoplay/#iframe-delegation
+     *
+     * @ref Vimeo
+     * https://stackoverflow.com/questions/10488943/easy-way-to-get-vimeo-id-from-a-vimeo-url
+     * https://vimeo.zendesk.com/hc/en-us/articles/360000121668-Starting-playback-at-a-specific-timecode
+     * https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
+     */
+    var Video = /** @class */ (function () {
+        function Video(instance) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.settings = __assign(__assign({}, videoSettings), this.core.settings);
+            return this;
+        }
+        Video.prototype.init = function () {
+            var _this = this;
+            /**
+             * Event triggered when video url found without poster
+             * Append video HTML
+             * Play if autoplayFirstVideo is true
+             */
+            this.core.LGel.on(lGEvents.hasVideo + ".video", this.onHasVideo.bind(this));
+            this.core.LGel.on(lGEvents.posterClick + ".video", function () {
+                var $el = _this.core.getSlideItem(_this.core.index);
+                _this.loadVideoOnPosterClick($el);
+            });
+            this.core.LGel.on(lGEvents.slideItemLoad + ".video", this.onSlideItemLoad.bind(this));
+            // @desc fired immediately before each slide transition.
+            this.core.LGel.on(lGEvents.beforeSlide + ".video", this.onBeforeSlide.bind(this));
+            // @desc fired immediately after each slide transition.
+            this.core.LGel.on(lGEvents.afterSlide + ".video", this.onAfterSlide.bind(this));
+        };
+        /**
+         * @desc Event triggered when a slide is completely loaded
+         *
+         * @param {Event} event - lightGalley custom event
+         */
+        Video.prototype.onSlideItemLoad = function (event) {
+            var _this = this;
+            var _a = event.detail, isFirstSlide = _a.isFirstSlide, index = _a.index;
+            // Should check the active slide as well as user may have moved to different slide before the first slide is loaded
+            if (this.settings.autoplayFirstVideo &&
+                isFirstSlide &&
+                index === this.core.index) {
+                // Delay is just for the transition effect on video load
+                setTimeout(function () {
+                    _this.loadAndPlayVideo(index);
+                }, 200);
+            }
+            // Should not call on first slide. should check only if the slide is active
+            if (!isFirstSlide &&
+                this.settings.autoplayVideoOnSlide &&
+                index === this.core.index) {
+                this.loadAndPlayVideo(index);
+            }
+        };
+        /**
+         * @desc Event triggered when video url or poster found
+         * Append video HTML is poster is not given
+         * Play if autoplayFirstVideo is true
+         *
+         * @param {Event} event - Javascript Event object.
+         */
+        Video.prototype.onHasVideo = function (event) {
+            var _a = event.detail, index = _a.index, src = _a.src, html5Video = _a.html5Video, hasPoster = _a.hasPoster;
+            if (!hasPoster) {
+                // All functions are called separately if poster exist in loadVideoOnPosterClick function
+                this.appendVideos(this.core.getSlideItem(index), {
+                    src: src,
+                    addClass: 'lg-object',
+                    index: index,
+                    html5Video: html5Video,
+                });
+                // Automatically navigate to next slide once video reaches the end.
+                this.gotoNextSlideOnVideoEnd(src, index);
+            }
+        };
+        /**
+         * @desc fired immediately before each slide transition.
+         * Pause the previous video
+         * Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos.
+         *
+         * @param {Event} event - Javascript Event object.
+         * @param {number} prevIndex - Previous index of the slide.
+         * @param {number} index - Current index of the slide
+         */
+        Video.prototype.onBeforeSlide = function (event) {
+            if (this.core.lGalleryOn) {
+                var prevIndex = event.detail.prevIndex;
+                this.pauseVideo(prevIndex);
+            }
+        };
+        /**
+         * @desc fired immediately after each slide transition.
+         * Play video if autoplayVideoOnSlide option is enabled.
+         *
+         * @param {Event} event - Javascript Event object.
+         * @param {number} prevIndex - Previous index of the slide.
+         * @param {number} index - Current index of the slide
+         * @todo should check on onSlideLoad as well if video is not loaded on after slide
+         */
+        Video.prototype.onAfterSlide = function (event) {
+            var _this = this;
+            var _a = event.detail, index = _a.index, prevIndex = _a.prevIndex;
+            // Do not call on first slide
+            var $slide = this.core.getSlideItem(index);
+            if (this.settings.autoplayVideoOnSlide && index !== prevIndex) {
+                if ($slide.hasClass('lg-complete')) {
+                    setTimeout(function () {
+                        _this.loadAndPlayVideo(index);
+                    }, 100);
+                }
+            }
+        };
+        Video.prototype.loadAndPlayVideo = function (index) {
+            var $slide = this.core.getSlideItem(index);
+            var currentGalleryItem = this.core.galleryItems[index];
+            if (currentGalleryItem.poster) {
+                this.loadVideoOnPosterClick($slide, true);
+            }
+            else {
+                this.playVideo(index);
+            }
+        };
+        /**
+         * Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
+         * @param {number} index - Index of the slide
+         */
+        Video.prototype.playVideo = function (index) {
+            this.controlVideo(index, 'play');
+        };
+        /**
+         * Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
+         * @param {number} index - Index of the slide
+         */
+        Video.prototype.pauseVideo = function (index) {
+            this.controlVideo(index, 'pause');
+        };
+        Video.prototype.getVideoHtml = function (src, addClass, index, html5Video) {
+            var video = '';
+            var videoInfo = this.core.galleryItems[index]
+                .__slideVideoInfo || {};
+            var currentGalleryItem = this.core.galleryItems[index];
+            var videoTitle = currentGalleryItem.title || currentGalleryItem.alt;
+            videoTitle = videoTitle ? 'title="' + videoTitle + '"' : '';
+            var commonIframeProps = "allowtransparency=\"true\"\n            frameborder=\"0\"\n            scrolling=\"no\"\n            allowfullscreen\n            mozallowfullscreen\n            webkitallowfullscreen\n            oallowfullscreen\n            msallowfullscreen";
+            if (videoInfo.youtube) {
+                var videoId = 'lg-youtube' + index;
+                var slideUrlParams = videoInfo.youtube[2]
+                    ? videoInfo.youtube[2] + '&'
+                    : '';
+                // For youtube first parms gets priority if duplicates found
+                var youTubePlayerParams = "?" + slideUrlParams + "wmode=opaque&autoplay=0&mute=1&enablejsapi=1";
+                var playerParams = youTubePlayerParams +
+                    (this.settings.youTubePlayerParams
+                        ? '&' + param(this.settings.youTubePlayerParams)
+                        : '');
+                video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-youtube " + addClass + "\" " + videoTitle + " src=\"//www.youtube.com/embed/" + (videoInfo.youtube[1] + playerParams) + "\" " + commonIframeProps + "></iframe>";
+            }
+            else if (videoInfo.vimeo) {
+                var videoId = 'lg-vimeo' + index;
+                var playerParams = getVimeoURLParams(this.settings.vimeoPlayerParams, videoInfo);
+                video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-vimeo " + addClass + "\" " + videoTitle + " src=\"//player.vimeo.com/video/" + (videoInfo.vimeo[1] + playerParams) + "\" " + commonIframeProps + "></iframe>";
+            }
+            else if (videoInfo.wistia) {
+                var wistiaId = 'lg-wistia' + index;
+                var playerParams = param(this.settings.wistiaPlayerParams);
+                playerParams = playerParams ? '?' + playerParams : '';
+                video = "<iframe allow=\"autoplay\" id=\"" + wistiaId + "\" src=\"//fast.wistia.net/embed/iframe/" + (videoInfo.wistia[4] + playerParams) + "\" " + videoTitle + " class=\"wistia_embed lg-video-object lg-wistia " + addClass + "\" name=\"wistia_embed\" " + commonIframeProps + "></iframe>";
+            }
+            else if (videoInfo.html5) {
+                var html5VideoMarkup = '';
+                for (var i = 0; i < html5Video.source.length; i++) {
+                    html5VideoMarkup += "<source src=\"" + html5Video.source[i].src + "\" type=\"" + html5Video.source[i].type + "\">";
+                }
+                if (html5Video.tracks) {
+                    var _loop_1 = function (i) {
+                        var trackAttributes = '';
+                        var track = html5Video.tracks[i];
+                        Object.keys(track || {}).forEach(function (key) {
+                            trackAttributes += key + "=\"" + track[key] + "\" ";
+                        });
+                        html5VideoMarkup += "<track " + trackAttributes + ">";
+                    };
+                    for (var i = 0; i < html5Video.tracks.length; i++) {
+                        _loop_1(i);
+                    }
+                }
+                var html5VideoAttrs_1 = '';
+                var videoAttributes_1 = html5Video.attributes || {};
+                Object.keys(videoAttributes_1 || {}).forEach(function (key) {
+                    html5VideoAttrs_1 += key + "=\"" + videoAttributes_1[key] + "\" ";
+                });
+                video = "<video class=\"lg-video-object lg-html5 " + (this.settings.videojs ? 'video-js' : '') + "\" " + html5VideoAttrs_1 + ">\n                " + html5VideoMarkup + "\n                Your browser does not support HTML5 video.\n            </video>";
+            }
+            return video;
+        };
+        /**
+         * @desc - Append videos to the slide
+         *
+         * @param {HTMLElement} el - slide element
+         * @param {Object} videoParams - Video parameters, Contains src, class, index, htmlVideo
+         */
+        Video.prototype.appendVideos = function (el, videoParams) {
+            var _a;
+            var videoHtml = this.getVideoHtml(videoParams.src, videoParams.addClass, videoParams.index, videoParams.html5Video);
+            el.find('.lg-video-cont').append(videoHtml);
+            var $videoElement = el.find('.lg-video-object').first();
+            if (videoParams.html5Video) {
+                $videoElement.on('mousedown.lg.video', function (e) {
+                    e.stopPropagation();
+                });
+            }
+            if (this.settings.videojs && ((_a = this.core.galleryItems[videoParams.index].__slideVideoInfo) === null || _a === void 0 ? void 0 : _a.html5)) {
+                try {
+                    return videojs($videoElement.get(), this.settings.videojsOptions);
+                }
+                catch (e) {
+                    console.error('lightGallery:- Make sure you have included videojs');
+                }
+            }
+        };
+        Video.prototype.gotoNextSlideOnVideoEnd = function (src, index) {
+            var _this = this;
+            var $videoElement = this.core
+                .getSlideItem(index)
+                .find('.lg-video-object')
+                .first();
+            var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
+            if (this.settings.gotoNextSlideOnVideoEnd) {
+                if (videoInfo.html5) {
+                    $videoElement.on('ended', function () {
+                        _this.core.goToNextSlide();
+                    });
+                }
+                else if (videoInfo.vimeo) {
+                    try {
+                        // https://github.com/vimeo/player.js/#ended
+                        new Vimeo.Player($videoElement.get()).on('ended', function () {
+                            _this.core.goToNextSlide();
+                        });
+                    }
+                    catch (e) {
+                        console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
+                    }
+                }
+                else if (videoInfo.wistia) {
+                    try {
+                        window._wq = window._wq || [];
+                        // @todo Event is gettign triggered multiple times
+                        window._wq.push({
+                            id: $videoElement.attr('id'),
+                            onReady: function (video) {
+                                video.bind('end', function () {
+                                    _this.core.goToNextSlide();
+                                });
+                            },
+                        });
+                    }
+                    catch (e) {
+                        console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
+                    }
+                }
+            }
+        };
+        Video.prototype.controlVideo = function (index, action) {
+            var $videoElement = this.core
+                .getSlideItem(index)
+                .find('.lg-video-object')
+                .first();
+            var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
+            if (!$videoElement.get())
+                return;
+            if (videoInfo.youtube) {
+                try {
+                    $videoElement.get().contentWindow.postMessage("{\"event\":\"command\",\"func\":\"" + action + "Video\",\"args\":\"\"}", '*');
+                }
+                catch (e) {
+                    console.error("lightGallery:- " + e);
+                }
+            }
+            else if (videoInfo.vimeo) {
+                try {
+                    new Vimeo.Player($videoElement.get())[action]();
+                }
+                catch (e) {
+                    console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js');
+                }
+            }
+            else if (videoInfo.html5) {
+                if (this.settings.videojs) {
+                    try {
+                        videojs($videoElement.get())[action]();
+                    }
+                    catch (e) {
+                        console.error('lightGallery:- Make sure you have included videojs');
+                    }
+                }
+                else {
+                    $videoElement.get()[action]();
+                }
+            }
+            else if (videoInfo.wistia) {
+                try {
+                    window._wq = window._wq || [];
+                    // @todo Find a way to destroy wistia player instance
+                    window._wq.push({
+                        id: $videoElement.attr('id'),
+                        onReady: function (video) {
+                            video[action]();
+                        },
+                    });
+                }
+                catch (e) {
+                    console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
+                }
+            }
+        };
+        Video.prototype.loadVideoOnPosterClick = function ($el, forcePlay) {
+            var _this = this;
+            // check slide has poster
+            if (!$el.hasClass('lg-video-loaded')) {
+                // check already video element present
+                if (!$el.hasClass('lg-has-video')) {
+                    $el.addClass('lg-has-video');
+                    var _html = void 0;
+                    var _src = this.core.galleryItems[this.core.index].src;
+                    var video = this.core.galleryItems[this.core.index].video;
+                    if (video) {
+                        _html =
+                            typeof video === 'string' ? JSON.parse(video) : video;
+                    }
+                    var videoJsPlayer_1 = this.appendVideos($el, {
+                        src: _src,
+                        addClass: '',
+                        index: this.core.index,
+                        html5Video: _html,
+                    });
+                    this.gotoNextSlideOnVideoEnd(_src, this.core.index);
+                    var $tempImg = $el.find('.lg-object').first().get();
+                    // @todo make sure it is working
+                    $el.find('.lg-video-cont').first().append($tempImg);
+                    $el.addClass('lg-video-loading');
+                    videoJsPlayer_1 &&
+                        videoJsPlayer_1.ready(function () {
+                            videoJsPlayer_1.on('loadedmetadata', function () {
+                                _this.onVideoLoadAfterPosterClick($el, _this.core.index);
+                            });
+                        });
+                    $el.find('.lg-video-object')
+                        .first()
+                        .on('load.lg error.lg loadedmetadata.lg', function () {
+                        setTimeout(function () {
+                            _this.onVideoLoadAfterPosterClick($el, _this.core.index);
+                        }, 50);
+                    });
+                }
+                else {
+                    this.playVideo(this.core.index);
+                }
+            }
+            else if (forcePlay) {
+                this.playVideo(this.core.index);
+            }
+        };
+        Video.prototype.onVideoLoadAfterPosterClick = function ($el, index) {
+            $el.addClass('lg-video-loaded');
+            this.playVideo(index);
+        };
+        Video.prototype.destroy = function () {
+            this.core.LGel.off('.lg.video');
+            this.core.LGel.off('.video');
+        };
+        return Video;
+    }());
+
+    return Video;
+
+})));
+//# sourceMappingURL=lg-video.umd.js.map

res/plugins/zoom/lg-zoom.es5.js

@@ -0,0 +1,966 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var zoomSettings = {
+    scale: 1,
+    zoom: true,
+    actualSize: true,
+    showZoomInOutIcons: false,
+    actualSizeIcons: {
+        zoomIn: 'lg-zoom-in',
+        zoomOut: 'lg-zoom-out',
+    },
+    enableZoomAfter: 300,
+    zoomPluginStrings: {
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        viewActualSize: 'View actual size',
+    },
+};
+
+/**
+ * List of lightGallery events
+ * All events should be documented here
+ * Below interfaces are used to build the website documentations
+ * */
+var lGEvents = {
+    afterAppendSlide: 'lgAfterAppendSlide',
+    init: 'lgInit',
+    hasVideo: 'lgHasVideo',
+    containerResize: 'lgContainerResize',
+    updateSlides: 'lgUpdateSlides',
+    afterAppendSubHtml: 'lgAfterAppendSubHtml',
+    beforeOpen: 'lgBeforeOpen',
+    afterOpen: 'lgAfterOpen',
+    slideItemLoad: 'lgSlideItemLoad',
+    beforeSlide: 'lgBeforeSlide',
+    afterSlide: 'lgAfterSlide',
+    posterClick: 'lgPosterClick',
+    dragStart: 'lgDragStart',
+    dragMove: 'lgDragMove',
+    dragEnd: 'lgDragEnd',
+    beforeNextSlide: 'lgBeforeNextSlide',
+    beforePrevSlide: 'lgBeforePrevSlide',
+    beforeClose: 'lgBeforeClose',
+    afterClose: 'lgAfterClose',
+    rotateLeft: 'lgRotateLeft',
+    rotateRight: 'lgRotateRight',
+    flipHorizontal: 'lgFlipHorizontal',
+    flipVertical: 'lgFlipVertical',
+    autoplay: 'lgAutoplay',
+    autoplayStart: 'lgAutoplayStart',
+    autoplayStop: 'lgAutoplayStop',
+};
+
+var Zoom = /** @class */ (function () {
+    function Zoom(instance, $LG) {
+        // get lightGallery core plugin instance
+        this.core = instance;
+        this.$LG = $LG;
+        this.settings = __assign(__assign({}, zoomSettings), this.core.settings);
+        return this;
+    }
+    // Append Zoom controls. Actual size, Zoom-in, Zoom-out
+    Zoom.prototype.buildTemplates = function () {
+        var zoomIcons = this.settings.showZoomInOutIcons
+            ? "<button id=\"" + this.core.getIdName('lg-zoom-in') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['zoomIn'] + "\" class=\"lg-zoom-in lg-icon\"></button><button id=\"" + this.core.getIdName('lg-zoom-out') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['zoomIn'] + "\" class=\"lg-zoom-out lg-icon\"></button>"
+            : '';
+        if (this.settings.actualSize) {
+            zoomIcons += "<button id=\"" + this.core.getIdName('lg-actual-size') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['viewActualSize'] + "\" class=\"" + this.settings.actualSizeIcons.zoomIn + " lg-icon\"></button>";
+        }
+        this.core.outer.addClass('lg-use-transition-for-zoom');
+        this.core.$toolbar.first().append(zoomIcons);
+    };
+    /**
+     * @desc Enable zoom option only once the image is completely loaded
+     * If zoomFromOrigin is true, Zoom is enabled once the dummy image has been inserted
+     *
+     * Zoom styles are defined under lg-zoomable CSS class.
+     */
+    Zoom.prototype.enableZoom = function (event) {
+        var _this = this;
+        // delay will be 0 except first time
+        var _speed = this.settings.enableZoomAfter + event.detail.delay;
+        // set _speed value 0 if gallery opened from direct url and if it is first slide
+        if (this.$LG('body').first().hasClass('lg-from-hash') &&
+            event.detail.delay) {
+            // will execute only once
+            _speed = 0;
+        }
+        else {
+            // Remove lg-from-hash to enable starting animation.
+            this.$LG('body').first().removeClass('lg-from-hash');
+        }
+        this.zoomableTimeout = setTimeout(function () {
+            if (!_this.isImageSlide()) {
+                return;
+            }
+            _this.core.getSlideItem(event.detail.index).addClass('lg-zoomable');
+            if (event.detail.index === _this.core.index) {
+                _this.setZoomEssentials();
+            }
+        }, _speed + 30);
+    };
+    Zoom.prototype.enableZoomOnSlideItemLoad = function () {
+        // Add zoomable class
+        this.core.LGel.on(lGEvents.slideItemLoad + ".zoom", this.enableZoom.bind(this));
+    };
+    Zoom.prototype.getModifier = function (rotateValue, axis, el) {
+        var originalRotate = rotateValue;
+        rotateValue = Math.abs(rotateValue);
+        var transformValues = this.getCurrentTransform(el);
+        if (!transformValues) {
+            return 1;
+        }
+        var modifier = 1;
+        if (axis === 'X') {
+            var flipHorizontalValue = Math.sign(parseFloat(transformValues[0]));
+            if (rotateValue === 0 || rotateValue === 180) {
+                modifier = 1;
+            }
+            else if (rotateValue === 90) {
+                if ((originalRotate === -90 && flipHorizontalValue === 1) ||
+                    (originalRotate === 90 && flipHorizontalValue === -1)) {
+                    modifier = -1;
+                }
+                else {
+                    modifier = 1;
+                }
+            }
+            modifier = modifier * flipHorizontalValue;
+        }
+        else {
+            var flipVerticalValue = Math.sign(parseFloat(transformValues[3]));
+            if (rotateValue === 0 || rotateValue === 180) {
+                modifier = 1;
+            }
+            else if (rotateValue === 90) {
+                var sinX = parseFloat(transformValues[1]);
+                var sinMinusX = parseFloat(transformValues[2]);
+                modifier = Math.sign(sinX * sinMinusX * originalRotate * flipVerticalValue);
+            }
+            modifier = modifier * flipVerticalValue;
+        }
+        return modifier;
+    };
+    Zoom.prototype.getImageSize = function ($image, rotateValue, axis) {
+        var imageSizes = {
+            y: 'offsetHeight',
+            x: 'offsetWidth',
+        };
+        if (Math.abs(rotateValue) === 90) {
+            // Swap axis
+            if (axis === 'x') {
+                axis = 'y';
+            }
+            else {
+                axis = 'x';
+            }
+        }
+        return $image[imageSizes[axis]];
+    };
+    Zoom.prototype.getDragCords = function (e, rotateValue) {
+        if (rotateValue === 90) {
+            return {
+                x: e.pageY,
+                y: e.pageX,
+            };
+        }
+        else {
+            return {
+                x: e.pageX,
+                y: e.pageY,
+            };
+        }
+    };
+    Zoom.prototype.getSwipeCords = function (e, rotateValue) {
+        var x = e.targetTouches[0].pageX;
+        var y = e.targetTouches[0].pageY;
+        if (rotateValue === 90) {
+            return {
+                x: y,
+                y: x,
+            };
+        }
+        else {
+            return {
+                x: x,
+                y: y,
+            };
+        }
+    };
+    Zoom.prototype.getDragAllowedAxises = function (rotateValue, scale) {
+        scale = scale || this.scale || 1;
+        var allowY = this.imageYSize * scale > this.containerRect.height;
+        var allowX = this.imageXSize * scale > this.containerRect.width;
+        if (rotateValue === 90) {
+            return {
+                allowX: allowY,
+                allowY: allowX,
+            };
+        }
+        else {
+            return {
+                allowX: allowX,
+                allowY: allowY,
+            };
+        }
+    };
+    /**
+     *
+     * @param {Element} el
+     * @return matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);
+     * Get the current transform value
+     */
+    Zoom.prototype.getCurrentTransform = function (el) {
+        if (!el) {
+            return;
+        }
+        var st = window.getComputedStyle(el, null);
+        var tm = st.getPropertyValue('-webkit-transform') ||
+            st.getPropertyValue('-moz-transform') ||
+            st.getPropertyValue('-ms-transform') ||
+            st.getPropertyValue('-o-transform') ||
+            st.getPropertyValue('transform') ||
+            'none';
+        if (tm !== 'none') {
+            return tm.split('(')[1].split(')')[0].split(',');
+        }
+        return;
+    };
+    Zoom.prototype.getCurrentRotation = function (el) {
+        if (!el) {
+            return 0;
+        }
+        var values = this.getCurrentTransform(el);
+        if (values) {
+            return Math.round(Math.atan2(parseFloat(values[1]), parseFloat(values[0])) *
+                (180 / Math.PI));
+            // If you want rotate in 360
+            //return (angle < 0 ? angle + 360 : angle);
+        }
+        return 0;
+    };
+    Zoom.prototype.setZoomEssentials = function () {
+        var $image = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-image')
+            .first();
+        var rotateEl = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-img-rotate')
+            .first()
+            .get();
+        this.rotateValue = this.getCurrentRotation(rotateEl);
+        this.imageYSize = this.getImageSize($image.get(), this.rotateValue, 'y');
+        this.imageXSize = this.getImageSize($image.get(), this.rotateValue, 'x');
+        this.containerRect = this.core.outer.get().getBoundingClientRect();
+        this.modifierX = this.getModifier(this.rotateValue, 'X', rotateEl);
+        this.modifierY = this.getModifier(this.rotateValue, 'Y', rotateEl);
+    };
+    /**
+     * @desc Image zoom
+     * Translate the wrap and scale the image to get better user experience
+     *
+     * @param {String} scale - Zoom decrement/increment value
+     */
+    Zoom.prototype.zoomImage = function (scale) {
+        // Find offset manually to avoid issue after zoom
+        var offsetX = (this.containerRect.width - this.imageXSize) / 2 +
+            this.containerRect.left;
+        var _a = this.core.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
+        var topBottomSpacing = Math.abs(top - bottom) / 2;
+        var offsetY = (this.containerRect.height -
+            this.imageYSize -
+            topBottomSpacing * this.modifierX) /
+            2 +
+            this.scrollTop +
+            this.containerRect.top;
+        var originalX;
+        var originalY;
+        if (scale === 1) {
+            this.positionChanged = false;
+        }
+        var dragAllowedAxises = this.getDragAllowedAxises(Math.abs(this.rotateValue), scale);
+        var allowY = dragAllowedAxises.allowY, allowX = dragAllowedAxises.allowX;
+        if (this.positionChanged) {
+            originalX = this.left / (this.scale - 1);
+            originalY = this.top / (this.scale - 1);
+            this.pageX = Math.abs(originalX) + offsetX;
+            this.pageY = Math.abs(originalY) + offsetY;
+            this.positionChanged = false;
+        }
+        var possibleSwipeCords = this.getPossibleSwipeDragCords(this.rotateValue, scale);
+        var _x = offsetX - this.pageX;
+        var _y = offsetY - this.pageY;
+        var x = (scale - 1) * _x;
+        var y = (scale - 1) * _y;
+        if (allowX) {
+            if (this.isBeyondPossibleLeft(x, possibleSwipeCords.minX)) {
+                x = possibleSwipeCords.minX;
+            }
+            else if (this.isBeyondPossibleRight(x, possibleSwipeCords.maxX)) {
+                x = possibleSwipeCords.maxX;
+            }
+        }
+        else {
+            if (scale > 1) {
+                if (x < possibleSwipeCords.minX) {
+                    x = possibleSwipeCords.minX;
+                }
+                else if (x > possibleSwipeCords.maxX) {
+                    x = possibleSwipeCords.maxX;
+                }
+            }
+        }
+        if (allowY) {
+            if (this.isBeyondPossibleTop(y, possibleSwipeCords.minY)) {
+                y = possibleSwipeCords.minY;
+            }
+            else if (this.isBeyondPossibleBottom(y, possibleSwipeCords.maxY)) {
+                y = possibleSwipeCords.maxY;
+            }
+        }
+        else {
+            // If the translate value based on index of beyond the viewport, utilize the available space to prevent image being cut out
+            if (scale > 1) {
+                //If image goes beyond viewport top, use the minim possible translate value
+                if (y < possibleSwipeCords.minY) {
+                    y = possibleSwipeCords.minY;
+                }
+                else if (y > possibleSwipeCords.maxY) {
+                    y = possibleSwipeCords.maxY;
+                }
+            }
+        }
+        this.setZoomStyles({
+            x: x,
+            y: y,
+            scale: scale,
+        });
+    };
+    /**
+     * @desc apply scale3d to image and translate to image wrap
+     * @param {style} X,Y and scale
+     */
+    Zoom.prototype.setZoomStyles = function (style) {
+        var $image = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-image')
+            .first();
+        var $dummyImage = this.core.outer
+            .find('.lg-current .lg-dummy-img')
+            .first();
+        var $imageWrap = $image.parent();
+        this.scale = style.scale;
+        $image.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)');
+        $dummyImage.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)');
+        var transform = 'translate3d(' + style.x + 'px, ' + style.y + 'px, 0)';
+        $imageWrap.css('transform', transform);
+        this.left = style.x;
+        this.top = style.y;
+    };
+    /**
+     * @param index - Index of the current slide
+     * @param event - event will be available only if the function is called on clicking/taping the imags
+     */
+    Zoom.prototype.setActualSize = function (index, event) {
+        var _this = this;
+        // Allow zoom only on image
+        if (!this.isImageSlide() ||
+            this.core.outer.hasClass('lg-first-slide-loading')) {
+            return;
+        }
+        var scale = this.getCurrentImageActualSizeScale();
+        if (this.core.outer.hasClass('lg-zoomed')) {
+            this.scale = 1;
+        }
+        else {
+            this.scale = this.getScale(scale);
+        }
+        this.setPageCords(event);
+        this.beginZoom(this.scale);
+        this.zoomImage(this.scale);
+        setTimeout(function () {
+            _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab');
+        }, 10);
+    };
+    Zoom.prototype.getNaturalWidth = function (index) {
+        var $image = this.core.getSlideItem(index).find('.lg-image').first();
+        var naturalWidth = this.core.galleryItems[index].width;
+        return naturalWidth
+            ? parseFloat(naturalWidth)
+            : $image.get().naturalWidth;
+    };
+    Zoom.prototype.getActualSizeScale = function (naturalWidth, width) {
+        var _scale;
+        var scale;
+        if (naturalWidth > width) {
+            _scale = naturalWidth / width;
+            scale = _scale || 2;
+        }
+        else {
+            scale = 1;
+        }
+        return scale;
+    };
+    Zoom.prototype.getCurrentImageActualSizeScale = function () {
+        var $image = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-image')
+            .first();
+        var width = $image.get().offsetWidth;
+        var naturalWidth = this.getNaturalWidth(this.core.index) || width;
+        return this.getActualSizeScale(naturalWidth, width);
+    };
+    Zoom.prototype.getPageCords = function (event) {
+        var cords = {};
+        if (event) {
+            cords.x = event.pageX || event.targetTouches[0].pageX;
+            cords.y = event.pageY || event.targetTouches[0].pageY;
+        }
+        else {
+            var containerRect = this.core.outer.get().getBoundingClientRect();
+            cords.x = containerRect.width / 2 + containerRect.left;
+            cords.y =
+                containerRect.height / 2 + this.scrollTop + containerRect.top;
+        }
+        return cords;
+    };
+    Zoom.prototype.setPageCords = function (event) {
+        var pageCords = this.getPageCords(event);
+        this.pageX = pageCords.x;
+        this.pageY = pageCords.y;
+    };
+    // If true, zoomed - in else zoomed out
+    Zoom.prototype.beginZoom = function (scale) {
+        this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging');
+        if (scale > 1) {
+            this.core.outer.addClass('lg-zoomed');
+            var $actualSize = this.core.getElementById('lg-actual-size');
+            $actualSize
+                .removeClass(this.settings.actualSizeIcons.zoomIn)
+                .addClass(this.settings.actualSizeIcons.zoomOut);
+        }
+        else {
+            this.resetZoom();
+        }
+        return scale > 1;
+    };
+    Zoom.prototype.getScale = function (scale) {
+        var actualSizeScale = this.getCurrentImageActualSizeScale();
+        if (scale < 1) {
+            scale = 1;
+        }
+        else if (scale > actualSizeScale) {
+            scale = actualSizeScale;
+        }
+        return scale;
+    };
+    Zoom.prototype.init = function () {
+        var _this = this;
+        if (!this.settings.zoom) {
+            return;
+        }
+        this.buildTemplates();
+        this.enableZoomOnSlideItemLoad();
+        var tapped = null;
+        this.core.outer.on('dblclick.lg', function (event) {
+            if (!_this.$LG(event.target).hasClass('lg-image')) {
+                return;
+            }
+            _this.setActualSize(_this.core.index, event);
+        });
+        this.core.outer.on('touchstart.lg', function (event) {
+            var $target = _this.$LG(event.target);
+            if (event.targetTouches.length === 1 &&
+                $target.hasClass('lg-image')) {
+                if (!tapped) {
+                    tapped = setTimeout(function () {
+                        tapped = null;
+                    }, 300);
+                }
+                else {
+                    clearTimeout(tapped);
+                    tapped = null;
+                    event.preventDefault();
+                    _this.setActualSize(_this.core.index, event);
+                }
+            }
+        });
+        // Update zoom on resize and orientationchange
+        this.core.LGel.on(lGEvents.containerResize + ".zoom " + lGEvents.rotateRight + ".zoom " + lGEvents.rotateLeft + ".zoom " + lGEvents.flipHorizontal + ".zoom " + lGEvents.flipVertical + ".zoom", function () {
+            if (!_this.core.lgOpened || !_this.isImageSlide())
+                return;
+            _this.setPageCords();
+            _this.setZoomEssentials();
+            _this.zoomImage(_this.scale);
+        });
+        // Update zoom on resize and orientationchange
+        this.$LG(window).on("scroll.lg.zoom.global" + this.core.lgId, function () {
+            if (!_this.core.lgOpened)
+                return;
+            _this.scrollTop = _this.$LG(window).scrollTop();
+        });
+        this.core.getElementById('lg-zoom-out').on('click.lg', function () {
+            if (_this.core.outer.find('.lg-current .lg-image').get()) {
+                _this.scale -= _this.settings.scale;
+                _this.scale = _this.getScale(_this.scale);
+                _this.beginZoom(_this.scale);
+                _this.zoomImage(_this.scale);
+            }
+        });
+        this.core.getElementById('lg-zoom-in').on('click.lg', function () {
+            _this.zoomIn();
+        });
+        this.core.getElementById('lg-actual-size').on('click.lg', function () {
+            _this.setActualSize(_this.core.index);
+        });
+        this.core.LGel.on(lGEvents.beforeOpen + ".zoom", function () {
+            _this.core.outer.find('.lg-item').removeClass('lg-zoomable');
+        });
+        this.core.LGel.on(lGEvents.afterOpen + ".zoom", function () {
+            _this.scrollTop = _this.$LG(window).scrollTop();
+            // Set the initial value center
+            _this.pageX = _this.core.outer.width() / 2;
+            _this.pageY = _this.core.outer.height() / 2 + _this.scrollTop;
+            _this.scale = 1;
+        });
+        // Reset zoom on slide change
+        this.core.LGel.on(lGEvents.afterSlide + ".zoom", function (event) {
+            var prevIndex = event.detail.prevIndex;
+            _this.scale = 1;
+            _this.positionChanged = false;
+            _this.resetZoom(prevIndex);
+            if (_this.isImageSlide()) {
+                _this.setZoomEssentials();
+            }
+        });
+        // Drag option after zoom
+        this.zoomDrag();
+        this.pinchZoom();
+        this.zoomSwipe();
+        // Store the zoomable timeout value just to clear it while closing
+        this.zoomableTimeout = false;
+        this.positionChanged = false;
+    };
+    Zoom.prototype.zoomIn = function (scale) {
+        // Allow zoom only on image
+        if (!this.isImageSlide()) {
+            return;
+        }
+        if (scale) {
+            this.scale = scale;
+        }
+        else {
+            this.scale += this.settings.scale;
+        }
+        this.scale = this.getScale(this.scale);
+        this.beginZoom(this.scale);
+        this.zoomImage(this.scale);
+    };
+    // Reset zoom effect
+    Zoom.prototype.resetZoom = function (index) {
+        this.core.outer.removeClass('lg-zoomed lg-zoom-drag-transition');
+        var $actualSize = this.core.getElementById('lg-actual-size');
+        var $item = this.core.getSlideItem(index !== undefined ? index : this.core.index);
+        $actualSize
+            .removeClass(this.settings.actualSizeIcons.zoomOut)
+            .addClass(this.settings.actualSizeIcons.zoomIn);
+        $item.find('.lg-img-wrap').first().removeAttr('style');
+        $item.find('.lg-image').first().removeAttr('style');
+        this.scale = 1;
+        this.left = 0;
+        this.top = 0;
+        // Reset pagx pagy values to center
+        this.setPageCords();
+    };
+    Zoom.prototype.getTouchDistance = function (e) {
+        return Math.sqrt((e.targetTouches[0].pageX - e.targetTouches[1].pageX) *
+            (e.targetTouches[0].pageX - e.targetTouches[1].pageX) +
+            (e.targetTouches[0].pageY - e.targetTouches[1].pageY) *
+                (e.targetTouches[0].pageY - e.targetTouches[1].pageY));
+    };
+    Zoom.prototype.pinchZoom = function () {
+        var _this = this;
+        var startDist = 0;
+        var pinchStarted = false;
+        var initScale = 1;
+        var $item = this.core.getSlideItem(this.core.index);
+        this.core.$inner.on('touchstart.lg', function (e) {
+            $item = _this.core.getSlideItem(_this.core.index);
+            if (!_this.isImageSlide()) {
+                return;
+            }
+            if (e.targetTouches.length === 2 &&
+                !_this.core.outer.hasClass('lg-first-slide-loading') &&
+                (_this.$LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target))) {
+                initScale = _this.scale || 1;
+                _this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging');
+                _this.core.touchAction = 'pinch';
+                startDist = _this.getTouchDistance(e);
+            }
+        });
+        this.core.$inner.on('touchmove.lg', function (e) {
+            if (e.targetTouches.length === 2 &&
+                _this.core.touchAction === 'pinch' &&
+                (_this.$LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target))) {
+                e.preventDefault();
+                var endDist = _this.getTouchDistance(e);
+                var distance = startDist - endDist;
+                if (!pinchStarted && Math.abs(distance) > 5) {
+                    pinchStarted = true;
+                }
+                if (pinchStarted) {
+                    _this.scale = Math.max(1, initScale + -distance * 0.008);
+                    _this.zoomImage(_this.scale);
+                }
+            }
+        });
+        this.core.$inner.on('touchend.lg', function (e) {
+            if (_this.core.touchAction === 'pinch' &&
+                (_this.$LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target))) {
+                pinchStarted = false;
+                startDist = 0;
+                if (_this.scale <= 1) {
+                    _this.resetZoom();
+                }
+                else {
+                    _this.scale = _this.getScale(_this.scale);
+                    _this.zoomImage(_this.scale);
+                    _this.core.outer.addClass('lg-zoomed');
+                }
+                _this.core.touchAction = undefined;
+            }
+        });
+    };
+    Zoom.prototype.touchendZoom = function (startCoords, endCoords, allowX, allowY, touchDuration, rotateValue) {
+        var distanceXnew = endCoords.x - startCoords.x;
+        var distanceYnew = endCoords.y - startCoords.y;
+        var speedX = Math.abs(distanceXnew) / touchDuration + 1;
+        var speedY = Math.abs(distanceYnew) / touchDuration + 1;
+        if (speedX > 2) {
+            speedX += 1;
+        }
+        if (speedY > 2) {
+            speedY += 1;
+        }
+        distanceXnew = distanceXnew * speedX;
+        distanceYnew = distanceYnew * speedY;
+        var _LGel = this.core
+            .getSlideItem(this.core.index)
+            .find('.lg-img-wrap')
+            .first();
+        var distance = {};
+        distance.x = this.left + distanceXnew * this.modifierX;
+        distance.y = this.top + distanceYnew * this.modifierY;
+        var possibleSwipeCords = this.getPossibleSwipeDragCords(rotateValue);
+        if (Math.abs(distanceXnew) > 15 || Math.abs(distanceYnew) > 15) {
+            if (allowY) {
+                if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) {
+                    distance.y = possibleSwipeCords.minY;
+                }
+                else if (this.isBeyondPossibleBottom(distance.y, possibleSwipeCords.maxY)) {
+                    distance.y = possibleSwipeCords.maxY;
+                }
+            }
+            if (allowX) {
+                if (this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)) {
+                    distance.x = possibleSwipeCords.minX;
+                }
+                else if (this.isBeyondPossibleRight(distance.x, possibleSwipeCords.maxX)) {
+                    distance.x = possibleSwipeCords.maxX;
+                }
+            }
+            if (allowY) {
+                this.top = distance.y;
+            }
+            else {
+                distance.y = this.top;
+            }
+            if (allowX) {
+                this.left = distance.x;
+            }
+            else {
+                distance.x = this.left;
+            }
+            this.setZoomSwipeStyles(_LGel, distance);
+            this.positionChanged = true;
+        }
+    };
+    Zoom.prototype.getZoomSwipeCords = function (startCoords, endCoords, allowX, allowY, possibleSwipeCords) {
+        var distance = {};
+        if (allowY) {
+            distance.y =
+                this.top + (endCoords.y - startCoords.y) * this.modifierY;
+            if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) {
+                var diffMinY = possibleSwipeCords.minY - distance.y;
+                distance.y = possibleSwipeCords.minY - diffMinY / 6;
+            }
+            else if (this.isBeyondPossibleBottom(distance.y, possibleSwipeCords.maxY)) {
+                var diffMaxY = distance.y - possibleSwipeCords.maxY;
+                distance.y = possibleSwipeCords.maxY + diffMaxY / 6;
+            }
+        }
+        else {
+            distance.y = this.top;
+        }
+        if (allowX) {
+            distance.x =
+                this.left + (endCoords.x - startCoords.x) * this.modifierX;
+            if (this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)) {
+                var diffMinX = possibleSwipeCords.minX - distance.x;
+                distance.x = possibleSwipeCords.minX - diffMinX / 6;
+            }
+            else if (this.isBeyondPossibleRight(distance.x, possibleSwipeCords.maxX)) {
+                var difMaxX = distance.x - possibleSwipeCords.maxX;
+                distance.x = possibleSwipeCords.maxX + difMaxX / 6;
+            }
+        }
+        else {
+            distance.x = this.left;
+        }
+        return distance;
+    };
+    Zoom.prototype.isBeyondPossibleLeft = function (x, minX) {
+        return x >= minX;
+    };
+    Zoom.prototype.isBeyondPossibleRight = function (x, maxX) {
+        return x <= maxX;
+    };
+    Zoom.prototype.isBeyondPossibleTop = function (y, minY) {
+        return y >= minY;
+    };
+    Zoom.prototype.isBeyondPossibleBottom = function (y, maxY) {
+        return y <= maxY;
+    };
+    Zoom.prototype.isImageSlide = function () {
+        var currentItem = this.core.galleryItems[this.core.index];
+        return this.core.getSlideType(currentItem) === 'image';
+    };
+    Zoom.prototype.getPossibleSwipeDragCords = function (rotateValue, scale) {
+        var dataScale = scale || this.scale || 1;
+        var elDataScale = Math.abs(dataScale);
+        var _a = this.core.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
+        var topBottomSpacing = Math.abs(top - bottom) / 2;
+        var minY = (this.imageYSize - this.containerRect.height) / 2 +
+            topBottomSpacing * this.modifierX;
+        var maxY = this.containerRect.height - this.imageYSize * elDataScale + minY;
+        var minX = (this.imageXSize - this.containerRect.width) / 2;
+        var maxX = this.containerRect.width - this.imageXSize * elDataScale + minX;
+        var possibleSwipeCords = {
+            minY: minY,
+            maxY: maxY,
+            minX: minX,
+            maxX: maxX,
+        };
+        if (Math.abs(rotateValue) === 90) {
+            possibleSwipeCords = {
+                minY: minX,
+                maxY: maxX,
+                minX: minY,
+                maxX: maxY,
+            };
+        }
+        return possibleSwipeCords;
+    };
+    Zoom.prototype.setZoomSwipeStyles = function (LGel, distance) {
+        LGel.css('transform', 'translate3d(' + distance.x + 'px, ' + distance.y + 'px, 0)');
+    };
+    Zoom.prototype.zoomSwipe = function () {
+        var _this = this;
+        var startCoords = {};
+        var endCoords = {};
+        var isMoved = false;
+        // Allow x direction drag
+        var allowX = false;
+        // Allow Y direction drag
+        var allowY = false;
+        var startTime = new Date();
+        var endTime = new Date();
+        var possibleSwipeCords;
+        var _LGel;
+        var $item = this.core.getSlideItem(this.core.index);
+        this.core.$inner.on('touchstart.lg', function (e) {
+            // Allow zoom only on image
+            if (!_this.isImageSlide()) {
+                return;
+            }
+            $item = _this.core.getSlideItem(_this.core.index);
+            if ((_this.$LG(e.target).hasClass('lg-item') ||
+                $item.get().contains(e.target)) &&
+                e.targetTouches.length === 1 &&
+                _this.core.outer.hasClass('lg-zoomed')) {
+                e.preventDefault();
+                startTime = new Date();
+                _this.core.touchAction = 'zoomSwipe';
+                _LGel = _this.core
+                    .getSlideItem(_this.core.index)
+                    .find('.lg-img-wrap')
+                    .first();
+                var dragAllowedAxises = _this.getDragAllowedAxises(Math.abs(_this.rotateValue));
+                allowY = dragAllowedAxises.allowY;
+                allowX = dragAllowedAxises.allowX;
+                if (allowX || allowY) {
+                    startCoords = _this.getSwipeCords(e, Math.abs(_this.rotateValue));
+                }
+                possibleSwipeCords = _this.getPossibleSwipeDragCords(_this.rotateValue);
+                // reset opacity and transition duration
+                _this.core.outer.addClass('lg-zoom-dragging lg-zoom-drag-transition');
+            }
+        });
+        this.core.$inner.on('touchmove.lg', function (e) {
+            if (e.targetTouches.length === 1 &&
+                _this.core.touchAction === 'zoomSwipe' &&
+                (_this.$LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target))) {
+                e.preventDefault();
+                _this.core.touchAction = 'zoomSwipe';
+                endCoords = _this.getSwipeCords(e, Math.abs(_this.rotateValue));
+                var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords);
+                if (Math.abs(endCoords.x - startCoords.x) > 15 ||
+                    Math.abs(endCoords.y - startCoords.y) > 15) {
+                    isMoved = true;
+                    _this.setZoomSwipeStyles(_LGel, distance);
+                }
+            }
+        });
+        this.core.$inner.on('touchend.lg', function (e) {
+            if (_this.core.touchAction === 'zoomSwipe' &&
+                (_this.$LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target))) {
+                _this.core.touchAction = undefined;
+                _this.core.outer.removeClass('lg-zoom-dragging');
+                if (!isMoved) {
+                    return;
+                }
+                isMoved = false;
+                endTime = new Date();
+                var touchDuration = endTime.valueOf() - startTime.valueOf();
+                _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration, _this.rotateValue);
+            }
+        });
+    };
+    Zoom.prototype.zoomDrag = function () {
+        var _this = this;
+        var startCoords = {};
+        var endCoords = {};
+        var isDragging = false;
+        var isMoved = false;
+        // Allow x direction drag
+        var allowX = false;
+        // Allow Y direction drag
+        var allowY = false;
+        var startTime;
+        var endTime;
+        var possibleSwipeCords;
+        var _LGel;
+        this.core.outer.on('mousedown.lg.zoom', function (e) {
+            // Allow zoom only on image
+            if (!_this.isImageSlide()) {
+                return;
+            }
+            var $item = _this.core.getSlideItem(_this.core.index);
+            if (_this.$LG(e.target).hasClass('lg-item') ||
+                $item.get().contains(e.target)) {
+                startTime = new Date();
+                _LGel = _this.core
+                    .getSlideItem(_this.core.index)
+                    .find('.lg-img-wrap')
+                    .first();
+                var dragAllowedAxises = _this.getDragAllowedAxises(Math.abs(_this.rotateValue));
+                allowY = dragAllowedAxises.allowY;
+                allowX = dragAllowedAxises.allowX;
+                if (_this.core.outer.hasClass('lg-zoomed')) {
+                    if (_this.$LG(e.target).hasClass('lg-object') &&
+                        (allowX || allowY)) {
+                        e.preventDefault();
+                        startCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                        possibleSwipeCords = _this.getPossibleSwipeDragCords(_this.rotateValue);
+                        isDragging = true;
+                        // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+                        _this.core.outer.get().scrollLeft += 1;
+                        _this.core.outer.get().scrollLeft -= 1;
+                        _this.core.outer
+                            .removeClass('lg-grab')
+                            .addClass('lg-grabbing lg-zoom-drag-transition lg-zoom-dragging');
+                        // reset opacity and transition duration
+                    }
+                }
+            }
+        });
+        this.$LG(window).on("mousemove.lg.zoom.global" + this.core.lgId, function (e) {
+            if (isDragging) {
+                isMoved = true;
+                endCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords);
+                _this.setZoomSwipeStyles(_LGel, distance);
+            }
+        });
+        this.$LG(window).on("mouseup.lg.zoom.global" + this.core.lgId, function (e) {
+            if (isDragging) {
+                endTime = new Date();
+                isDragging = false;
+                _this.core.outer.removeClass('lg-zoom-dragging');
+                // Fix for chrome mouse move on click
+                if (isMoved &&
+                    (startCoords.x !== endCoords.x ||
+                        startCoords.y !== endCoords.y)) {
+                    endCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                    var touchDuration = endTime.valueOf() - startTime.valueOf();
+                    _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration, _this.rotateValue);
+                }
+                isMoved = false;
+            }
+            _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab');
+        });
+    };
+    Zoom.prototype.closeGallery = function () {
+        this.resetZoom();
+    };
+    Zoom.prototype.destroy = function () {
+        // Unbind all events added by lightGallery zoom plugin
+        this.$LG(window).off(".lg.zoom.global" + this.core.lgId);
+        this.core.LGel.off('.lg.zoom');
+        this.core.LGel.off('.zoom');
+        clearTimeout(this.zoomableTimeout);
+        this.zoomableTimeout = false;
+    };
+    return Zoom;
+}());
+
+export default Zoom;
+//# sourceMappingURL=lg-zoom.es5.js.map

res/plugins/zoom/lg-zoom.umd.js

@@ -0,0 +1,974 @@
+/*!
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
+ * http://www.lightgalleryjs.com/
+ * Copyright (c) 2020 Sachin Neravath;
+ * @license GPLv3
+ */
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgZoom = factory());
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    var zoomSettings = {
+        scale: 1,
+        zoom: true,
+        actualSize: true,
+        showZoomInOutIcons: false,
+        actualSizeIcons: {
+            zoomIn: 'lg-zoom-in',
+            zoomOut: 'lg-zoom-out',
+        },
+        enableZoomAfter: 300,
+        zoomPluginStrings: {
+            zoomIn: 'Zoom in',
+            zoomOut: 'Zoom out',
+            viewActualSize: 'View actual size',
+        },
+    };
+
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var Zoom = /** @class */ (function () {
+        function Zoom(instance, $LG) {
+            // get lightGallery core plugin instance
+            this.core = instance;
+            this.$LG = $LG;
+            this.settings = __assign(__assign({}, zoomSettings), this.core.settings);
+            return this;
+        }
+        // Append Zoom controls. Actual size, Zoom-in, Zoom-out
+        Zoom.prototype.buildTemplates = function () {
+            var zoomIcons = this.settings.showZoomInOutIcons
+                ? "<button id=\"" + this.core.getIdName('lg-zoom-in') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['zoomIn'] + "\" class=\"lg-zoom-in lg-icon\"></button><button id=\"" + this.core.getIdName('lg-zoom-out') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['zoomIn'] + "\" class=\"lg-zoom-out lg-icon\"></button>"
+                : '';
+            if (this.settings.actualSize) {
+                zoomIcons += "<button id=\"" + this.core.getIdName('lg-actual-size') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['viewActualSize'] + "\" class=\"" + this.settings.actualSizeIcons.zoomIn + " lg-icon\"></button>";
+            }
+            this.core.outer.addClass('lg-use-transition-for-zoom');
+            this.core.$toolbar.first().append(zoomIcons);
+        };
+        /**
+         * @desc Enable zoom option only once the image is completely loaded
+         * If zoomFromOrigin is true, Zoom is enabled once the dummy image has been inserted
+         *
+         * Zoom styles are defined under lg-zoomable CSS class.
+         */
+        Zoom.prototype.enableZoom = function (event) {
+            var _this = this;
+            // delay will be 0 except first time
+            var _speed = this.settings.enableZoomAfter + event.detail.delay;
+            // set _speed value 0 if gallery opened from direct url and if it is first slide
+            if (this.$LG('body').first().hasClass('lg-from-hash') &&
+                event.detail.delay) {
+                // will execute only once
+                _speed = 0;
+            }
+            else {
+                // Remove lg-from-hash to enable starting animation.
+                this.$LG('body').first().removeClass('lg-from-hash');
+            }
+            this.zoomableTimeout = setTimeout(function () {
+                if (!_this.isImageSlide()) {
+                    return;
+                }
+                _this.core.getSlideItem(event.detail.index).addClass('lg-zoomable');
+                if (event.detail.index === _this.core.index) {
+                    _this.setZoomEssentials();
+                }
+            }, _speed + 30);
+        };
+        Zoom.prototype.enableZoomOnSlideItemLoad = function () {
+            // Add zoomable class
+            this.core.LGel.on(lGEvents.slideItemLoad + ".zoom", this.enableZoom.bind(this));
+        };
+        Zoom.prototype.getModifier = function (rotateValue, axis, el) {
+            var originalRotate = rotateValue;
+            rotateValue = Math.abs(rotateValue);
+            var transformValues = this.getCurrentTransform(el);
+            if (!transformValues) {
+                return 1;
+            }
+            var modifier = 1;
+            if (axis === 'X') {
+                var flipHorizontalValue = Math.sign(parseFloat(transformValues[0]));
+                if (rotateValue === 0 || rotateValue === 180) {
+                    modifier = 1;
+                }
+                else if (rotateValue === 90) {
+                    if ((originalRotate === -90 && flipHorizontalValue === 1) ||
+                        (originalRotate === 90 && flipHorizontalValue === -1)) {
+                        modifier = -1;
+                    }
+                    else {
+                        modifier = 1;
+                    }
+                }
+                modifier = modifier * flipHorizontalValue;
+            }
+            else {
+                var flipVerticalValue = Math.sign(parseFloat(transformValues[3]));
+                if (rotateValue === 0 || rotateValue === 180) {
+                    modifier = 1;
+                }
+                else if (rotateValue === 90) {
+                    var sinX = parseFloat(transformValues[1]);
+                    var sinMinusX = parseFloat(transformValues[2]);
+                    modifier = Math.sign(sinX * sinMinusX * originalRotate * flipVerticalValue);
+                }
+                modifier = modifier * flipVerticalValue;
+            }
+            return modifier;
+        };
+        Zoom.prototype.getImageSize = function ($image, rotateValue, axis) {
+            var imageSizes = {
+                y: 'offsetHeight',
+                x: 'offsetWidth',
+            };
+            if (Math.abs(rotateValue) === 90) {
+                // Swap axis
+                if (axis === 'x') {
+                    axis = 'y';
+                }
+                else {
+                    axis = 'x';
+                }
+            }
+            return $image[imageSizes[axis]];
+        };
+        Zoom.prototype.getDragCords = function (e, rotateValue) {
+            if (rotateValue === 90) {
+                return {
+                    x: e.pageY,
+                    y: e.pageX,
+                };
+            }
+            else {
+                return {
+                    x: e.pageX,
+                    y: e.pageY,
+                };
+            }
+        };
+        Zoom.prototype.getSwipeCords = function (e, rotateValue) {
+            var x = e.targetTouches[0].pageX;
+            var y = e.targetTouches[0].pageY;
+            if (rotateValue === 90) {
+                return {
+                    x: y,
+                    y: x,
+                };
+            }
+            else {
+                return {
+                    x: x,
+                    y: y,
+                };
+            }
+        };
+        Zoom.prototype.getDragAllowedAxises = function (rotateValue, scale) {
+            scale = scale || this.scale || 1;
+            var allowY = this.imageYSize * scale > this.containerRect.height;
+            var allowX = this.imageXSize * scale > this.containerRect.width;
+            if (rotateValue === 90) {
+                return {
+                    allowX: allowY,
+                    allowY: allowX,
+                };
+            }
+            else {
+                return {
+                    allowX: allowX,
+                    allowY: allowY,
+                };
+            }
+        };
+        /**
+         *
+         * @param {Element} el
+         * @return matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0);
+         * Get the current transform value
+         */
+        Zoom.prototype.getCurrentTransform = function (el) {
+            if (!el) {
+                return;
+            }
+            var st = window.getComputedStyle(el, null);
+            var tm = st.getPropertyValue('-webkit-transform') ||
+                st.getPropertyValue('-moz-transform') ||
+                st.getPropertyValue('-ms-transform') ||
+                st.getPropertyValue('-o-transform') ||
+                st.getPropertyValue('transform') ||
+                'none';
+            if (tm !== 'none') {
+                return tm.split('(')[1].split(')')[0].split(',');
+            }
+            return;
+        };
+        Zoom.prototype.getCurrentRotation = function (el) {
+            if (!el) {
+                return 0;
+            }
+            var values = this.getCurrentTransform(el);
+            if (values) {
+                return Math.round(Math.atan2(parseFloat(values[1]), parseFloat(values[0])) *
+                    (180 / Math.PI));
+                // If you want rotate in 360
+                //return (angle < 0 ? angle + 360 : angle);
+            }
+            return 0;
+        };
+        Zoom.prototype.setZoomEssentials = function () {
+            var $image = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-image')
+                .first();
+            var rotateEl = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-img-rotate')
+                .first()
+                .get();
+            this.rotateValue = this.getCurrentRotation(rotateEl);
+            this.imageYSize = this.getImageSize($image.get(), this.rotateValue, 'y');
+            this.imageXSize = this.getImageSize($image.get(), this.rotateValue, 'x');
+            this.containerRect = this.core.outer.get().getBoundingClientRect();
+            this.modifierX = this.getModifier(this.rotateValue, 'X', rotateEl);
+            this.modifierY = this.getModifier(this.rotateValue, 'Y', rotateEl);
+        };
+        /**
+         * @desc Image zoom
+         * Translate the wrap and scale the image to get better user experience
+         *
+         * @param {String} scale - Zoom decrement/increment value
+         */
+        Zoom.prototype.zoomImage = function (scale) {
+            // Find offset manually to avoid issue after zoom
+            var offsetX = (this.containerRect.width - this.imageXSize) / 2 +
+                this.containerRect.left;
+            var _a = this.core.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
+            var topBottomSpacing = Math.abs(top - bottom) / 2;
+            var offsetY = (this.containerRect.height -
+                this.imageYSize -
+                topBottomSpacing * this.modifierX) /
+                2 +
+                this.scrollTop +
+                this.containerRect.top;
+            var originalX;
+            var originalY;
+            if (scale === 1) {
+                this.positionChanged = false;
+            }
+            var dragAllowedAxises = this.getDragAllowedAxises(Math.abs(this.rotateValue), scale);
+            var allowY = dragAllowedAxises.allowY, allowX = dragAllowedAxises.allowX;
+            if (this.positionChanged) {
+                originalX = this.left / (this.scale - 1);
+                originalY = this.top / (this.scale - 1);
+                this.pageX = Math.abs(originalX) + offsetX;
+                this.pageY = Math.abs(originalY) + offsetY;
+                this.positionChanged = false;
+            }
+            var possibleSwipeCords = this.getPossibleSwipeDragCords(this.rotateValue, scale);
+            var _x = offsetX - this.pageX;
+            var _y = offsetY - this.pageY;
+            var x = (scale - 1) * _x;
+            var y = (scale - 1) * _y;
+            if (allowX) {
+                if (this.isBeyondPossibleLeft(x, possibleSwipeCords.minX)) {
+                    x = possibleSwipeCords.minX;
+                }
+                else if (this.isBeyondPossibleRight(x, possibleSwipeCords.maxX)) {
+                    x = possibleSwipeCords.maxX;
+                }
+            }
+            else {
+                if (scale > 1) {
+                    if (x < possibleSwipeCords.minX) {
+                        x = possibleSwipeCords.minX;
+                    }
+                    else if (x > possibleSwipeCords.maxX) {
+                        x = possibleSwipeCords.maxX;
+                    }
+                }
+            }
+            if (allowY) {
+                if (this.isBeyondPossibleTop(y, possibleSwipeCords.minY)) {
+                    y = possibleSwipeCords.minY;
+                }
+                else if (this.isBeyondPossibleBottom(y, possibleSwipeCords.maxY)) {
+                    y = possibleSwipeCords.maxY;
+                }
+            }
+            else {
+                // If the translate value based on index of beyond the viewport, utilize the available space to prevent image being cut out
+                if (scale > 1) {
+                    //If image goes beyond viewport top, use the minim possible translate value
+                    if (y < possibleSwipeCords.minY) {
+                        y = possibleSwipeCords.minY;
+                    }
+                    else if (y > possibleSwipeCords.maxY) {
+                        y = possibleSwipeCords.maxY;
+                    }
+                }
+            }
+            this.setZoomStyles({
+                x: x,
+                y: y,
+                scale: scale,
+            });
+        };
+        /**
+         * @desc apply scale3d to image and translate to image wrap
+         * @param {style} X,Y and scale
+         */
+        Zoom.prototype.setZoomStyles = function (style) {
+            var $image = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-image')
+                .first();
+            var $dummyImage = this.core.outer
+                .find('.lg-current .lg-dummy-img')
+                .first();
+            var $imageWrap = $image.parent();
+            this.scale = style.scale;
+            $image.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)');
+            $dummyImage.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)');
+            var transform = 'translate3d(' + style.x + 'px, ' + style.y + 'px, 0)';
+            $imageWrap.css('transform', transform);
+            this.left = style.x;
+            this.top = style.y;
+        };
+        /**
+         * @param index - Index of the current slide
+         * @param event - event will be available only if the function is called on clicking/taping the imags
+         */
+        Zoom.prototype.setActualSize = function (index, event) {
+            var _this = this;
+            // Allow zoom only on image
+            if (!this.isImageSlide() ||
+                this.core.outer.hasClass('lg-first-slide-loading')) {
+                return;
+            }
+            var scale = this.getCurrentImageActualSizeScale();
+            if (this.core.outer.hasClass('lg-zoomed')) {
+                this.scale = 1;
+            }
+            else {
+                this.scale = this.getScale(scale);
+            }
+            this.setPageCords(event);
+            this.beginZoom(this.scale);
+            this.zoomImage(this.scale);
+            setTimeout(function () {
+                _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab');
+            }, 10);
+        };
+        Zoom.prototype.getNaturalWidth = function (index) {
+            var $image = this.core.getSlideItem(index).find('.lg-image').first();
+            var naturalWidth = this.core.galleryItems[index].width;
+            return naturalWidth
+                ? parseFloat(naturalWidth)
+                : $image.get().naturalWidth;
+        };
+        Zoom.prototype.getActualSizeScale = function (naturalWidth, width) {
+            var _scale;
+            var scale;
+            if (naturalWidth > width) {
+                _scale = naturalWidth / width;
+                scale = _scale || 2;
+            }
+            else {
+                scale = 1;
+            }
+            return scale;
+        };
+        Zoom.prototype.getCurrentImageActualSizeScale = function () {
+            var $image = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-image')
+                .first();
+            var width = $image.get().offsetWidth;
+            var naturalWidth = this.getNaturalWidth(this.core.index) || width;
+            return this.getActualSizeScale(naturalWidth, width);
+        };
+        Zoom.prototype.getPageCords = function (event) {
+            var cords = {};
+            if (event) {
+                cords.x = event.pageX || event.targetTouches[0].pageX;
+                cords.y = event.pageY || event.targetTouches[0].pageY;
+            }
+            else {
+                var containerRect = this.core.outer.get().getBoundingClientRect();
+                cords.x = containerRect.width / 2 + containerRect.left;
+                cords.y =
+                    containerRect.height / 2 + this.scrollTop + containerRect.top;
+            }
+            return cords;
+        };
+        Zoom.prototype.setPageCords = function (event) {
+            var pageCords = this.getPageCords(event);
+            this.pageX = pageCords.x;
+            this.pageY = pageCords.y;
+        };
+        // If true, zoomed - in else zoomed out
+        Zoom.prototype.beginZoom = function (scale) {
+            this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging');
+            if (scale > 1) {
+                this.core.outer.addClass('lg-zoomed');
+                var $actualSize = this.core.getElementById('lg-actual-size');
+                $actualSize
+                    .removeClass(this.settings.actualSizeIcons.zoomIn)
+                    .addClass(this.settings.actualSizeIcons.zoomOut);
+            }
+            else {
+                this.resetZoom();
+            }
+            return scale > 1;
+        };
+        Zoom.prototype.getScale = function (scale) {
+            var actualSizeScale = this.getCurrentImageActualSizeScale();
+            if (scale < 1) {
+                scale = 1;
+            }
+            else if (scale > actualSizeScale) {
+                scale = actualSizeScale;
+            }
+            return scale;
+        };
+        Zoom.prototype.init = function () {
+            var _this = this;
+            if (!this.settings.zoom) {
+                return;
+            }
+            this.buildTemplates();
+            this.enableZoomOnSlideItemLoad();
+            var tapped = null;
+            this.core.outer.on('dblclick.lg', function (event) {
+                if (!_this.$LG(event.target).hasClass('lg-image')) {
+                    return;
+                }
+                _this.setActualSize(_this.core.index, event);
+            });
+            this.core.outer.on('touchstart.lg', function (event) {
+                var $target = _this.$LG(event.target);
+                if (event.targetTouches.length === 1 &&
+                    $target.hasClass('lg-image')) {
+                    if (!tapped) {
+                        tapped = setTimeout(function () {
+                            tapped = null;
+                        }, 300);
+                    }
+                    else {
+                        clearTimeout(tapped);
+                        tapped = null;
+                        event.preventDefault();
+                        _this.setActualSize(_this.core.index, event);
+                    }
+                }
+            });
+            // Update zoom on resize and orientationchange
+            this.core.LGel.on(lGEvents.containerResize + ".zoom " + lGEvents.rotateRight + ".zoom " + lGEvents.rotateLeft + ".zoom " + lGEvents.flipHorizontal + ".zoom " + lGEvents.flipVertical + ".zoom", function () {
+                if (!_this.core.lgOpened || !_this.isImageSlide())
+                    return;
+                _this.setPageCords();
+                _this.setZoomEssentials();
+                _this.zoomImage(_this.scale);
+            });
+            // Update zoom on resize and orientationchange
+            this.$LG(window).on("scroll.lg.zoom.global" + this.core.lgId, function () {
+                if (!_this.core.lgOpened)
+                    return;
+                _this.scrollTop = _this.$LG(window).scrollTop();
+            });
+            this.core.getElementById('lg-zoom-out').on('click.lg', function () {
+                if (_this.core.outer.find('.lg-current .lg-image').get()) {
+                    _this.scale -= _this.settings.scale;
+                    _this.scale = _this.getScale(_this.scale);
+                    _this.beginZoom(_this.scale);
+                    _this.zoomImage(_this.scale);
+                }
+            });
+            this.core.getElementById('lg-zoom-in').on('click.lg', function () {
+                _this.zoomIn();
+            });
+            this.core.getElementById('lg-actual-size').on('click.lg', function () {
+                _this.setActualSize(_this.core.index);
+            });
+            this.core.LGel.on(lGEvents.beforeOpen + ".zoom", function () {
+                _this.core.outer.find('.lg-item').removeClass('lg-zoomable');
+            });
+            this.core.LGel.on(lGEvents.afterOpen + ".zoom", function () {
+                _this.scrollTop = _this.$LG(window).scrollTop();
+                // Set the initial value center
+                _this.pageX = _this.core.outer.width() / 2;
+                _this.pageY = _this.core.outer.height() / 2 + _this.scrollTop;
+                _this.scale = 1;
+            });
+            // Reset zoom on slide change
+            this.core.LGel.on(lGEvents.afterSlide + ".zoom", function (event) {
+                var prevIndex = event.detail.prevIndex;
+                _this.scale = 1;
+                _this.positionChanged = false;
+                _this.resetZoom(prevIndex);
+                if (_this.isImageSlide()) {
+                    _this.setZoomEssentials();
+                }
+            });
+            // Drag option after zoom
+            this.zoomDrag();
+            this.pinchZoom();
+            this.zoomSwipe();
+            // Store the zoomable timeout value just to clear it while closing
+            this.zoomableTimeout = false;
+            this.positionChanged = false;
+        };
+        Zoom.prototype.zoomIn = function (scale) {
+            // Allow zoom only on image
+            if (!this.isImageSlide()) {
+                return;
+            }
+            if (scale) {
+                this.scale = scale;
+            }
+            else {
+                this.scale += this.settings.scale;
+            }
+            this.scale = this.getScale(this.scale);
+            this.beginZoom(this.scale);
+            this.zoomImage(this.scale);
+        };
+        // Reset zoom effect
+        Zoom.prototype.resetZoom = function (index) {
+            this.core.outer.removeClass('lg-zoomed lg-zoom-drag-transition');
+            var $actualSize = this.core.getElementById('lg-actual-size');
+            var $item = this.core.getSlideItem(index !== undefined ? index : this.core.index);
+            $actualSize
+                .removeClass(this.settings.actualSizeIcons.zoomOut)
+                .addClass(this.settings.actualSizeIcons.zoomIn);
+            $item.find('.lg-img-wrap').first().removeAttr('style');
+            $item.find('.lg-image').first().removeAttr('style');
+            this.scale = 1;
+            this.left = 0;
+            this.top = 0;
+            // Reset pagx pagy values to center
+            this.setPageCords();
+        };
+        Zoom.prototype.getTouchDistance = function (e) {
+            return Math.sqrt((e.targetTouches[0].pageX - e.targetTouches[1].pageX) *
+                (e.targetTouches[0].pageX - e.targetTouches[1].pageX) +
+                (e.targetTouches[0].pageY - e.targetTouches[1].pageY) *
+                    (e.targetTouches[0].pageY - e.targetTouches[1].pageY));
+        };
+        Zoom.prototype.pinchZoom = function () {
+            var _this = this;
+            var startDist = 0;
+            var pinchStarted = false;
+            var initScale = 1;
+            var $item = this.core.getSlideItem(this.core.index);
+            this.core.$inner.on('touchstart.lg', function (e) {
+                $item = _this.core.getSlideItem(_this.core.index);
+                if (!_this.isImageSlide()) {
+                    return;
+                }
+                if (e.targetTouches.length === 2 &&
+                    !_this.core.outer.hasClass('lg-first-slide-loading') &&
+                    (_this.$LG(e.target).hasClass('lg-item') ||
+                        $item.get().contains(e.target))) {
+                    initScale = _this.scale || 1;
+                    _this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging');
+                    _this.core.touchAction = 'pinch';
+                    startDist = _this.getTouchDistance(e);
+                }
+            });
+            this.core.$inner.on('touchmove.lg', function (e) {
+                if (e.targetTouches.length === 2 &&
+                    _this.core.touchAction === 'pinch' &&
+                    (_this.$LG(e.target).hasClass('lg-item') ||
+                        $item.get().contains(e.target))) {
+                    e.preventDefault();
+                    var endDist = _this.getTouchDistance(e);
+                    var distance = startDist - endDist;
+                    if (!pinchStarted && Math.abs(distance) > 5) {
+                        pinchStarted = true;
+                    }
+                    if (pinchStarted) {
+                        _this.scale = Math.max(1, initScale + -distance * 0.008);
+                        _this.zoomImage(_this.scale);
+                    }
+                }
+            });
+            this.core.$inner.on('touchend.lg', function (e) {
+                if (_this.core.touchAction === 'pinch' &&
+                    (_this.$LG(e.target).hasClass('lg-item') ||
+                        $item.get().contains(e.target))) {
+                    pinchStarted = false;
+                    startDist = 0;
+                    if (_this.scale <= 1) {
+                        _this.resetZoom();
+                    }
+                    else {
+                        _this.scale = _this.getScale(_this.scale);
+                        _this.zoomImage(_this.scale);
+                        _this.core.outer.addClass('lg-zoomed');
+                    }
+                    _this.core.touchAction = undefined;
+                }
+            });
+        };
+        Zoom.prototype.touchendZoom = function (startCoords, endCoords, allowX, allowY, touchDuration, rotateValue) {
+            var distanceXnew = endCoords.x - startCoords.x;
+            var distanceYnew = endCoords.y - startCoords.y;
+            var speedX = Math.abs(distanceXnew) / touchDuration + 1;
+            var speedY = Math.abs(distanceYnew) / touchDuration + 1;
+            if (speedX > 2) {
+                speedX += 1;
+            }
+            if (speedY > 2) {
+                speedY += 1;
+            }
+            distanceXnew = distanceXnew * speedX;
+            distanceYnew = distanceYnew * speedY;
+            var _LGel = this.core
+                .getSlideItem(this.core.index)
+                .find('.lg-img-wrap')
+                .first();
+            var distance = {};
+            distance.x = this.left + distanceXnew * this.modifierX;
+            distance.y = this.top + distanceYnew * this.modifierY;
+            var possibleSwipeCords = this.getPossibleSwipeDragCords(rotateValue);
+            if (Math.abs(distanceXnew) > 15 || Math.abs(distanceYnew) > 15) {
+                if (allowY) {
+                    if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) {
+                        distance.y = possibleSwipeCords.minY;
+                    }
+                    else if (this.isBeyondPossibleBottom(distance.y, possibleSwipeCords.maxY)) {
+                        distance.y = possibleSwipeCords.maxY;
+                    }
+                }
+                if (allowX) {
+                    if (this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)) {
+                        distance.x = possibleSwipeCords.minX;
+                    }
+                    else if (this.isBeyondPossibleRight(distance.x, possibleSwipeCords.maxX)) {
+                        distance.x = possibleSwipeCords.maxX;
+                    }
+                }
+                if (allowY) {
+                    this.top = distance.y;
+                }
+                else {
+                    distance.y = this.top;
+                }
+                if (allowX) {
+                    this.left = distance.x;
+                }
+                else {
+                    distance.x = this.left;
+                }
+                this.setZoomSwipeStyles(_LGel, distance);
+                this.positionChanged = true;
+            }
+        };
+        Zoom.prototype.getZoomSwipeCords = function (startCoords, endCoords, allowX, allowY, possibleSwipeCords) {
+            var distance = {};
+            if (allowY) {
+                distance.y =
+                    this.top + (endCoords.y - startCoords.y) * this.modifierY;
+                if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) {
+                    var diffMinY = possibleSwipeCords.minY - distance.y;
+                    distance.y = possibleSwipeCords.minY - diffMinY / 6;
+                }
+                else if (this.isBeyondPossibleBottom(distance.y, possibleSwipeCords.maxY)) {
+                    var diffMaxY = distance.y - possibleSwipeCords.maxY;
+                    distance.y = possibleSwipeCords.maxY + diffMaxY / 6;
+                }
+            }
+            else {
+                distance.y = this.top;
+            }
+            if (allowX) {
+                distance.x =
+                    this.left + (endCoords.x - startCoords.x) * this.modifierX;
+                if (this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)) {
+                    var diffMinX = possibleSwipeCords.minX - distance.x;
+                    distance.x = possibleSwipeCords.minX - diffMinX / 6;
+                }
+                else if (this.isBeyondPossibleRight(distance.x, possibleSwipeCords.maxX)) {
+                    var difMaxX = distance.x - possibleSwipeCords.maxX;
+                    distance.x = possibleSwipeCords.maxX + difMaxX / 6;
+                }
+            }
+            else {
+                distance.x = this.left;
+            }
+            return distance;
+        };
+        Zoom.prototype.isBeyondPossibleLeft = function (x, minX) {
+            return x >= minX;
+        };
+        Zoom.prototype.isBeyondPossibleRight = function (x, maxX) {
+            return x <= maxX;
+        };
+        Zoom.prototype.isBeyondPossibleTop = function (y, minY) {
+            return y >= minY;
+        };
+        Zoom.prototype.isBeyondPossibleBottom = function (y, maxY) {
+            return y <= maxY;
+        };
+        Zoom.prototype.isImageSlide = function () {
+            var currentItem = this.core.galleryItems[this.core.index];
+            return this.core.getSlideType(currentItem) === 'image';
+        };
+        Zoom.prototype.getPossibleSwipeDragCords = function (rotateValue, scale) {
+            var dataScale = scale || this.scale || 1;
+            var elDataScale = Math.abs(dataScale);
+            var _a = this.core.mediaContainerPosition, top = _a.top, bottom = _a.bottom;
+            var topBottomSpacing = Math.abs(top - bottom) / 2;
+            var minY = (this.imageYSize - this.containerRect.height) / 2 +
+                topBottomSpacing * this.modifierX;
+            var maxY = this.containerRect.height - this.imageYSize * elDataScale + minY;
+            var minX = (this.imageXSize - this.containerRect.width) / 2;
+            var maxX = this.containerRect.width - this.imageXSize * elDataScale + minX;
+            var possibleSwipeCords = {
+                minY: minY,
+                maxY: maxY,
+                minX: minX,
+                maxX: maxX,
+            };
+            if (Math.abs(rotateValue) === 90) {
+                possibleSwipeCords = {
+                    minY: minX,
+                    maxY: maxX,
+                    minX: minY,
+                    maxX: maxY,
+                };
+            }
+            return possibleSwipeCords;
+        };
+        Zoom.prototype.setZoomSwipeStyles = function (LGel, distance) {
+            LGel.css('transform', 'translate3d(' + distance.x + 'px, ' + distance.y + 'px, 0)');
+        };
+        Zoom.prototype.zoomSwipe = function () {
+            var _this = this;
+            var startCoords = {};
+            var endCoords = {};
+            var isMoved = false;
+            // Allow x direction drag
+            var allowX = false;
+            // Allow Y direction drag
+            var allowY = false;
+            var startTime = new Date();
+            var endTime = new Date();
+            var possibleSwipeCords;
+            var _LGel;
+            var $item = this.core.getSlideItem(this.core.index);
+            this.core.$inner.on('touchstart.lg', function (e) {
+                // Allow zoom only on image
+                if (!_this.isImageSlide()) {
+                    return;
+                }
+                $item = _this.core.getSlideItem(_this.core.index);
+                if ((_this.$LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target)) &&
+                    e.targetTouches.length === 1 &&
+                    _this.core.outer.hasClass('lg-zoomed')) {
+                    e.preventDefault();
+                    startTime = new Date();
+                    _this.core.touchAction = 'zoomSwipe';
+                    _LGel = _this.core
+                        .getSlideItem(_this.core.index)
+                        .find('.lg-img-wrap')
+                        .first();
+                    var dragAllowedAxises = _this.getDragAllowedAxises(Math.abs(_this.rotateValue));
+                    allowY = dragAllowedAxises.allowY;
+                    allowX = dragAllowedAxises.allowX;
+                    if (allowX || allowY) {
+                        startCoords = _this.getSwipeCords(e, Math.abs(_this.rotateValue));
+                    }
+                    possibleSwipeCords = _this.getPossibleSwipeDragCords(_this.rotateValue);
+                    // reset opacity and transition duration
+                    _this.core.outer.addClass('lg-zoom-dragging lg-zoom-drag-transition');
+                }
+            });
+            this.core.$inner.on('touchmove.lg', function (e) {
+                if (e.targetTouches.length === 1 &&
+                    _this.core.touchAction === 'zoomSwipe' &&
+                    (_this.$LG(e.target).hasClass('lg-item') ||
+                        $item.get().contains(e.target))) {
+                    e.preventDefault();
+                    _this.core.touchAction = 'zoomSwipe';
+                    endCoords = _this.getSwipeCords(e, Math.abs(_this.rotateValue));
+                    var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords);
+                    if (Math.abs(endCoords.x - startCoords.x) > 15 ||
+                        Math.abs(endCoords.y - startCoords.y) > 15) {
+                        isMoved = true;
+                        _this.setZoomSwipeStyles(_LGel, distance);
+                    }
+                }
+            });
+            this.core.$inner.on('touchend.lg', function (e) {
+                if (_this.core.touchAction === 'zoomSwipe' &&
+                    (_this.$LG(e.target).hasClass('lg-item') ||
+                        $item.get().contains(e.target))) {
+                    _this.core.touchAction = undefined;
+                    _this.core.outer.removeClass('lg-zoom-dragging');
+                    if (!isMoved) {
+                        return;
+                    }
+                    isMoved = false;
+                    endTime = new Date();
+                    var touchDuration = endTime.valueOf() - startTime.valueOf();
+                    _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration, _this.rotateValue);
+                }
+            });
+        };
+        Zoom.prototype.zoomDrag = function () {
+            var _this = this;
+            var startCoords = {};
+            var endCoords = {};
+            var isDragging = false;
+            var isMoved = false;
+            // Allow x direction drag
+            var allowX = false;
+            // Allow Y direction drag
+            var allowY = false;
+            var startTime;
+            var endTime;
+            var possibleSwipeCords;
+            var _LGel;
+            this.core.outer.on('mousedown.lg.zoom', function (e) {
+                // Allow zoom only on image
+                if (!_this.isImageSlide()) {
+                    return;
+                }
+                var $item = _this.core.getSlideItem(_this.core.index);
+                if (_this.$LG(e.target).hasClass('lg-item') ||
+                    $item.get().contains(e.target)) {
+                    startTime = new Date();
+                    _LGel = _this.core
+                        .getSlideItem(_this.core.index)
+                        .find('.lg-img-wrap')
+                        .first();
+                    var dragAllowedAxises = _this.getDragAllowedAxises(Math.abs(_this.rotateValue));
+                    allowY = dragAllowedAxises.allowY;
+                    allowX = dragAllowedAxises.allowX;
+                    if (_this.core.outer.hasClass('lg-zoomed')) {
+                        if (_this.$LG(e.target).hasClass('lg-object') &&
+                            (allowX || allowY)) {
+                            e.preventDefault();
+                            startCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                            possibleSwipeCords = _this.getPossibleSwipeDragCords(_this.rotateValue);
+                            isDragging = true;
+                            // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+                            _this.core.outer.get().scrollLeft += 1;
+                            _this.core.outer.get().scrollLeft -= 1;
+                            _this.core.outer
+                                .removeClass('lg-grab')
+                                .addClass('lg-grabbing lg-zoom-drag-transition lg-zoom-dragging');
+                            // reset opacity and transition duration
+                        }
+                    }
+                }
+            });
+            this.$LG(window).on("mousemove.lg.zoom.global" + this.core.lgId, function (e) {
+                if (isDragging) {
+                    isMoved = true;
+                    endCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                    var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords);
+                    _this.setZoomSwipeStyles(_LGel, distance);
+                }
+            });
+            this.$LG(window).on("mouseup.lg.zoom.global" + this.core.lgId, function (e) {
+                if (isDragging) {
+                    endTime = new Date();
+                    isDragging = false;
+                    _this.core.outer.removeClass('lg-zoom-dragging');
+                    // Fix for chrome mouse move on click
+                    if (isMoved &&
+                        (startCoords.x !== endCoords.x ||
+                            startCoords.y !== endCoords.y)) {
+                        endCoords = _this.getDragCords(e, Math.abs(_this.rotateValue));
+                        var touchDuration = endTime.valueOf() - startTime.valueOf();
+                        _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration, _this.rotateValue);
+                    }
+                    isMoved = false;
+                }
+                _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab');
+            });
+        };
+        Zoom.prototype.closeGallery = function () {
+            this.resetZoom();
+        };
+        Zoom.prototype.destroy = function () {
+            // Unbind all events added by lightGallery zoom plugin
+            this.$LG(window).off(".lg.zoom.global" + this.core.lgId);
+            this.core.LGel.off('.lg.zoom');
+            this.core.LGel.off('.zoom');
+            clearTimeout(this.zoomableTimeout);
+            this.zoomableTimeout = false;
+        };
+        return Zoom;
+    }());
+
+    return Zoom;
+
+})));
+//# sourceMappingURL=lg-zoom.umd.js.map

res/user.css

@@ -0,0 +1,95 @@
+/* user-override.css */
+
+#header {
+    height: 240px;
+    display: inline-grid;
+    justify-content:space-between;
+}
+#header, #outer_lightgallery {
+    background-color: rgba(0, 0, 0, 0.2);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    border-radius: 12px;
+    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.6);
+    left: 5%;
+    max-height: 100%;
+    position: relative;
+    top: 0;
+    width: 90%;
+    z-index: 10;
+}
+#outer_lightgallery {
+    display: block;
+    margin-top: 1em;
+    min-height:2em;
+    /* new */
+    text-align: center;
+    /* display: flex */
+    /* justify-content: center; */
+}
+#lightgallery, #filter-results, #results {
+    padding: 1em;
+}
+#lightgallery img, #results img {
+    width: 205px;
+    height: 205px;
+    object-fit: cover;
+    z-index: 9;
+    padding: 0 3px 3px 0;
+}
+#header h1, #nav, #zip {
+    display: inline-block;
+    /* background-color: #ddd; */
+    /* color: #fff; */
+    background-color:rgba(255, 255, 255, 0.5);
+    padding: 0.5em;
+    height: 2em;
+    border-radius: 0 0 12px 12px;
+    border-radius: 12px;
+}
+#header {
+    background-image: url("header/header.jpg");
+}
+#nav {
+    height: 2.5em;
+}
+#zip {
+    position: absolute;
+    right: 1em;
+    bottom: 1em;
+    height: 4em;
+}
+
+.lg-zoom-in-out {
+    .lg-item {
+        // By default all slides should be hidden
+        opacity: 0;
+        will-change: transform, opacity;
+
+        // For the zoom in transition, set scale3d to 2
+        &.lg-prev-slide {
+            transform: scale3d(2, 2, 2);
+        }
+
+        // For the zoom out transition, set scale3d to 0
+        &.lg-next-slide {
+            transform: scale3d(0, 0, 0);
+        }
+
+        // Reset opacity and transition
+        &.lg-current {
+            transform: scale3d(1, 1, 1);
+            opacity: 1;
+        }
+
+        // Add CSS transition for opacity and transform
+        &.lg-prev-slide,
+        &.lg-next-slide,
+        &.lg-current {
+            transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s
+                    ease 0s;
+        }
+    }
+}
+

res/user.css.new

@@ -0,0 +1,95 @@
+/* user-override.css */
+
+#header {
+    height: 240px;
+    display: inline-grid;
+    justify-content:space-between;
+}
+#header, #outer_lightgallery {
+    background-color: rgba(0, 0, 0, 0.2);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    border-radius: 12px;
+    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.6);
+    left: 5%;
+    max-height: 100%;
+    position: relative;
+    top: 0;
+    width: 90%;
+    z-index: 10;
+}
+#outer_lightgallery {
+    display: block;
+    margin-top: 1em;
+    min-height:2em;
+    /* new */
+    text-align: center;
+    /* display: flex */
+    /* justify-content: center; */
+}
+#lightgallery, #filter-results, #results {
+    padding: 1em;
+}
+#lightgallery img, #results img {
+    width: 205px;
+    height: 205px;
+    object-fit: cover;
+    z-index: 9;
+    padding: 0 3px 3px 0;
+}
+#header h1, #nav, #zip {
+    display: inline-block;
+    /* background-color: #ddd; */
+    /* color: #fff; */
+    background-color:rgba(255, 255, 255, 0.5);
+    padding: 0.5em;
+    height: 2em;
+    border-radius: 0 0 12px 12px;
+    border-radius: 12px;
+}
+#header {
+    background-image: url("header/header.jpg");
+}
+#nav {
+    height: 2.5em;
+}
+#zip {
+    position: absolute;
+    right: 1em;
+    bottom: 1em;
+    height: 4em;
+}
+
+.lg-zoom-in-out {
+    .lg-item {
+        // By default all slides should be hidden
+        opacity: 0;
+        will-change: transform, opacity;
+
+        // For the zoom in transition, set scale3d to 2
+        &.lg-prev-slide {
+            transform: scale3d(2, 2, 2);
+        }
+
+        // For the zoom out transition, set scale3d to 0
+        &.lg-next-slide {
+            transform: scale3d(0, 0, 0);
+        }
+
+        // Reset opacity and transition
+        &.lg-current {
+            transform: scale3d(1, 1, 1);
+            opacity: 1;
+        }
+
+        // Add CSS transition for opacity and transform
+        &.lg-prev-slide,
+        &.lg-next-slide,
+        &.lg-current {
+            transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s
+                    ease 0s;
+        }
+    }
+}
+