/*! lightgallery - v1.2.0 - 2015-08-26
* http://sachinchoolur.github.io/lightgallery/
* copyright (c) 2015 sachin n; licensed apache 2.0 */
(function($, window, document, undefined) {
'use strict';
var defaults = {
thumbnail: true,
animatethumb: true,
currentpagerposition: 'middle',
thumbwidth: 100,
thumbcontheight: 100,
thumbmargin: 5,
exthumbimage: false,
showthumbbydefault: true,
tooglethumb: true,
enablethumbdrag: true,
enablethumbswipe: true,
swipethreshold: 50,
loadyoutubethumbnail: true,
youtubethumbsize: 1,
loadvimeothumbnail: true,
vimeothumbsize: 'thumbnail_small'
};
var thumbnail = function(element) {
// get lightgallery core plugin data
this.core = $(element).data('lightgallery');
// extend module default settings with lightgallery core settings
this.core.s = $.extend({}, defaults, this.core.s);
this.$el = $(element);
this.$thumbouter = null;
this.thumbouterwidth = 0;
this.thumbtotalwidth = (this.core.$items.length * (this.core.s.thumbwidth + this.core.s.thumbmargin));
this.thumbindex = this.core.index;
// thumbnail animation value
this.left = 0;
this.init();
return this;
};
thumbnail.prototype.init = function() {
if (this.core.s.thumbnail && this.core.$items.length > 1) {
if (this.core.s.showthumbbydefault) {
this.core.$outer.addclass('lg-thumb-open');
}
this.build();
if (this.core.s.animatethumb) {
if (this.core.s.enablethumbdrag && !this.core.istouch && this.core.docss()) {
this.enablethumbdrag();
}
if (this.core.s.enablethumbswipe && this.core.istouch && this.core.docss()) {
this.enablethumbswipe();
}
this.thumbclickable = false;
} else {
this.thumbclickable = true;
}
this.toogle();
this.thumbkeypress();
}
};
thumbnail.prototype.build = function() {
var _this = this;
var thumblist = '';
var viemoerrorthumbsize = '';
var $thumb;
var html = '
';
switch (this.core.s.vimeothumbsize) {
case 'thumbnail_large':
viemoerrorthumbsize = '640';
break;
case 'thumbnail_medium':
viemoerrorthumbsize = '200x150';
break;
case 'thumbnail_small':
viemoerrorthumbsize = '100x75';
}
_this.core.$outer.addclass('lg-has-thumb');
_this.core.$outer.find('.lg').append(html);
_this.$thumbouter = _this.core.$outer.find('.lg-thumb-outer');
_this.thumbouterwidth = _this.$thumbouter.width();
if (_this.core.s.animatethumb) {
_this.core.$outer.find('.lg-thumb').css({
width: _this.thumbtotalwidth + 'px',
position: 'relative'
});
}
if (this.core.s.animatethumb) {
_this.$thumbouter.css('height', _this.core.s.thumbcontheight + 'px');
}
function getthumb(src, thumb, index) {
var isvideo = _this.core.isvideo(src, index) || {};
var thumbimg;
var vimeoid = '';
if (isvideo.youtube || isvideo.vimeo) {
if (isvideo.youtube) {
if (_this.core.s.loadyoutubethumbnail) {
thumbimg = 'http://img.youtube.com/vi/' + isvideo.youtube[1] + '/' + _this.core.s.youtubethumbsize + '.jpg';
} else {
thumbimg = thumb;
}
} else if (isvideo.vimeo) {
if (_this.core.s.loadvimeothumbnail) {
thumbimg = 'https://i.vimeocdn.com/video/error_' + viemoerrorthumbsize + '.jpg';
vimeoid = isvideo.vimeo[1];
} else {
thumbimg = thumb;
}
}
} else {
thumbimg = thumb;
}
thumblist += '';
vimeoid = '';
}
if (_this.core.s.dynamic) {
for (var i = 0; i < _this.core.s.dynamicel.length; i++) {
getthumb(_this.core.s.dynamicel[i].src, _this.core.s.dynamicel[i].thumb, i);
}
} else {
_this.core.$items.each(function(i) {
if (!_this.core.s.exthumbimage) {
getthumb($(this).attr('href') || $(this).attr('data-src'), $(this).find('img').attr('src'), i);
} else {
getthumb($(this).attr('href') || $(this).attr('data-src'), $(this).attr(_this.core.s.exthumbimage), i);
}
});
}
_this.core.$outer.find('.lg-thumb').html(thumblist);
$thumb = _this.core.$outer.find('.lg-thumb-item');
// load vimeo thumbnails
$thumb.each(function() {
var $this = $(this);
var vimeovideoid = $this.attr('data-vimoe-id');
if (vimeovideoid) {
$.getjson('http://www.vimeo.com/api/v2/video/' + vimeovideoid + '.json?callback=?', {
format: 'json'
}, function(data) {
$this.find('img').attr('src', data[0][_this.core.s.vimeothumbsize]);
});
}
});
// manage active class for thumbnail
$thumb.eq(_this.core.index).addclass('active');
_this.core.$el.on('onbeforeslide.lg.tm', function() {
$thumb.removeclass('active');
$thumb.eq(_this.core.index).addclass('active');
});
$thumb.on('click.lg touchend.lg', function() {
var _$this = $(this);
settimeout(function() {
// in ie9 and bellow touch does not support
// go to slide if browser does not support css transitions
if ((_this.thumbclickable && !_this.core.lgbusy) || !_this.core.docss()) {
_this.core.index = _$this.index();
_this.core.slide(_this.core.index, false, true);
}
}, 50);
});
_this.core.$el.on('onbeforeslide.lg.tm', function() {
_this.animatethumb(_this.core.index);
});
$(window).on('resize.lg.thumb orientationchange.lg.thumb', function() {
settimeout(function() {
_this.animatethumb(_this.core.index);
_this.thumbouterwidth = _this.$thumbouter.width();
}, 200);
});
};
thumbnail.prototype.settranslate = function(value) {
// jquery supports automatic css prefixing since jquery 1.8.0
this.core.$outer.find('.lg-thumb').css({
transform: 'translate3d(-' + (value) + 'px, 0px, 0px)'
});
};
thumbnail.prototype.animatethumb = function(index) {
var $thumb = this.core.$outer.find('.lg-thumb');
if (this.core.s.animatethumb) {
var position;
switch (this.core.s.currentpagerposition) {
case 'left':
position = 0;
break;
case 'middle':
position = (this.thumbouterwidth / 2) - (this.core.s.thumbwidth / 2);
break;
case 'right':
position = this.thumbouterwidth - this.core.s.thumbwidth;
}
this.left = ((this.core.s.thumbwidth + this.core.s.thumbmargin) * index - 1) - position;
if (this.left > (this.thumbtotalwidth - this.thumbouterwidth)) {
this.left = this.thumbtotalwidth - this.thumbouterwidth;
}
if (this.left < 0) {
this.left = 0;
}
if (this.core.lgalleryon) {
if (!$thumb.hasclass('on')) {
this.core.$outer.find('.lg-thumb').css('transition-duration', this.core.s.speed + 'ms');
}
if (!this.core.docss()) {
$thumb.animate({
left: -this.left + 'px'
}, this.core.s.speed);
}
} else {
if (!this.core.docss()) {
$thumb.css('left', -this.left + 'px');
}
}
this.settranslate(this.left);
}
};
// enable thumbnail dragging and swiping
thumbnail.prototype.enablethumbdrag = function() {
var _this = this;
var startcoords = 0;
var endcoords = 0;
var isdraging = false;
var ismoved = false;
var templeft = 0;
_this.$thumbouter.addclass('lg-grab');
_this.core.$outer.find('.lg-thumb').on('mousedown.lg.thumb', function(e) {
if (_this.thumbtotalwidth > _this.thumbouterwidth) {
// execute only on .lg-object
e.preventdefault();
startcoords = e.pagex;
isdraging = true;
// ** fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
_this.core.$outer.scrollleft += 1;
_this.core.$outer.scrollleft -= 1;
// *
_this.thumbclickable = false;
_this.$thumbouter.removeclass('lg-grab').addclass('lg-grabbing');
}
});
$(window).on('mousemove.lg.thumb', function(e) {
if (isdraging) {
templeft = _this.left;
ismoved = true;
endcoords = e.pagex;
_this.$thumbouter.addclass('lg-dragging');
templeft = templeft - (endcoords - startcoords);
if (templeft > (_this.thumbtotalwidth - _this.thumbouterwidth)) {
templeft = _this.thumbtotalwidth - _this.thumbouterwidth;
}
if (templeft < 0) {
templeft = 0;
}
// move current slide
_this.settranslate(templeft);
}
});
$(window).on('mouseup.lg.thumb', function() {
if (ismoved) {
ismoved = false;
_this.$thumbouter.removeclass('lg-dragging');
_this.left = templeft;
if (math.abs(endcoords - startcoords) < _this.core.s.swipethreshold) {
_this.thumbclickable = true;
}
} else {
_this.thumbclickable = true;
}
if (isdraging) {
isdraging = false;
_this.$thumbouter.removeclass('lg-grabbing').addclass('lg-grab');
}
});
};
thumbnail.prototype.enablethumbswipe = function() {
var _this = this;
var startcoords = 0;
var endcoords = 0;
var ismoved = false;
var templeft = 0;
_this.core.$outer.find('.lg-thumb').on('touchstart.lg', function(e) {
if (_this.thumbtotalwidth > _this.thumbouterwidth) {
e.preventdefault();
startcoords = e.originalevent.targettouches[0].pagex;
_this.thumbclickable = false;
}
});
_this.core.$outer.find('.lg-thumb').on('touchmove.lg', function(e) {
if (_this.thumbtotalwidth > _this.thumbouterwidth) {
e.preventdefault();
endcoords = e.originalevent.targettouches[0].pagex;
ismoved = true;
_this.$thumbouter.addclass('lg-dragging');
templeft = _this.left;
templeft = templeft - (endcoords - startcoords);
if (templeft > (_this.thumbtotalwidth - _this.thumbouterwidth)) {
templeft = _this.thumbtotalwidth - _this.thumbouterwidth;
}
if (templeft < 0) {
templeft = 0;
}
// move current slide
_this.settranslate(templeft);
}
});
_this.core.$outer.find('.lg-thumb').on('touchend.lg', function() {
if (_this.thumbtotalwidth > _this.thumbouterwidth) {
if (ismoved) {
ismoved = false;
_this.$thumbouter.removeclass('lg-dragging');
if (math.abs(endcoords - startcoords) < _this.core.s.swipethreshold) {
_this.thumbclickable = true;
}
_this.left = templeft;
} else {
_this.thumbclickable = true;
}
} else {
_this.thumbclickable = true;
}
});
};
thumbnail.prototype.toogle = function() {
var _this = this;
if (_this.core.s.tooglethumb) {
_this.core.$outer.addclass('lg-can-toggle');
_this.$thumbouter.append('');
_this.core.$outer.find('.lg-toogle-thumb').on('click.lg', function() {
_this.core.$outer.toggleclass('lg-thumb-open');
});
}
};
thumbnail.prototype.thumbkeypress = function() {
var _this = this;
$(window).on('keydown.lg.thumb', function(e) {
if (e.keycode === 38) {
e.preventdefault();
_this.core.$outer.addclass('lg-thumb-open');
} else if (e.keycode === 40) {
e.preventdefault();
_this.core.$outer.removeclass('lg-thumb-open');
}
});
};
thumbnail.prototype.destroy = function() {
if (this.core.s.thumbnail && this.core.$items.length > 1) {
$(window).off('resize.lg.thumb orientationchange.lg.thumb keydown.lg.thumb');
this.$thumbouter.remove();
this.core.$outer.removeclass('lg-has-thumb');
}
};
$.fn.lightgallery.modules.thumbnail = thumbnail;
})(jquery, window, document);