lightgallery.js 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356
  1. /*! lightgallery - v1.3.9 - 2017-02-05
  2. * http://sachinchoolur.github.io/lightGallery/
  3. * Copyright (c) 2017 Sachin N; Licensed GPLv3 */
  4. (function (root, factory) {
  5. if (typeof define === 'function' && define.amd) {
  6. // AMD. Register as an anonymous module unless amdModuleId is set
  7. define(['jquery'], function (a0) {
  8. return (factory(a0));
  9. });
  10. } else if (typeof exports === 'object') {
  11. // Node. Does not work with strict CommonJS, but
  12. // only CommonJS-like environments that support module.exports,
  13. // like Node.
  14. module.exports = factory(require('jquery'));
  15. } else {
  16. factory(root["jQuery"]);
  17. }
  18. }(this, function ($) {
  19. (function() {
  20. 'use strict';
  21. var defaults = {
  22. mode: 'lg-slide',
  23. // Ex : 'ease'
  24. cssEasing: 'ease',
  25. //'for jquery animation'
  26. easing: 'linear',
  27. speed: 600,
  28. height: '100%',
  29. width: '100%',
  30. addClass: '',
  31. startClass: 'lg-start-zoom',
  32. backdropDuration: 150,
  33. hideBarsDelay: 6000,
  34. useLeft: false,
  35. closable: true,
  36. loop: true,
  37. escKey: true,
  38. keyPress: true,
  39. controls: true,
  40. slideEndAnimatoin: true,
  41. hideControlOnEnd: false,
  42. mousewheel: true,
  43. getCaptionFromTitleOrAlt: true,
  44. // .lg-item || '.lg-sub-html'
  45. appendSubHtmlTo: '.lg-sub-html',
  46. subHtmlSelectorRelative: false,
  47. /**
  48. * @desc number of preload slides
  49. * will exicute only after the current slide is fully loaded.
  50. *
  51. * @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th
  52. * slide will be loaded in the background after the 4th slide is fully loaded..
  53. * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
  54. *
  55. */
  56. preload: 1,
  57. showAfterLoad: true,
  58. selector: '',
  59. selectWithin: '',
  60. nextHtml: '',
  61. prevHtml: '',
  62. // 0, 1
  63. index: false,
  64. iframeMaxWidth: '100%',
  65. download: true,
  66. counter: true,
  67. appendCounterTo: '.lg-toolbar',
  68. swipeThreshold: 50,
  69. enableSwipe: true,
  70. enableDrag: true,
  71. dynamic: false,
  72. dynamicEl: [],
  73. galleryId: 1
  74. };
  75. function Plugin(element, options) {
  76. // Current lightGallery element
  77. this.el = element;
  78. // Current jquery element
  79. this.$el = $(element);
  80. // lightGallery settings
  81. this.s = $.extend({}, defaults, options);
  82. // When using dynamic mode, ensure dynamicEl is an array
  83. if (this.s.dynamic && this.s.dynamicEl !== 'undefined' && this.s.dynamicEl.constructor === Array && !this.s.dynamicEl.length) {
  84. throw ('When using dynamic mode, you must also define dynamicEl as an Array.');
  85. }
  86. // lightGallery modules
  87. this.modules = {};
  88. // false when lightgallery complete first slide;
  89. this.lGalleryOn = false;
  90. this.lgBusy = false;
  91. // Timeout function for hiding controls;
  92. this.hideBartimeout = false;
  93. // To determine browser supports for touch events;
  94. this.isTouch = ('ontouchstart' in document.documentElement);
  95. // Disable hideControlOnEnd if sildeEndAnimation is true
  96. if (this.s.slideEndAnimatoin) {
  97. this.s.hideControlOnEnd = false;
  98. }
  99. // Gallery items
  100. if (this.s.dynamic) {
  101. this.$items = this.s.dynamicEl;
  102. } else {
  103. if (this.s.selector === 'this') {
  104. this.$items = this.$el;
  105. } else if (this.s.selector !== '') {
  106. if (this.s.selectWithin) {
  107. this.$items = $(this.s.selectWithin).find(this.s.selector);
  108. } else {
  109. this.$items = this.$el.find($(this.s.selector));
  110. }
  111. } else {
  112. this.$items = this.$el.children();
  113. }
  114. }
  115. // .lg-item
  116. this.$slide = '';
  117. // .lg-outer
  118. this.$outer = '';
  119. this.init();
  120. return this;
  121. }
  122. Plugin.prototype.init = function() {
  123. var _this = this;
  124. // s.preload should not be more than $item.length
  125. if (_this.s.preload > _this.$items.length) {
  126. _this.s.preload = _this.$items.length;
  127. }
  128. // if dynamic option is enabled execute immediately
  129. var _hash = window.location.hash;
  130. if (_hash.indexOf('lg=' + this.s.galleryId) > 0) {
  131. _this.index = parseInt(_hash.split('&slide=')[1], 10);
  132. $('body').addClass('lg-from-hash');
  133. if (!$('body').hasClass('lg-on')) {
  134. setTimeout(function() {
  135. _this.build(_this.index);
  136. });
  137. $('body').addClass('lg-on');
  138. }
  139. }
  140. if (_this.s.dynamic) {
  141. _this.$el.trigger('onBeforeOpen.lg');
  142. _this.index = _this.s.index || 0;
  143. // prevent accidental double execution
  144. if (!$('body').hasClass('lg-on')) {
  145. setTimeout(function() {
  146. _this.build(_this.index);
  147. $('body').addClass('lg-on');
  148. });
  149. }
  150. } else {
  151. // Using different namespace for click because click event should not unbind if selector is same object('this')
  152. _this.$items.on('click.lgcustom', function(event) {
  153. // For IE8
  154. try {
  155. event.preventDefault();
  156. event.preventDefault();
  157. } catch (er) {
  158. event.returnValue = false;
  159. }
  160. _this.$el.trigger('onBeforeOpen.lg');
  161. _this.index = _this.s.index || _this.$items.index(this);
  162. // prevent accidental double execution
  163. if (!$('body').hasClass('lg-on')) {
  164. _this.build(_this.index);
  165. $('body').addClass('lg-on');
  166. }
  167. });
  168. }
  169. };
  170. Plugin.prototype.build = function(index) {
  171. var _this = this;
  172. _this.structure();
  173. // module constructor
  174. $.each($.fn.lightGallery.modules, function(key) {
  175. _this.modules[key] = new $.fn.lightGallery.modules[key](_this.el);
  176. });
  177. // initiate slide function
  178. _this.slide(index, false, false, false);
  179. if (_this.s.keyPress) {
  180. _this.keyPress();
  181. }
  182. if (_this.$items.length > 1) {
  183. _this.arrow();
  184. setTimeout(function() {
  185. _this.enableDrag();
  186. _this.enableSwipe();
  187. }, 50);
  188. if (_this.s.mousewheel) {
  189. _this.mousewheel();
  190. }
  191. }
  192. _this.counter();
  193. _this.closeGallery();
  194. _this.$el.trigger('onAfterOpen.lg');
  195. // Hide controllers if mouse doesn't move for some period
  196. _this.$outer.on('mousemove.lg click.lg touchstart.lg', function() {
  197. _this.$outer.removeClass('lg-hide-items');
  198. clearTimeout(_this.hideBartimeout);
  199. // Timeout will be cleared on each slide movement also
  200. _this.hideBartimeout = setTimeout(function() {
  201. _this.$outer.addClass('lg-hide-items');
  202. }, _this.s.hideBarsDelay);
  203. });
  204. _this.$outer.trigger('mousemove.lg');
  205. };
  206. Plugin.prototype.structure = function() {
  207. var list = '';
  208. var controls = '';
  209. var i = 0;
  210. var subHtmlCont = '';
  211. var template;
  212. var _this = this;
  213. $('body').append('<div class="lg-backdrop"></div>');
  214. $('.lg-backdrop').css('transition-duration', this.s.backdropDuration + 'ms');
  215. // Create gallery items
  216. for (i = 0; i < this.$items.length; i++) {
  217. list += '<div class="lg-item"></div>';
  218. }
  219. // Create controlls
  220. if (this.s.controls && this.$items.length > 1) {
  221. controls = '<div class="lg-actions">' +
  222. '<div class="lg-prev lg-icon">' + this.s.prevHtml + '</div>' +
  223. '<div class="lg-next lg-icon">' + this.s.nextHtml + '</div>' +
  224. '</div>';
  225. }
  226. if (this.s.appendSubHtmlTo === '.lg-sub-html') {
  227. subHtmlCont = '<div class="lg-sub-html"></div>';
  228. }
  229. template = '<div class="lg-outer ' + this.s.addClass + ' ' + this.s.startClass + '">' +
  230. '<div class="lg" style="width:' + this.s.width + '; height:' + this.s.height + '">' +
  231. '<div class="lg-inner">' + list + '</div>' +
  232. '<div class="lg-toolbar lg-group">' +
  233. '<span class="lg-close lg-icon"></span>' +
  234. '</div>' +
  235. controls +
  236. subHtmlCont +
  237. '</div>' +
  238. '</div>';
  239. $('body').append(template);
  240. this.$outer = $('.lg-outer');
  241. this.$slide = this.$outer.find('.lg-item');
  242. if (this.s.useLeft) {
  243. this.$outer.addClass('lg-use-left');
  244. // Set mode lg-slide if use left is true;
  245. this.s.mode = 'lg-slide';
  246. } else {
  247. this.$outer.addClass('lg-use-css3');
  248. }
  249. // For fixed height gallery
  250. _this.setTop();
  251. $(window).on('resize.lg orientationchange.lg', function() {
  252. setTimeout(function() {
  253. _this.setTop();
  254. }, 100);
  255. });
  256. // add class lg-current to remove initial transition
  257. this.$slide.eq(this.index).addClass('lg-current');
  258. // add Class for css support and transition mode
  259. if (this.doCss()) {
  260. this.$outer.addClass('lg-css3');
  261. } else {
  262. this.$outer.addClass('lg-css');
  263. // Set speed 0 because no animation will happen if browser doesn't support css3
  264. this.s.speed = 0;
  265. }
  266. this.$outer.addClass(this.s.mode);
  267. if (this.s.enableDrag && this.$items.length > 1) {
  268. this.$outer.addClass('lg-grab');
  269. }
  270. if (this.s.showAfterLoad) {
  271. this.$outer.addClass('lg-show-after-load');
  272. }
  273. if (this.doCss()) {
  274. var $inner = this.$outer.find('.lg-inner');
  275. $inner.css('transition-timing-function', this.s.cssEasing);
  276. $inner.css('transition-duration', this.s.speed + 'ms');
  277. }
  278. setTimeout(function() {
  279. $('.lg-backdrop').addClass('in');
  280. });
  281. setTimeout(function() {
  282. _this.$outer.addClass('lg-visible');
  283. }, this.s.backdropDuration);
  284. if (this.s.download) {
  285. this.$outer.find('.lg-toolbar').append('<a id="lg-download" target="_blank" download class="lg-download lg-icon"></a>');
  286. }
  287. // Store the current scroll top value to scroll back after closing the gallery..
  288. this.prevScrollTop = $(window).scrollTop();
  289. };
  290. // For fixed height gallery
  291. Plugin.prototype.setTop = function() {
  292. if (this.s.height !== '100%') {
  293. var wH = $(window).height();
  294. var top = (wH - parseInt(this.s.height, 10)) / 2;
  295. var $lGallery = this.$outer.find('.lg');
  296. if (wH >= parseInt(this.s.height, 10)) {
  297. $lGallery.css('top', top + 'px');
  298. } else {
  299. $lGallery.css('top', '0px');
  300. }
  301. }
  302. };
  303. // Find css3 support
  304. Plugin.prototype.doCss = function() {
  305. // check for css animation support
  306. var support = function() {
  307. var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition'];
  308. var root = document.documentElement;
  309. var i = 0;
  310. for (i = 0; i < transition.length; i++) {
  311. if (transition[i] in root.style) {
  312. return true;
  313. }
  314. }
  315. };
  316. if (support()) {
  317. return true;
  318. }
  319. return false;
  320. };
  321. /**
  322. * @desc Check the given src is video
  323. * @param {String} src
  324. * @return {Object} video type
  325. * Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
  326. */
  327. Plugin.prototype.isVideo = function(src, index) {
  328. var html;
  329. if (this.s.dynamic) {
  330. html = this.s.dynamicEl[index].html;
  331. } else {
  332. html = this.$items.eq(index).attr('data-html');
  333. }
  334. if (!src && html) {
  335. return {
  336. html5: true
  337. };
  338. }
  339. var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)/i);
  340. var vimeo = src.match(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i);
  341. var dailymotion = src.match(/\/\/(?:www\.)?dai.ly\/([0-9a-z\-_]+)/i);
  342. var vk = src.match(/\/\/(?:www\.)?(?:vk\.com|vkontakte\.ru)\/(?:video_ext\.php\?)(.*)/i);
  343. if (youtube) {
  344. return {
  345. youtube: youtube
  346. };
  347. } else if (vimeo) {
  348. return {
  349. vimeo: vimeo
  350. };
  351. } else if (dailymotion) {
  352. return {
  353. dailymotion: dailymotion
  354. };
  355. } else if (vk) {
  356. return {
  357. vk: vk
  358. };
  359. }
  360. };
  361. /**
  362. * @desc Create image counter
  363. * Ex: 1/10
  364. */
  365. Plugin.prototype.counter = function() {
  366. if (this.s.counter) {
  367. $(this.s.appendCounterTo).append('<div id="lg-counter"><span id="lg-counter-current">' + (parseInt(this.index, 10) + 1) + '</span> / <span id="lg-counter-all">' + this.$items.length + '</span></div>');
  368. }
  369. };
  370. /**
  371. * @desc add sub-html into the slide
  372. * @param {Number} index - index of the slide
  373. */
  374. Plugin.prototype.addHtml = function(index) {
  375. var subHtml = null;
  376. var subHtmlUrl;
  377. var $currentEle;
  378. if (this.s.dynamic) {
  379. if (this.s.dynamicEl[index].subHtmlUrl) {
  380. subHtmlUrl = this.s.dynamicEl[index].subHtmlUrl;
  381. } else {
  382. subHtml = this.s.dynamicEl[index].subHtml;
  383. }
  384. } else {
  385. $currentEle = this.$items.eq(index);
  386. if ($currentEle.attr('data-sub-html-url')) {
  387. subHtmlUrl = $currentEle.attr('data-sub-html-url');
  388. } else {
  389. subHtml = $currentEle.attr('data-sub-html');
  390. if (this.s.getCaptionFromTitleOrAlt && !subHtml) {
  391. subHtml = $currentEle.attr('title') || $currentEle.find('img').first().attr('alt');
  392. }
  393. }
  394. }
  395. if (!subHtmlUrl) {
  396. if (typeof subHtml !== 'undefined' && subHtml !== null) {
  397. // get first letter of subhtml
  398. // if first letter starts with . or # get the html form the jQuery object
  399. var fL = subHtml.substring(0, 1);
  400. if (fL === '.' || fL === '#') {
  401. if (this.s.subHtmlSelectorRelative && !this.s.dynamic) {
  402. subHtml = $currentEle.find(subHtml).html();
  403. } else {
  404. subHtml = $(subHtml).html();
  405. }
  406. }
  407. } else {
  408. subHtml = '';
  409. }
  410. }
  411. if (this.s.appendSubHtmlTo === '.lg-sub-html') {
  412. if (subHtmlUrl) {
  413. this.$outer.find(this.s.appendSubHtmlTo).load(subHtmlUrl);
  414. } else {
  415. this.$outer.find(this.s.appendSubHtmlTo).html(subHtml);
  416. }
  417. } else {
  418. if (subHtmlUrl) {
  419. this.$slide.eq(index).load(subHtmlUrl);
  420. } else {
  421. this.$slide.eq(index).append(subHtml);
  422. }
  423. }
  424. // Add lg-empty-html class if title doesn't exist
  425. if (typeof subHtml !== 'undefined' && subHtml !== null) {
  426. if (subHtml === '') {
  427. this.$outer.find(this.s.appendSubHtmlTo).addClass('lg-empty-html');
  428. } else {
  429. this.$outer.find(this.s.appendSubHtmlTo).removeClass('lg-empty-html');
  430. }
  431. }
  432. this.$el.trigger('onAfterAppendSubHtml.lg', [index]);
  433. };
  434. /**
  435. * @desc Preload slides
  436. * @param {Number} index - index of the slide
  437. */
  438. Plugin.prototype.preload = function(index) {
  439. var i = 1;
  440. var j = 1;
  441. for (i = 1; i <= this.s.preload; i++) {
  442. if (i >= this.$items.length - index) {
  443. break;
  444. }
  445. this.loadContent(index + i, false, 0);
  446. }
  447. for (j = 1; j <= this.s.preload; j++) {
  448. if (index - j < 0) {
  449. break;
  450. }
  451. this.loadContent(index - j, false, 0);
  452. }
  453. };
  454. /**
  455. * @desc Load slide content into slide.
  456. * @param {Number} index - index of the slide.
  457. * @param {Boolean} rec - if true call loadcontent() function again.
  458. * @param {Boolean} delay - delay for adding complete class. it is 0 except first time.
  459. */
  460. Plugin.prototype.loadContent = function(index, rec, delay) {
  461. var _this = this;
  462. var _hasPoster = false;
  463. var _$img;
  464. var _src;
  465. var _poster;
  466. var _srcset;
  467. var _sizes;
  468. var _html;
  469. var getResponsiveSrc = function(srcItms) {
  470. var rsWidth = [];
  471. var rsSrc = [];
  472. for (var i = 0; i < srcItms.length; i++) {
  473. var __src = srcItms[i].split(' ');
  474. // Manage empty space
  475. if (__src[0] === '') {
  476. __src.splice(0, 1);
  477. }
  478. rsSrc.push(__src[0]);
  479. rsWidth.push(__src[1]);
  480. }
  481. var wWidth = $(window).width();
  482. for (var j = 0; j < rsWidth.length; j++) {
  483. if (parseInt(rsWidth[j], 10) > wWidth) {
  484. _src = rsSrc[j];
  485. break;
  486. }
  487. }
  488. };
  489. if (_this.s.dynamic) {
  490. if (_this.s.dynamicEl[index].poster) {
  491. _hasPoster = true;
  492. _poster = _this.s.dynamicEl[index].poster;
  493. }
  494. _html = _this.s.dynamicEl[index].html;
  495. _src = _this.s.dynamicEl[index].src;
  496. if (_this.s.dynamicEl[index].responsive) {
  497. var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');
  498. getResponsiveSrc(srcDyItms);
  499. }
  500. _srcset = _this.s.dynamicEl[index].srcset;
  501. _sizes = _this.s.dynamicEl[index].sizes;
  502. } else {
  503. if (_this.$items.eq(index).attr('data-poster')) {
  504. _hasPoster = true;
  505. _poster = _this.$items.eq(index).attr('data-poster');
  506. }
  507. _html = _this.$items.eq(index).attr('data-html');
  508. _src = _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src');
  509. if (_this.$items.eq(index).attr('data-responsive')) {
  510. var srcItms = _this.$items.eq(index).attr('data-responsive').split(',');
  511. getResponsiveSrc(srcItms);
  512. }
  513. _srcset = _this.$items.eq(index).attr('data-srcset');
  514. _sizes = _this.$items.eq(index).attr('data-sizes');
  515. }
  516. //if (_src || _srcset || _sizes || _poster) {
  517. var iframe = false;
  518. if (_this.s.dynamic) {
  519. if (_this.s.dynamicEl[index].iframe) {
  520. iframe = true;
  521. }
  522. } else {
  523. if (_this.$items.eq(index).attr('data-iframe') === 'true') {
  524. iframe = true;
  525. }
  526. }
  527. var _isVideo = _this.isVideo(_src, index);
  528. if (!_this.$slide.eq(index).hasClass('lg-loaded')) {
  529. if (iframe) {
  530. _this.$slide.eq(index).prepend('<div class="lg-video-cont" style="max-width:' + _this.s.iframeMaxWidth + '"><div class="lg-video"><iframe class="lg-object" frameborder="0" src="' + _src + '" allowfullscreen="true"></iframe></div></div>');
  531. } else if (_hasPoster) {
  532. var videoClass = '';
  533. if (_isVideo && _isVideo.youtube) {
  534. videoClass = 'lg-has-youtube';
  535. } else if (_isVideo && _isVideo.vimeo) {
  536. videoClass = 'lg-has-vimeo';
  537. } else {
  538. videoClass = 'lg-has-html5';
  539. }
  540. _this.$slide.eq(index).prepend('<div class="lg-video-cont ' + videoClass + ' "><div class="lg-video"><span class="lg-video-play"></span><img class="lg-object lg-has-poster" src="' + _poster + '" /></div></div>');
  541. } else if (_isVideo) {
  542. _this.$slide.eq(index).prepend('<div class="lg-video-cont "><div class="lg-video"></div></div>');
  543. _this.$el.trigger('hasVideo.lg', [index, _src, _html]);
  544. } else {
  545. _this.$slide.eq(index).prepend('<div class="lg-img-wrap"><img class="lg-object lg-image" src="' + _src + '" /></div>');
  546. }
  547. _this.$el.trigger('onAferAppendSlide.lg', [index]);
  548. _$img = _this.$slide.eq(index).find('.lg-object');
  549. if (_sizes) {
  550. _$img.attr('sizes', _sizes);
  551. }
  552. if (_srcset) {
  553. _$img.attr('srcset', _srcset);
  554. try {
  555. picturefill({
  556. elements: [_$img[0]]
  557. });
  558. } catch (e) {
  559. console.error('Make sure you have included Picturefill version 2');
  560. }
  561. }
  562. if (this.s.appendSubHtmlTo !== '.lg-sub-html') {
  563. _this.addHtml(index);
  564. }
  565. _this.$slide.eq(index).addClass('lg-loaded');
  566. }
  567. _this.$slide.eq(index).find('.lg-object').on('load.lg error.lg', function() {
  568. // For first time add some delay for displaying the start animation.
  569. var _speed = 0;
  570. // Do not change the delay value because it is required for zoom plugin.
  571. // If gallery opened from direct url (hash) speed value should be 0
  572. if (delay && !$('body').hasClass('lg-from-hash')) {
  573. _speed = delay;
  574. }
  575. setTimeout(function() {
  576. _this.$slide.eq(index).addClass('lg-complete');
  577. _this.$el.trigger('onSlideItemLoad.lg', [index, delay || 0]);
  578. }, _speed);
  579. });
  580. // @todo check load state for html5 videos
  581. if (_isVideo && _isVideo.html5 && !_hasPoster) {
  582. _this.$slide.eq(index).addClass('lg-complete');
  583. }
  584. if (rec === true) {
  585. if (!_this.$slide.eq(index).hasClass('lg-complete')) {
  586. _this.$slide.eq(index).find('.lg-object').on('load.lg error.lg', function() {
  587. _this.preload(index);
  588. });
  589. } else {
  590. _this.preload(index);
  591. }
  592. }
  593. //}
  594. };
  595. /**
  596. * @desc slide function for lightgallery
  597. ** Slide() gets call on start
  598. ** ** Set lg.on true once slide() function gets called.
  599. ** Call loadContent() on slide() function inside setTimeout
  600. ** ** On first slide we do not want any animation like slide of fade
  601. ** ** So on first slide( if lg.on if false that is first slide) loadContent() should start loading immediately
  602. ** ** Else loadContent() should wait for the transition to complete.
  603. ** ** So set timeout s.speed + 50
  604. <=> ** loadContent() will load slide content in to the particular slide
  605. ** ** It has recursion (rec) parameter. if rec === true loadContent() will call preload() function.
  606. ** ** preload will execute only when the previous slide is fully loaded (images iframe)
  607. ** ** avoid simultaneous image load
  608. <=> ** Preload() will check for s.preload value and call loadContent() again accoring to preload value
  609. ** loadContent() <====> Preload();
  610. * @param {Number} index - index of the slide
  611. * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
  612. * @param {Boolean} fromThumb - true if slide function called via thumbnail click
  613. * @param {String} direction - Direction of the slide(next/prev)
  614. */
  615. Plugin.prototype.slide = function(index, fromTouch, fromThumb, direction) {
  616. var _prevIndex = this.$outer.find('.lg-current').index();
  617. var _this = this;
  618. // Prevent if multiple call
  619. // Required for hsh plugin
  620. if (_this.lGalleryOn && (_prevIndex === index)) {
  621. return;
  622. }
  623. var _length = this.$slide.length;
  624. var _time = _this.lGalleryOn ? this.s.speed : 0;
  625. if (!_this.lgBusy) {
  626. if (this.s.download) {
  627. var _src;
  628. if (_this.s.dynamic) {
  629. _src = _this.s.dynamicEl[index].downloadUrl !== false && (_this.s.dynamicEl[index].downloadUrl || _this.s.dynamicEl[index].src);
  630. } else {
  631. _src = _this.$items.eq(index).attr('data-download-url') !== 'false' && (_this.$items.eq(index).attr('data-download-url') || _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src'));
  632. }
  633. if (_src) {
  634. $('#lg-download').attr('href', _src);
  635. _this.$outer.removeClass('lg-hide-download');
  636. } else {
  637. _this.$outer.addClass('lg-hide-download');
  638. }
  639. }
  640. this.$el.trigger('onBeforeSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
  641. _this.lgBusy = true;
  642. clearTimeout(_this.hideBartimeout);
  643. // Add title if this.s.appendSubHtmlTo === lg-sub-html
  644. if (this.s.appendSubHtmlTo === '.lg-sub-html') {
  645. // wait for slide animation to complete
  646. setTimeout(function() {
  647. _this.addHtml(index);
  648. }, _time);
  649. }
  650. this.arrowDisable(index);
  651. if (!direction) {
  652. if (index < _prevIndex) {
  653. direction = 'prev';
  654. } else if (index > _prevIndex) {
  655. direction = 'next';
  656. }
  657. }
  658. if (!fromTouch) {
  659. // remove all transitions
  660. _this.$outer.addClass('lg-no-trans');
  661. this.$slide.removeClass('lg-prev-slide lg-next-slide');
  662. if (direction === 'prev') {
  663. //prevslide
  664. this.$slide.eq(index).addClass('lg-prev-slide');
  665. this.$slide.eq(_prevIndex).addClass('lg-next-slide');
  666. } else {
  667. // next slide
  668. this.$slide.eq(index).addClass('lg-next-slide');
  669. this.$slide.eq(_prevIndex).addClass('lg-prev-slide');
  670. }
  671. // give 50 ms for browser to add/remove class
  672. setTimeout(function() {
  673. _this.$slide.removeClass('lg-current');
  674. //_this.$slide.eq(_prevIndex).removeClass('lg-current');
  675. _this.$slide.eq(index).addClass('lg-current');
  676. // reset all transitions
  677. _this.$outer.removeClass('lg-no-trans');
  678. }, 50);
  679. } else {
  680. this.$slide.removeClass('lg-prev-slide lg-current lg-next-slide');
  681. var touchPrev;
  682. var touchNext;
  683. if (_length > 2) {
  684. touchPrev = index - 1;
  685. touchNext = index + 1;
  686. if ((index === 0) && (_prevIndex === _length - 1)) {
  687. // next slide
  688. touchNext = 0;
  689. touchPrev = _length - 1;
  690. } else if ((index === _length - 1) && (_prevIndex === 0)) {
  691. // prev slide
  692. touchNext = 0;
  693. touchPrev = _length - 1;
  694. }
  695. } else {
  696. touchPrev = 0;
  697. touchNext = 1;
  698. }
  699. if (direction === 'prev') {
  700. _this.$slide.eq(touchNext).addClass('lg-next-slide');
  701. } else {
  702. _this.$slide.eq(touchPrev).addClass('lg-prev-slide');
  703. }
  704. _this.$slide.eq(index).addClass('lg-current');
  705. }
  706. if (_this.lGalleryOn) {
  707. setTimeout(function() {
  708. _this.loadContent(index, true, 0);
  709. }, this.s.speed + 50);
  710. setTimeout(function() {
  711. _this.lgBusy = false;
  712. _this.$el.trigger('onAfterSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
  713. }, this.s.speed);
  714. } else {
  715. _this.loadContent(index, true, _this.s.backdropDuration);
  716. _this.lgBusy = false;
  717. _this.$el.trigger('onAfterSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
  718. }
  719. _this.lGalleryOn = true;
  720. if (this.s.counter) {
  721. $('#lg-counter-current').text(index + 1);
  722. }
  723. }
  724. };
  725. /**
  726. * @desc Go to next slide
  727. * @param {Boolean} fromTouch - true if slide function called via touch event
  728. */
  729. Plugin.prototype.goToNextSlide = function(fromTouch) {
  730. var _this = this;
  731. var _loop = _this.s.loop;
  732. if (fromTouch && _this.$slide.length < 3) {
  733. _loop = false;
  734. }
  735. if (!_this.lgBusy) {
  736. if ((_this.index + 1) < _this.$slide.length) {
  737. _this.index++;
  738. _this.$el.trigger('onBeforeNextSlide.lg', [_this.index]);
  739. _this.slide(_this.index, fromTouch, false, 'next');
  740. } else {
  741. if (_loop) {
  742. _this.index = 0;
  743. _this.$el.trigger('onBeforeNextSlide.lg', [_this.index]);
  744. _this.slide(_this.index, fromTouch, false, 'next');
  745. } else if (_this.s.slideEndAnimatoin && !fromTouch) {
  746. _this.$outer.addClass('lg-right-end');
  747. setTimeout(function() {
  748. _this.$outer.removeClass('lg-right-end');
  749. }, 400);
  750. }
  751. }
  752. }
  753. };
  754. /**
  755. * @desc Go to previous slide
  756. * @param {Boolean} fromTouch - true if slide function called via touch event
  757. */
  758. Plugin.prototype.goToPrevSlide = function(fromTouch) {
  759. var _this = this;
  760. var _loop = _this.s.loop;
  761. if (fromTouch && _this.$slide.length < 3) {
  762. _loop = false;
  763. }
  764. if (!_this.lgBusy) {
  765. if (_this.index > 0) {
  766. _this.index--;
  767. _this.$el.trigger('onBeforePrevSlide.lg', [_this.index, fromTouch]);
  768. _this.slide(_this.index, fromTouch, false, 'prev');
  769. } else {
  770. if (_loop) {
  771. _this.index = _this.$items.length - 1;
  772. _this.$el.trigger('onBeforePrevSlide.lg', [_this.index, fromTouch]);
  773. _this.slide(_this.index, fromTouch, false, 'prev');
  774. } else if (_this.s.slideEndAnimatoin && !fromTouch) {
  775. _this.$outer.addClass('lg-left-end');
  776. setTimeout(function() {
  777. _this.$outer.removeClass('lg-left-end');
  778. }, 400);
  779. }
  780. }
  781. }
  782. };
  783. Plugin.prototype.keyPress = function() {
  784. var _this = this;
  785. if (this.$items.length > 1) {
  786. $(window).on('keyup.lg', function(e) {
  787. if (_this.$items.length > 1) {
  788. if (e.keyCode === 37) {
  789. e.preventDefault();
  790. _this.goToPrevSlide();
  791. }
  792. if (e.keyCode === 39) {
  793. e.preventDefault();
  794. _this.goToNextSlide();
  795. }
  796. }
  797. });
  798. }
  799. $(window).on('keydown.lg', function(e) {
  800. if (_this.s.escKey === true && e.keyCode === 27) {
  801. e.preventDefault();
  802. if (!_this.$outer.hasClass('lg-thumb-open')) {
  803. _this.destroy();
  804. } else {
  805. _this.$outer.removeClass('lg-thumb-open');
  806. }
  807. }
  808. });
  809. };
  810. Plugin.prototype.arrow = function() {
  811. var _this = this;
  812. this.$outer.find('.lg-prev').on('click.lg', function() {
  813. _this.goToPrevSlide();
  814. });
  815. this.$outer.find('.lg-next').on('click.lg', function() {
  816. _this.goToNextSlide();
  817. });
  818. };
  819. Plugin.prototype.arrowDisable = function(index) {
  820. // Disable arrows if s.hideControlOnEnd is true
  821. if (!this.s.loop && this.s.hideControlOnEnd) {
  822. if ((index + 1) < this.$slide.length) {
  823. this.$outer.find('.lg-next').removeAttr('disabled').removeClass('disabled');
  824. } else {
  825. this.$outer.find('.lg-next').attr('disabled', 'disabled').addClass('disabled');
  826. }
  827. if (index > 0) {
  828. this.$outer.find('.lg-prev').removeAttr('disabled').removeClass('disabled');
  829. } else {
  830. this.$outer.find('.lg-prev').attr('disabled', 'disabled').addClass('disabled');
  831. }
  832. }
  833. };
  834. Plugin.prototype.setTranslate = function($el, xValue, yValue) {
  835. // jQuery supports Automatic CSS prefixing since jQuery 1.8.0
  836. if (this.s.useLeft) {
  837. $el.css('left', xValue);
  838. } else {
  839. $el.css({
  840. transform: 'translate3d(' + (xValue) + 'px, ' + yValue + 'px, 0px)'
  841. });
  842. }
  843. };
  844. Plugin.prototype.touchMove = function(startCoords, endCoords) {
  845. var distance = endCoords - startCoords;
  846. if (Math.abs(distance) > 15) {
  847. // reset opacity and transition duration
  848. this.$outer.addClass('lg-dragging');
  849. // move current slide
  850. this.setTranslate(this.$slide.eq(this.index), distance, 0);
  851. // move next and prev slide with current slide
  852. this.setTranslate($('.lg-prev-slide'), -this.$slide.eq(this.index).width() + distance, 0);
  853. this.setTranslate($('.lg-next-slide'), this.$slide.eq(this.index).width() + distance, 0);
  854. }
  855. };
  856. Plugin.prototype.touchEnd = function(distance) {
  857. var _this = this;
  858. // keep slide animation for any mode while dragg/swipe
  859. if (_this.s.mode !== 'lg-slide') {
  860. _this.$outer.addClass('lg-slide');
  861. }
  862. this.$slide.not('.lg-current, .lg-prev-slide, .lg-next-slide').css('opacity', '0');
  863. // set transition duration
  864. setTimeout(function() {
  865. _this.$outer.removeClass('lg-dragging');
  866. if ((distance < 0) && (Math.abs(distance) > _this.s.swipeThreshold)) {
  867. _this.goToNextSlide(true);
  868. } else if ((distance > 0) && (Math.abs(distance) > _this.s.swipeThreshold)) {
  869. _this.goToPrevSlide(true);
  870. } else if (Math.abs(distance) < 5) {
  871. // Trigger click if distance is less than 5 pix
  872. _this.$el.trigger('onSlideClick.lg');
  873. }
  874. _this.$slide.removeAttr('style');
  875. });
  876. // remove slide class once drag/swipe is completed if mode is not slide
  877. setTimeout(function() {
  878. if (!_this.$outer.hasClass('lg-dragging') && _this.s.mode !== 'lg-slide') {
  879. _this.$outer.removeClass('lg-slide');
  880. }
  881. }, _this.s.speed + 100);
  882. };
  883. Plugin.prototype.enableSwipe = function() {
  884. var _this = this;
  885. var startCoords = 0;
  886. var endCoords = 0;
  887. var isMoved = false;
  888. if (_this.s.enableSwipe && _this.isTouch && _this.doCss()) {
  889. _this.$slide.on('touchstart.lg', function(e) {
  890. if (!_this.$outer.hasClass('lg-zoomed') && !_this.lgBusy) {
  891. e.preventDefault();
  892. _this.manageSwipeClass();
  893. startCoords = e.originalEvent.targetTouches[0].pageX;
  894. }
  895. });
  896. _this.$slide.on('touchmove.lg', function(e) {
  897. if (!_this.$outer.hasClass('lg-zoomed')) {
  898. e.preventDefault();
  899. endCoords = e.originalEvent.targetTouches[0].pageX;
  900. _this.touchMove(startCoords, endCoords);
  901. isMoved = true;
  902. }
  903. });
  904. _this.$slide.on('touchend.lg', function() {
  905. if (!_this.$outer.hasClass('lg-zoomed')) {
  906. if (isMoved) {
  907. isMoved = false;
  908. _this.touchEnd(endCoords - startCoords);
  909. } else {
  910. _this.$el.trigger('onSlideClick.lg');
  911. }
  912. }
  913. });
  914. }
  915. };
  916. Plugin.prototype.enableDrag = function() {
  917. var _this = this;
  918. var startCoords = 0;
  919. var endCoords = 0;
  920. var isDraging = false;
  921. var isMoved = false;
  922. if (_this.s.enableDrag && !_this.isTouch && _this.doCss()) {
  923. _this.$slide.on('mousedown.lg', function(e) {
  924. // execute only on .lg-object
  925. if (!_this.$outer.hasClass('lg-zoomed')) {
  926. if ($(e.target).hasClass('lg-object') || $(e.target).hasClass('lg-video-play')) {
  927. e.preventDefault();
  928. if (!_this.lgBusy) {
  929. _this.manageSwipeClass();
  930. startCoords = e.pageX;
  931. isDraging = true;
  932. // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
  933. _this.$outer.scrollLeft += 1;
  934. _this.$outer.scrollLeft -= 1;
  935. // *
  936. _this.$outer.removeClass('lg-grab').addClass('lg-grabbing');
  937. _this.$el.trigger('onDragstart.lg');
  938. }
  939. }
  940. }
  941. });
  942. $(window).on('mousemove.lg', function(e) {
  943. if (isDraging) {
  944. isMoved = true;
  945. endCoords = e.pageX;
  946. _this.touchMove(startCoords, endCoords);
  947. _this.$el.trigger('onDragmove.lg');
  948. }
  949. });
  950. $(window).on('mouseup.lg', function(e) {
  951. if (isMoved) {
  952. isMoved = false;
  953. _this.touchEnd(endCoords - startCoords);
  954. _this.$el.trigger('onDragend.lg');
  955. } else if ($(e.target).hasClass('lg-object') || $(e.target).hasClass('lg-video-play')) {
  956. _this.$el.trigger('onSlideClick.lg');
  957. }
  958. // Prevent execution on click
  959. if (isDraging) {
  960. isDraging = false;
  961. _this.$outer.removeClass('lg-grabbing').addClass('lg-grab');
  962. }
  963. });
  964. }
  965. };
  966. Plugin.prototype.manageSwipeClass = function() {
  967. var _touchNext = this.index + 1;
  968. var _touchPrev = this.index - 1;
  969. if (this.s.loop && this.$slide.length > 2) {
  970. if (this.index === 0) {
  971. _touchPrev = this.$slide.length - 1;
  972. } else if (this.index === this.$slide.length - 1) {
  973. _touchNext = 0;
  974. }
  975. }
  976. this.$slide.removeClass('lg-next-slide lg-prev-slide');
  977. if (_touchPrev > -1) {
  978. this.$slide.eq(_touchPrev).addClass('lg-prev-slide');
  979. }
  980. this.$slide.eq(_touchNext).addClass('lg-next-slide');
  981. };
  982. Plugin.prototype.mousewheel = function() {
  983. var _this = this;
  984. _this.$outer.on('mousewheel.lg', function(e) {
  985. if (!e.deltaY) {
  986. return;
  987. }
  988. if (e.deltaY > 0) {
  989. _this.goToPrevSlide();
  990. } else {
  991. _this.goToNextSlide();
  992. }
  993. e.preventDefault();
  994. });
  995. };
  996. Plugin.prototype.closeGallery = function() {
  997. var _this = this;
  998. var mousedown = false;
  999. this.$outer.find('.lg-close').on('click.lg', function() {
  1000. _this.destroy();
  1001. });
  1002. if (_this.s.closable) {
  1003. // If you drag the slide and release outside gallery gets close on chrome
  1004. // for preventing this check mousedown and mouseup happened on .lg-item or lg-outer
  1005. _this.$outer.on('mousedown.lg', function(e) {
  1006. if ($(e.target).is('.lg-outer') || $(e.target).is('.lg-item ') || $(e.target).is('.lg-img-wrap')) {
  1007. mousedown = true;
  1008. } else {
  1009. mousedown = false;
  1010. }
  1011. });
  1012. _this.$outer.on('mouseup.lg', function(e) {
  1013. if ($(e.target).is('.lg-outer') || $(e.target).is('.lg-item ') || $(e.target).is('.lg-img-wrap') && mousedown) {
  1014. if (!_this.$outer.hasClass('lg-dragging')) {
  1015. _this.destroy();
  1016. }
  1017. }
  1018. });
  1019. }
  1020. };
  1021. Plugin.prototype.destroy = function(d) {
  1022. var _this = this;
  1023. if (!d) {
  1024. _this.$el.trigger('onBeforeClose.lg');
  1025. $(window).scrollTop(_this.prevScrollTop);
  1026. }
  1027. /**
  1028. * if d is false or undefined destroy will only close the gallery
  1029. * plugins instance remains with the element
  1030. *
  1031. * if d is true destroy will completely remove the plugin
  1032. */
  1033. if (d) {
  1034. if (!_this.s.dynamic) {
  1035. // only when not using dynamic mode is $items a jquery collection
  1036. this.$items.off('click.lg click.lgcustom');
  1037. }
  1038. $.removeData(_this.el, 'lightGallery');
  1039. }
  1040. // Unbind all events added by lightGallery
  1041. this.$el.off('.lg.tm');
  1042. // Distroy all lightGallery modules
  1043. $.each($.fn.lightGallery.modules, function(key) {
  1044. if (_this.modules[key]) {
  1045. _this.modules[key].destroy();
  1046. }
  1047. });
  1048. this.lGalleryOn = false;
  1049. clearTimeout(_this.hideBartimeout);
  1050. this.hideBartimeout = false;
  1051. $(window).off('.lg');
  1052. $('body').removeClass('lg-on lg-from-hash');
  1053. if (_this.$outer) {
  1054. _this.$outer.removeClass('lg-visible');
  1055. }
  1056. $('.lg-backdrop').removeClass('in');
  1057. setTimeout(function() {
  1058. if (_this.$outer) {
  1059. _this.$outer.remove();
  1060. }
  1061. $('.lg-backdrop').remove();
  1062. if (!d) {
  1063. _this.$el.trigger('onCloseAfter.lg');
  1064. }
  1065. }, _this.s.backdropDuration + 50);
  1066. };
  1067. $.fn.lightGallery = function(options) {
  1068. return this.each(function() {
  1069. if (!$.data(this, 'lightGallery')) {
  1070. $.data(this, 'lightGallery', new Plugin(this, options));
  1071. } else {
  1072. try {
  1073. $(this).data('lightGallery').init();
  1074. } catch (err) {
  1075. console.error('lightGallery has not initiated properly');
  1076. }
  1077. }
  1078. });
  1079. };
  1080. $.fn.lightGallery.modules = {};
  1081. })();
  1082. }));