lg-pager.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /*! lg-pager - v1.0.2 - 2017-01-22
  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(jQuery);
  17. }
  18. }(this, function ($) {
  19. (function() {
  20. 'use strict';
  21. var defaults = {
  22. pager: false
  23. };
  24. var Pager = function(element) {
  25. this.core = $(element).data('lightGallery');
  26. this.$el = $(element);
  27. this.core.s = $.extend({}, defaults, this.core.s);
  28. if (this.core.s.pager && this.core.$items.length > 1) {
  29. this.init();
  30. }
  31. return this;
  32. };
  33. Pager.prototype.init = function() {
  34. var _this = this;
  35. var pagerList = '';
  36. var $pagerCont;
  37. var $pagerOuter;
  38. var timeout;
  39. _this.core.$outer.find('.lg').append('<div class="lg-pager-outer"></div>');
  40. if (_this.core.s.dynamic) {
  41. for (var i = 0; i < _this.core.s.dynamicEl.length; i++) {
  42. pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + _this.core.s.dynamicEl[i].thumb + '" /></div></span>';
  43. }
  44. } else {
  45. _this.core.$items.each(function() {
  46. if (!_this.core.s.exThumbImage) {
  47. pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + $(this).find('img').attr('src') + '" /></div></span>';
  48. } else {
  49. pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + $(this).attr(_this.core.s.exThumbImage) + '" /></div></span>';
  50. }
  51. });
  52. }
  53. $pagerOuter = _this.core.$outer.find('.lg-pager-outer');
  54. $pagerOuter.html(pagerList);
  55. $pagerCont = _this.core.$outer.find('.lg-pager-cont');
  56. $pagerCont.on('click.lg touchend.lg', function() {
  57. var _$this = $(this);
  58. _this.core.index = _$this.index();
  59. _this.core.slide(_this.core.index, false, true, false);
  60. });
  61. $pagerOuter.on('mouseover.lg', function() {
  62. clearTimeout(timeout);
  63. $pagerOuter.addClass('lg-pager-hover');
  64. });
  65. $pagerOuter.on('mouseout.lg', function() {
  66. timeout = setTimeout(function() {
  67. $pagerOuter.removeClass('lg-pager-hover');
  68. });
  69. });
  70. _this.core.$el.on('onBeforeSlide.lg.tm', function(e, prevIndex, index) {
  71. $pagerCont.removeClass('lg-pager-active');
  72. $pagerCont.eq(index).addClass('lg-pager-active');
  73. });
  74. };
  75. Pager.prototype.destroy = function() {
  76. };
  77. $.fn.lightGallery.modules.pager = Pager;
  78. })();
  79. }));