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.
83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
5 years ago
|
(function($, window, document, undefined) {
|
||
|
|
|
||
|
|
'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, 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;
|
||
|
|
|
||
|
|
})(jQuery, window, document);
|