You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.3 KiB
JavaScript
106 lines
3.3 KiB
JavaScript
/*! lg-pager - v1.0.2 - 2017-01-22
|
|
* http://sachinchoolur.github.io/lightGallery
|
|
* Copyright (c) 2017 Sachin N; Licensed GPLv3 */
|
|
|
|
(function (root, factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
// AMD. Register as an anonymous module unless amdModuleId is set
|
|
define(['jquery'], function (a0) {
|
|
return (factory(a0));
|
|
});
|
|
} else if (typeof exports === 'object') {
|
|
// Node. Does not work with strict CommonJS, but
|
|
// only CommonJS-like environments that support module.exports,
|
|
// like Node.
|
|
module.exports = factory(require('jquery'));
|
|
} else {
|
|
factory(jQuery);
|
|
}
|
|
}(this, function ($) {
|
|
|
|
(function() {
|
|
|
|
'use strict';
|
|
|
|
var defaults = {
|
|
pager: false
|
|
};
|
|
|
|
var Pager = function(element) {
|
|
|
|
this.core = $(element).data('lightGallery');
|
|
|
|
this.$el = $(element);
|
|
this.core.s = $.extend({}, defaults, this.core.s);
|
|
if (this.core.s.pager && this.core.$items.length > 1) {
|
|
this.init();
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
Pager.prototype.init = function() {
|
|
var _this = this;
|
|
var pagerList = '';
|
|
var $pagerCont;
|
|
var $pagerOuter;
|
|
var timeout;
|
|
|
|
_this.core.$outer.find('.lg').append('<div class="lg-pager-outer"></div>');
|
|
|
|
if (_this.core.s.dynamic) {
|
|
for (var i = 0; i < _this.core.s.dynamicEl.length; i++) {
|
|
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>';
|
|
}
|
|
} else {
|
|
_this.core.$items.each(function() {
|
|
|
|
if (!_this.core.s.exThumbImage) {
|
|
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>';
|
|
} else {
|
|
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>';
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
$pagerOuter = _this.core.$outer.find('.lg-pager-outer');
|
|
|
|
$pagerOuter.html(pagerList);
|
|
|
|
$pagerCont = _this.core.$outer.find('.lg-pager-cont');
|
|
$pagerCont.on('click.lg touchend.lg', function() {
|
|
var _$this = $(this);
|
|
_this.core.index = _$this.index();
|
|
_this.core.slide(_this.core.index, false, true, false);
|
|
});
|
|
|
|
$pagerOuter.on('mouseover.lg', function() {
|
|
clearTimeout(timeout);
|
|
$pagerOuter.addClass('lg-pager-hover');
|
|
});
|
|
|
|
$pagerOuter.on('mouseout.lg', function() {
|
|
timeout = setTimeout(function() {
|
|
$pagerOuter.removeClass('lg-pager-hover');
|
|
});
|
|
});
|
|
|
|
_this.core.$el.on('onBeforeSlide.lg.tm', function(e, prevIndex, index) {
|
|
$pagerCont.removeClass('lg-pager-active');
|
|
$pagerCont.eq(index).addClass('lg-pager-active');
|
|
});
|
|
|
|
};
|
|
|
|
Pager.prototype.destroy = function() {
|
|
|
|
};
|
|
|
|
$.fn.lightGallery.modules.pager = Pager;
|
|
|
|
})();
|
|
|
|
|
|
}));
|