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

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);