| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738 |
- /*!
- * lightgallery | 2.7.1 | January 11th 2023
- * 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: '',
- resetScrollPosition: true,
- hideScrollbar: false,
- closable: true,
- swipeToClose: true,
- closeOnTap: true,
- showCloseIcon: true,
- showMaximizeIcon: false,
- loop: true,
- escKey: true,
- keyPress: true,
- trapFocus: 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) { return res.text(); })
- .then(function (html) {
- _this.selector.innerHTML = html;
- });
- 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>";
- },
- getFocusableElements: function (container) {
- var elements = container.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
- var visibleElements = [].filter.call(elements, function (element) {
- var style = window.getComputedStyle(element);
- return style.display !== 'none' && style.visibility !== 'hidden';
- });
- return visibleElements;
- },
- /**
- * @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.bodyPaddingRight = 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 || [];
- }
- };
- LightGallery.prototype.shouldHideScrollbar = function () {
- return (this.settings.hideScrollbar &&
- document.body === this.settings.container);
- };
- LightGallery.prototype.hideScrollbar = function () {
- if (!this.shouldHideScrollbar()) {
- return;
- }
- this.bodyPaddingRight = parseFloat($LG('body').style().paddingRight);
- var bodyRect = document.documentElement.getBoundingClientRect();
- var scrollbarWidth = window.innerWidth - bodyRect.width;
- $LG(document.body).css('padding-right', scrollbarWidth + this.bodyPaddingRight + 'px');
- $LG(document.body).addClass('lg-overlay-open');
- };
- LightGallery.prototype.resetScrollBar = function () {
- if (!this.shouldHideScrollbar()) {
- return;
- }
- $LG(document.body).css('padding-right', this.bodyPaddingRight + 'px');
- $LG(document.body).removeClass('lg-overlay-open');
- };
- /**
- * 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.removeClass('lg-hide-items');
- this.hideScrollbar();
- // 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);
- setTimeout(function () {
- if (_this.settings.trapFocus &&
- document.body === _this.settings.container) {
- _this.trapFocus();
- }
- }, _this.settings.backdropDuration + 50);
- // 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') {
- var alt = currentGalleryItem.alt;
- var altAttr = alt ? 'alt="' + alt + '"' : '';
- $currentSlide
- .find('.lg-img-wrap')
- .append(utils.getImgMarkup(index, src, altAttr, 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.touches.length === 1) {
- isSwiping = true;
- _this.touchAction = 'swipe';
- _this.manageSwipeClass();
- startCoords = {
- pageX: e.touches[0].pageX,
- pageY: e.touches[0].pageY,
- };
- }
- });
- this.$inner.on('touchmove.lg', function (e) {
- if (isSwiping &&
- _this.touchAction === 'swipe' &&
- e.touches.length === 1) {
- endCoords = {
- pageX: e.touches[0].pageX,
- pageY: e.touches[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.trapFocus = function () {
- var _this = this;
- this.$container.get().focus({
- preventScroll: true,
- });
- $LG(window).on("keydown.lg.global" + this.lgId, function (e) {
- if (!_this.lgOpened) {
- return;
- }
- var isTabPressed = e.key === 'Tab' || e.keyCode === 9;
- if (!isTabPressed) {
- return;
- }
- var focusableEls = utils.getFocusableElements(_this.$container.get());
- var firstFocusableEl = focusableEls[0];
- var lastFocusableEl = focusableEls[focusableEls.length - 1];
- if (e.shiftKey) {
- if (document.activeElement === firstFocusableEl) {
- lastFocusableEl.focus();
- e.preventDefault();
- }
- }
- else {
- if (document.activeElement === lastFocusableEl) {
- firstFocusableEl.focus();
- e.preventDefault();
- }
- }
- });
- };
- 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);
- if (this.settings.resetScrollPosition && !this.settings.hideScrollbar) {
- $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');
- // Reset scrollbar
- _this.resetScrollBar();
- // 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.$container.get()) {
- _this.$container.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();
- };
- LightGallery.prototype.destroyGallery = function () {
- this.destroyModules(true);
- if (!this.settings.dynamic) {
- this.invalidateItems();
- }
- $LG(window).off(".lg.global" + this.lgId);
- this.LGel.off('.lg');
- this.$container.remove();
- };
- /**
- * 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 closeTimeout = this.closeGallery(true);
- if (closeTimeout) {
- setTimeout(this.destroyGallery.bind(this), closeTimeout);
- }
- else {
- this.destroyGallery();
- }
- return closeTimeout;
- };
- return LightGallery;
- }());
- function lightGallery(el, options) {
- return new LightGallery(el, options);
- }
- return lightGallery;
- })));
- //# sourceMappingURL=lightgallery.umd.js.map
|