' +
- '
';
-
- switch (this.core.s.vimeoThumbSize) {
- case 'thumbnail_large':
- vimeoErrorThumbSize = '640';
- break;
- case 'thumbnail_medium':
- vimeoErrorThumbSize = '200x150';
- break;
- case 'thumbnail_small':
- vimeoErrorThumbSize = '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 || isVideo.dailymotion) {
- if (isVideo.youtube) {
- if (_this.core.s.loadYoutubeThumbnail) {
- thumbImg = '//img.youtube.com/vi/' + isVideo.youtube[1] + '/' + _this.core.s.youtubeThumbSize + '.jpg';
- } else {
- thumbImg = thumb;
+ this.build();
+ if (this.core.s.animateThumb) {
+ if (this.core.s.enableThumbDrag && !this.core.isTouch && this.core.doCss()) {
+ this.enableThumbDrag();
}
- } else if (isVideo.vimeo) {
- if (_this.core.s.loadVimeoThumbnail) {
- thumbImg = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg';
- vimeoId = isVideo.vimeo[1];
- } else {
- thumbImg = thumb;
+
+ if (this.core.s.enableThumbSwipe && this.core.isTouch && this.core.doCss()) {
+ this.enableThumbSwipe();
}
- } else if (isVideo.dailymotion) {
- if (_this.core.s.loadDailymotionThumbnail) {
- thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1];
- } else {
- thumbImg = thumb;
- }
- }
- } else {
- thumbImg = thumb;
- }
- thumbList += '' +
- '
' +
- '' +
+ '
';
- $thumb = _this.core.$outer.find('.lg-thumb-item');
+ switch (this.core.s.vimeoThumbSize) {
+ case 'thumbnail_large':
+ vimeoErrorThumbSize = '640';
+ break;
+ case 'thumbnail_medium':
+ vimeoErrorThumbSize = '200x150';
+ break;
+ case 'thumbnail_small':
+ vimeoErrorThumbSize = '100x75';
+ }
- // Load vimeo thumbnails
- $thumb.each(function() {
- var $this = $(this);
- var vimeoVideoId = $this.attr('data-vimeo-id');
+ _this.core.$outer.addClass('lg-has-thumb');
- if (vimeoVideoId) {
- $.getJSON('//www.vimeo.com/api/v2/video/' + vimeoVideoId + '.json?callback=?', {
- format: 'json'
- }, function(data) {
- $this.find('img').attr('src', data[0][_this.core.s.vimeoThumbSize]);
+ _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'
});
}
- });
- // 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.core.s.animateThumb) {
+ _this.$thumbOuter.css('height', _this.core.s.thumbContHeight + 'px');
}
- if (this.left < 0) {
- this.left = 0;
- }
+ function getThumb(src, thumb, index) {
+ var isVideo = _this.core.isVideo(src, index) || {};
+ var thumbImg;
+ var vimeoId = '';
- if (this.core.lGalleryOn) {
- if (!$thumb.hasClass('on')) {
- this.core.$outer.find('.lg-thumb').css('transition-duration', this.core.s.speed + 'ms');
+ if (isVideo.youtube || isVideo.vimeo || isVideo.dailymotion) {
+ if (isVideo.youtube) {
+ if (_this.core.s.loadYoutubeThumbnail) {
+ thumbImg = '//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 = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg';
+ vimeoId = isVideo.vimeo[1];
+ } else {
+ thumbImg = thumb;
+ }
+ } else if (isVideo.dailymotion) {
+ if (_this.core.s.loadDailymotionThumbnail) {
+ thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1];
+ } else {
+ thumbImg = thumb;
+ }
+ }
+ } else {
+ thumbImg = thumb;
}
- if (!this.core.doCss()) {
- $thumb.animate({
- left: -this.left + 'px'
- }, this.core.s.speed);
+ thumbList += '' +
+ '
' +
+ '';switch(this.core.s.vimeoThumbSize){case"thumbnail_large":g="640";break;case"thumbnail_medium":g="200x150";break;case"thumbnail_small":g="100x75"}if(e.core.$outer.addClass("lg-has-thumb"),e.core.$outer.find(".lg").append(h),e.$thumbOuter=e.core.$outer.find(".lg-thumb-outer"),e.thumbOuterWidth=e.$thumbOuter.width(),e.core.s.animateThumb&&e.core.$outer.find(".lg-thumb").css({width:e.thumbTotalWidth+"px",position:"relative"}),this.core.s.animateThumb&&e.$thumbOuter.css("height",e.core.s.thumbContHeight+"px"),e.core.s.dynamic)for(var i=0;i
'),h.$thumbOuter=h.core.$outer.find(".lg-thumb-outer"),h.thumbOuterWidth=h.$thumbOuter.width(),h.core.s.animateThumb&&h.core.$outer.find(".lg-thumb").css({width:h.thumbTotalWidth+"px",position:"relative"}),this.core.s.animateThumb&&h.$thumbOuter.css("height",h.core.s.thumbContHeight+"px"),h.core.s.dynamic)for(var r=0;r
' +
- '' +
- '' +
- '
';
- }
-
- if (this.s.appendSubHtmlTo === '.lg-sub-html') {
- subHtmlCont = '';
- }
-
- template = '' +
- '
';
-
- $('body').append(template);
- this.$outer = $('.lg-outer');
- this.$slide = this.$outer.find('.lg-item');
-
- if (this.s.useLeft) {
- this.$outer.addClass('lg-use-left');
-
- // Set mode lg-slide if use left is true;
- this.s.mode = 'lg-slide';
- } else {
- this.$outer.addClass('lg-use-css3');
- }
-
- // For fixed height gallery
- _this.setTop();
- $(window).on('resize.lg orientationchange.lg', function() {
- setTimeout(function() {
- _this.setTop();
- }, 100);
- });
-
- // add class lg-current to remove initial transition
- this.$slide.eq(this.index).addClass('lg-current');
-
- // add Class for css support and transition mode
- if (this.doCss()) {
- this.$outer.addClass('lg-css3');
- } else {
- this.$outer.addClass('lg-css');
-
- // Set speed 0 because no animation will happen if browser doesn't support css3
- this.s.speed = 0;
- }
-
- this.$outer.addClass(this.s.mode);
-
- if (this.s.enableDrag && this.$items.length > 1) {
- this.$outer.addClass('lg-grab');
- }
-
- if (this.s.showAfterLoad) {
- this.$outer.addClass('lg-show-after-load');
- }
-
- if (this.doCss()) {
- var $inner = this.$outer.find('.lg-inner');
- $inner.css('transition-timing-function', this.s.cssEasing);
- $inner.css('transition-duration', this.s.speed + 'ms');
- }
-
- $('.lg-backdrop').addClass('in');
-
- setTimeout(function() {
- _this.$outer.addClass('lg-visible');
- }, this.s.backdropDuration);
-
- if (this.s.download) {
- this.$outer.find('.lg-toolbar').append('');
- }
-
- // Store the current scroll top value to scroll back after closing the gallery..
- this.prevScrollTop = $(window).scrollTop();
-
- };
-
- // For fixed height gallery
- Plugin.prototype.setTop = function() {
- if (this.s.height !== '100%') {
- var wH = $(window).height();
- var top = (wH - parseInt(this.s.height, 10)) / 2;
- var $lGallery = this.$outer.find('.lg');
- if (wH >= parseInt(this.s.height, 10)) {
- $lGallery.css('top', top + 'px');
- } else {
- $lGallery.css('top', '0px');
- }
- }
- };
-
- // Find css3 support
- Plugin.prototype.doCss = function() {
- // check for css animation support
- var support = function() {
- var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition'];
- var root = document.documentElement;
- var i = 0;
- for (i = 0; i < transition.length; i++) {
- if (transition[i] in root.style) {
- return true;
- }
- }
- };
-
- if (support()) {
- return true;
- }
-
- return false;
- };
-
- /**
- * @desc Check the given src is video
- * @param {String} src
- * @return {Object} video type
- * Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
- */
- Plugin.prototype.isVideo = function(src, index) {
-
- var html;
- if (this.s.dynamic) {
- html = this.s.dynamicEl[index].html;
- } else {
- html = this.$items.eq(index).attr('data-html');
- }
-
- if (!src && html) {
- return {
- html5: true
- };
- }
-
- var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)/i);
- var vimeo = src.match(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i);
- var dailymotion = src.match(/\/\/(?:www\.)?dai.ly\/([0-9a-z\-_]+)/i);
- var vk = src.match(/\/\/(?:www\.)?(?:vk\.com|vkontakte\.ru)\/(?:video_ext\.php\?)(.*)/i);
-
- if (youtube) {
- return {
- youtube: youtube
- };
- } else if (vimeo) {
- return {
- vimeo: vimeo
- };
- } else if (dailymotion) {
- return {
- dailymotion: dailymotion
- };
- } else if (vk) {
- return {
- vk: vk
- };
- }
- };
-
- /**
- * @desc Create image counter
- * Ex: 1/10
- */
- Plugin.prototype.counter = function() {
- if (this.s.counter) {
- $(this.s.appendCounterTo).append('' +
- '
' +
- '' + list + '
' +
- '' +
- controls +
- subHtmlCont +
- '' + (parseInt(this.index, 10) + 1) + ' / ' + this.$items.length + '
');
- }
- };
-
- /**
- * @desc add sub-html into the slide
- * @param {Number} index - index of the slide
- */
- Plugin.prototype.addHtml = function(index) {
- var subHtml = null;
- var subHtmlUrl;
- var $currentEle;
- if (this.s.dynamic) {
- if (this.s.dynamicEl[index].subHtmlUrl) {
- subHtmlUrl = this.s.dynamicEl[index].subHtmlUrl;
- } else {
- subHtml = this.s.dynamicEl[index].subHtml;
- }
- } else {
- $currentEle = this.$items.eq(index);
- if ($currentEle.attr('data-sub-html-url')) {
- subHtmlUrl = $currentEle.attr('data-sub-html-url');
- } else {
- subHtml = $currentEle.attr('data-sub-html');
- if (this.s.getCaptionFromTitleOrAlt && !subHtml) {
- subHtml = $currentEle.attr('title') || $currentEle.find('img').first().attr('alt');
- }
- }
- }
-
- if (!subHtmlUrl) {
- if (typeof subHtml !== 'undefined' && subHtml !== null) {
-
- // get first letter of subhtml
- // if first letter starts with . or # get the html form the jQuery object
- var fL = subHtml.substring(0, 1);
- if (fL === '.' || fL === '#') {
- if (this.s.subHtmlSelectorRelative && !this.s.dynamic) {
- subHtml = $currentEle.find(subHtml).html();
- } else {
- subHtml = $(subHtml).html();
- }
- }
- } else {
- subHtml = '';
- }
- }
-
- if (this.s.appendSubHtmlTo === '.lg-sub-html') {
-
- if (subHtmlUrl) {
- this.$outer.find(this.s.appendSubHtmlTo).load(subHtmlUrl);
- } else {
- this.$outer.find(this.s.appendSubHtmlTo).html(subHtml);
- }
-
- } else {
-
- if (subHtmlUrl) {
- this.$slide.eq(index).load(subHtmlUrl);
- } else {
- this.$slide.eq(index).append(subHtml);
- }
- }
-
- // Add lg-empty-html class if title doesn't exist
- if (typeof subHtml !== 'undefined' && subHtml !== null) {
- if (subHtml === '') {
- this.$outer.find(this.s.appendSubHtmlTo).addClass('lg-empty-html');
- } else {
- this.$outer.find(this.s.appendSubHtmlTo).removeClass('lg-empty-html');
- }
- }
-
- this.$el.trigger('onAfterAppendSubHtml.lg', [index]);
- };
-
- /**
- * @desc Preload slides
- * @param {Number} index - index of the slide
- */
- Plugin.prototype.preload = function(index) {
- var i = 1;
- var j = 1;
- for (i = 1; i <= this.s.preload; i++) {
- if (i >= this.$items.length - index) {
- break;
- }
-
- this.loadContent(index + i, false, 0);
- }
-
- for (j = 1; j <= this.s.preload; j++) {
- if (index - j < 0) {
- break;
- }
-
- this.loadContent(index - j, false, 0);
- }
- };
-
- /**
- * @desc Load slide content into slide.
- * @param {Number} index - index of the slide.
- * @param {Boolean} rec - if true call loadcontent() function again.
- * @param {Boolean} delay - delay for adding complete class. it is 0 except first time.
- */
- Plugin.prototype.loadContent = function(index, rec, delay) {
-
- var _this = this;
- var _hasPoster = false;
- var _$img;
- var _src;
- var _poster;
- var _srcset;
- var _sizes;
- var _html;
- var getResponsiveSrc = function(srcItms) {
- var rsWidth = [];
- var rsSrc = [];
- for (var i = 0; i < srcItms.length; i++) {
- var __src = srcItms[i].split(' ');
-
- // Manage empty space
- if (__src[0] === '') {
- __src.splice(0, 1);
- }
-
- rsSrc.push(__src[0]);
- rsWidth.push(__src[1]);
- }
-
- var wWidth = $(window).width();
- for (var j = 0; j < rsWidth.length; j++) {
- if (parseInt(rsWidth[j], 10) > wWidth) {
- _src = rsSrc[j];
- break;
- }
- }
- };
-
- if (_this.s.dynamic) {
-
- if (_this.s.dynamicEl[index].poster) {
- _hasPoster = true;
- _poster = _this.s.dynamicEl[index].poster;
- }
-
- _html = _this.s.dynamicEl[index].html;
- _src = _this.s.dynamicEl[index].src;
-
- if (_this.s.dynamicEl[index].responsive) {
- var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');
- getResponsiveSrc(srcDyItms);
- }
-
- _srcset = _this.s.dynamicEl[index].srcset;
- _sizes = _this.s.dynamicEl[index].sizes;
-
- } else {
-
- if (_this.$items.eq(index).attr('data-poster')) {
- _hasPoster = true;
- _poster = _this.$items.eq(index).attr('data-poster');
- }
-
- _html = _this.$items.eq(index).attr('data-html');
- _src = _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src');
-
- if (_this.$items.eq(index).attr('data-responsive')) {
- var srcItms = _this.$items.eq(index).attr('data-responsive').split(',');
- getResponsiveSrc(srcItms);
- }
-
- _srcset = _this.$items.eq(index).attr('data-srcset');
- _sizes = _this.$items.eq(index).attr('data-sizes');
-
- }
-
- //if (_src || _srcset || _sizes || _poster) {
-
- var iframe = false;
- if (_this.s.dynamic) {
- if (_this.s.dynamicEl[index].iframe) {
- iframe = true;
- }
- } else {
- if (_this.$items.eq(index).attr('data-iframe') === 'true') {
- iframe = true;
- }
- }
-
- var _isVideo = _this.isVideo(_src, index);
- if (!_this.$slide.eq(index).hasClass('lg-loaded')) {
- if (iframe) {
- _this.$slide.eq(index).prepend('');
- } else if (_hasPoster) {
- var videoClass = '';
- if (_isVideo && _isVideo.youtube) {
- videoClass = 'lg-has-youtube';
- } else if (_isVideo && _isVideo.vimeo) {
- videoClass = 'lg-has-vimeo';
- } else {
- videoClass = 'lg-has-html5';
- }
-
- _this.$slide.eq(index).prepend('
');
- _this.$el.trigger('hasVideo.lg', [index, _src, _html]);
- } else {
- _this.$slide.eq(index).prepend('
' +
- '
';
-
- switch (this.core.s.vimeoThumbSize) {
- case 'thumbnail_large':
- vimeoErrorThumbSize = '640';
- break;
- case 'thumbnail_medium':
- vimeoErrorThumbSize = '200x150';
- break;
- case 'thumbnail_small':
- vimeoErrorThumbSize = '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 || isVideo.dailymotion) {
- if (isVideo.youtube) {
- if (_this.core.s.loadYoutubeThumbnail) {
- thumbImg = '//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 = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg';
- vimeoId = isVideo.vimeo[1];
- } else {
- thumbImg = thumb;
- }
- } else if (isVideo.dailymotion) {
- if (_this.core.s.loadDailymotionThumbnail) {
- thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1];
- } else {
- thumbImg = thumb;
- }
- }
- } else {
- thumbImg = thumb;
- }
-
- thumbList += '' +
- '
' +
- '"),".lg-sub-html"===this.s.appendSubHtmlTo&&(g=''),c='
'+d+'
'+e+g+"');else if(m){var s="";s=r&&r.youtube?"lg-has-youtube":r&&r.vimeo?"lg-has-vimeo":"lg-has-html5",l.$slide.eq(c).prepend('
'),l.$el.trigger("hasVideo.lg",[c,g,k])):l.$slide.eq(c).prepend('
';switch(this.core.s.vimeoThumbSize){case"thumbnail_large":g="640";break;case"thumbnail_medium":g="200x150";break;case"thumbnail_small":g="100x75"}if(e.core.$outer.addClass("lg-has-thumb"),e.core.$outer.find(".lg").append(h),e.$thumbOuter=e.core.$outer.find(".lg-thumb-outer"),e.thumbOuterWidth=e.$thumbOuter.width(),e.core.s.animateThumb&&e.core.$outer.find(".lg-thumb").css({width:e.thumbTotalWidth+"px",position:"relative"}),this.core.s.animateThumb&&e.$thumbOuter.css("height",e.core.s.thumbContHeight+"px"),e.core.s.dynamic)for(var i=0;i
' +
- '' +
- '' +
- '
';
- }
-
- if (this.s.appendSubHtmlTo === '.lg-sub-html') {
- subHtmlCont = '';
- }
-
- template = '' +
- '
';
-
- $('body').append(template);
- this.$outer = $('.lg-outer');
- this.$slide = this.$outer.find('.lg-item');
-
- if (this.s.useLeft) {
- this.$outer.addClass('lg-use-left');
-
- // Set mode lg-slide if use left is true;
- this.s.mode = 'lg-slide';
- } else {
- this.$outer.addClass('lg-use-css3');
- }
-
- // For fixed height gallery
- _this.setTop();
- $(window).on('resize.lg orientationchange.lg', function() {
- setTimeout(function() {
- _this.setTop();
- }, 100);
- });
-
- // add class lg-current to remove initial transition
- this.$slide.eq(this.index).addClass('lg-current');
-
- // add Class for css support and transition mode
- if (this.doCss()) {
- this.$outer.addClass('lg-css3');
- } else {
- this.$outer.addClass('lg-css');
-
- // Set speed 0 because no animation will happen if browser doesn't support css3
- this.s.speed = 0;
- }
-
- this.$outer.addClass(this.s.mode);
-
- if (this.s.enableDrag && this.$items.length > 1) {
- this.$outer.addClass('lg-grab');
- }
-
- if (this.s.showAfterLoad) {
- this.$outer.addClass('lg-show-after-load');
- }
-
- if (this.doCss()) {
- var $inner = this.$outer.find('.lg-inner');
- $inner.css('transition-timing-function', this.s.cssEasing);
- $inner.css('transition-duration', this.s.speed + 'ms');
- }
-
- $('.lg-backdrop').addClass('in');
-
- setTimeout(function() {
- _this.$outer.addClass('lg-visible');
- }, this.s.backdropDuration);
-
- if (this.s.download) {
- this.$outer.find('.lg-toolbar').append('');
- }
-
- // Store the current scroll top value to scroll back after closing the gallery..
- this.prevScrollTop = $(window).scrollTop();
-
- };
-
- // For fixed height gallery
- Plugin.prototype.setTop = function() {
- if (this.s.height !== '100%') {
- var wH = $(window).height();
- var top = (wH - parseInt(this.s.height, 10)) / 2;
- var $lGallery = this.$outer.find('.lg');
- if (wH >= parseInt(this.s.height, 10)) {
- $lGallery.css('top', top + 'px');
- } else {
- $lGallery.css('top', '0px');
- }
- }
- };
-
- // Find css3 support
- Plugin.prototype.doCss = function() {
- // check for css animation support
- var support = function() {
- var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition'];
- var root = document.documentElement;
- var i = 0;
- for (i = 0; i < transition.length; i++) {
- if (transition[i] in root.style) {
- return true;
- }
- }
- };
-
- if (support()) {
- return true;
- }
-
- return false;
- };
-
- /**
- * @desc Check the given src is video
- * @param {String} src
- * @return {Object} video type
- * Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
- */
- Plugin.prototype.isVideo = function(src, index) {
-
- var html;
- if (this.s.dynamic) {
- html = this.s.dynamicEl[index].html;
- } else {
- html = this.$items.eq(index).attr('data-html');
- }
-
- if (!src && html) {
- return {
- html5: true
- };
- }
-
- var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)/i);
- var vimeo = src.match(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i);
- var dailymotion = src.match(/\/\/(?:www\.)?dai.ly\/([0-9a-z\-_]+)/i);
- var vk = src.match(/\/\/(?:www\.)?(?:vk\.com|vkontakte\.ru)\/(?:video_ext\.php\?)(.*)/i);
-
- if (youtube) {
- return {
- youtube: youtube
- };
- } else if (vimeo) {
- return {
- vimeo: vimeo
- };
- } else if (dailymotion) {
- return {
- dailymotion: dailymotion
- };
- } else if (vk) {
- return {
- vk: vk
- };
- }
- };
-
- /**
- * @desc Create image counter
- * Ex: 1/10
- */
- Plugin.prototype.counter = function() {
- if (this.s.counter) {
- $(this.s.appendCounterTo).append('' +
- '
' +
- '' + list + '
' +
- '' +
- controls +
- subHtmlCont +
- '' + (parseInt(this.index, 10) + 1) + ' / ' + this.$items.length + '
');
- }
- };
-
- /**
- * @desc add sub-html into the slide
- * @param {Number} index - index of the slide
- */
- Plugin.prototype.addHtml = function(index) {
- var subHtml = null;
- var subHtmlUrl;
- var $currentEle;
- if (this.s.dynamic) {
- if (this.s.dynamicEl[index].subHtmlUrl) {
- subHtmlUrl = this.s.dynamicEl[index].subHtmlUrl;
- } else {
- subHtml = this.s.dynamicEl[index].subHtml;
- }
- } else {
- $currentEle = this.$items.eq(index);
- if ($currentEle.attr('data-sub-html-url')) {
- subHtmlUrl = $currentEle.attr('data-sub-html-url');
- } else {
- subHtml = $currentEle.attr('data-sub-html');
- if (this.s.getCaptionFromTitleOrAlt && !subHtml) {
- subHtml = $currentEle.attr('title') || $currentEle.find('img').first().attr('alt');
- }
- }
- }
-
- if (!subHtmlUrl) {
- if (typeof subHtml !== 'undefined' && subHtml !== null) {
-
- // get first letter of subhtml
- // if first letter starts with . or # get the html form the jQuery object
- var fL = subHtml.substring(0, 1);
- if (fL === '.' || fL === '#') {
- if (this.s.subHtmlSelectorRelative && !this.s.dynamic) {
- subHtml = $currentEle.find(subHtml).html();
- } else {
- subHtml = $(subHtml).html();
- }
- }
- } else {
- subHtml = '';
- }
- }
-
- if (this.s.appendSubHtmlTo === '.lg-sub-html') {
-
- if (subHtmlUrl) {
- this.$outer.find(this.s.appendSubHtmlTo).load(subHtmlUrl);
- } else {
- this.$outer.find(this.s.appendSubHtmlTo).html(subHtml);
- }
-
- } else {
-
- if (subHtmlUrl) {
- this.$slide.eq(index).load(subHtmlUrl);
- } else {
- this.$slide.eq(index).append(subHtml);
- }
- }
-
- // Add lg-empty-html class if title doesn't exist
- if (typeof subHtml !== 'undefined' && subHtml !== null) {
- if (subHtml === '') {
- this.$outer.find(this.s.appendSubHtmlTo).addClass('lg-empty-html');
- } else {
- this.$outer.find(this.s.appendSubHtmlTo).removeClass('lg-empty-html');
- }
- }
-
- this.$el.trigger('onAfterAppendSubHtml.lg', [index]);
- };
-
- /**
- * @desc Preload slides
- * @param {Number} index - index of the slide
- */
- Plugin.prototype.preload = function(index) {
- var i = 1;
- var j = 1;
- for (i = 1; i <= this.s.preload; i++) {
- if (i >= this.$items.length - index) {
- break;
- }
-
- this.loadContent(index + i, false, 0);
- }
-
- for (j = 1; j <= this.s.preload; j++) {
- if (index - j < 0) {
- break;
- }
-
- this.loadContent(index - j, false, 0);
- }
- };
-
- /**
- * @desc Load slide content into slide.
- * @param {Number} index - index of the slide.
- * @param {Boolean} rec - if true call loadcontent() function again.
- * @param {Boolean} delay - delay for adding complete class. it is 0 except first time.
- */
- Plugin.prototype.loadContent = function(index, rec, delay) {
-
- var _this = this;
- var _hasPoster = false;
- var _$img;
- var _src;
- var _poster;
- var _srcset;
- var _sizes;
- var _html;
- var getResponsiveSrc = function(srcItms) {
- var rsWidth = [];
- var rsSrc = [];
- for (var i = 0; i < srcItms.length; i++) {
- var __src = srcItms[i].split(' ');
-
- // Manage empty space
- if (__src[0] === '') {
- __src.splice(0, 1);
- }
-
- rsSrc.push(__src[0]);
- rsWidth.push(__src[1]);
- }
-
- var wWidth = $(window).width();
- for (var j = 0; j < rsWidth.length; j++) {
- if (parseInt(rsWidth[j], 10) > wWidth) {
- _src = rsSrc[j];
- break;
- }
- }
- };
-
- if (_this.s.dynamic) {
-
- if (_this.s.dynamicEl[index].poster) {
- _hasPoster = true;
- _poster = _this.s.dynamicEl[index].poster;
- }
-
- _html = _this.s.dynamicEl[index].html;
- _src = _this.s.dynamicEl[index].src;
-
- if (_this.s.dynamicEl[index].responsive) {
- var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');
- getResponsiveSrc(srcDyItms);
- }
-
- _srcset = _this.s.dynamicEl[index].srcset;
- _sizes = _this.s.dynamicEl[index].sizes;
-
- } else {
-
- if (_this.$items.eq(index).attr('data-poster')) {
- _hasPoster = true;
- _poster = _this.$items.eq(index).attr('data-poster');
- }
-
- _html = _this.$items.eq(index).attr('data-html');
- _src = _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src');
-
- if (_this.$items.eq(index).attr('data-responsive')) {
- var srcItms = _this.$items.eq(index).attr('data-responsive').split(',');
- getResponsiveSrc(srcItms);
- }
-
- _srcset = _this.$items.eq(index).attr('data-srcset');
- _sizes = _this.$items.eq(index).attr('data-sizes');
-
- }
-
- //if (_src || _srcset || _sizes || _poster) {
-
- var iframe = false;
- if (_this.s.dynamic) {
- if (_this.s.dynamicEl[index].iframe) {
- iframe = true;
- }
- } else {
- if (_this.$items.eq(index).attr('data-iframe') === 'true') {
- iframe = true;
- }
- }
-
- var _isVideo = _this.isVideo(_src, index);
- if (!_this.$slide.eq(index).hasClass('lg-loaded')) {
- if (iframe) {
- _this.$slide.eq(index).prepend('');
- } else if (_hasPoster) {
- var videoClass = '';
- if (_isVideo && _isVideo.youtube) {
- videoClass = 'lg-has-youtube';
- } else if (_isVideo && _isVideo.vimeo) {
- videoClass = 'lg-has-vimeo';
- } else {
- videoClass = 'lg-has-html5';
- }
-
- _this.$slide.eq(index).prepend('
');
- _this.$el.trigger('hasVideo.lg', [index, _src, _html]);
- } else {
- _this.$slide.eq(index).prepend('
' +
+ '' +
+ '' +
+ '
';
+ }
- });
+ if (this.s.appendSubHtmlTo === '.lg-sub-html') {
+ subHtmlCont = '';
+ }
- _this.$outer.on('mouseup.lg', function(e) {
+ template = '' +
+ '
';
+
+ $('body').append(template);
+ this.$outer = $('.lg-outer');
+ this.$slide = this.$outer.find('.lg-item');
+
+ if (this.s.useLeft) {
+ this.$outer.addClass('lg-use-left');
+
+ // Set mode lg-slide if use left is true;
+ this.s.mode = 'lg-slide';
+ } else {
+ this.$outer.addClass('lg-use-css3');
+ }
+
+ // For fixed height gallery
+ _this.setTop();
+ $(window).on('resize.lg orientationchange.lg', () =>
+ setTimeout(() => _this.setTop(), 100)
+ );
+
+ // add class lg-current to remove initial transition
+ this.$slide.eq(this.index).addClass('lg-current');
+
+ // add Class for css support and transition mode
+ if (this.doCss()) {
+ this.$outer.addClass('lg-css3');
+ } else {
+ this.$outer.addClass('lg-css');
+
+ // Set speed 0 because no animation will happen if browser doesn't support css3
+ this.s.speed = 0;
+ }
+
+ this.$outer.addClass(this.s.mode);
+
+ if (this.s.enableDrag && this.$items.length > 1) {
+ this.$outer.addClass('lg-grab');
+ }
+
+ if (this.s.showAfterLoad) {
+ this.$outer.addClass('lg-show-after-load');
+ }
+
+ if (this.doCss()) {
+ var $inner = this.$outer.find('.lg-inner');
+ $inner.css('transition-timing-function', this.s.cssEasing);
+ $inner.css('transition-duration', this.s.speed + 'ms');
+ }
+
+ $('.lg-backdrop').addClass('in');
+
+ setTimeout(() => _this.$outer.addClass('lg-visible'), this.s.backdropDuration);
+
+ if (this.s.download) {
+ this.$outer.find('.lg-toolbar').append('');
+ }
+
+ // Store the current scroll top value to scroll back after closing the gallery..
+ this.prevScrollTop = $(window).scrollTop();
+
+ }
+
+ // For fixed height gallery
+ setTop() {
+ if (this.s.height !== '100%') {
+ var wH = $(window).height();
+ var top = (wH - parseInt(this.s.height, 10)) / 2;
+ var $lGallery = this.$outer.find('.lg');
+ if (wH >= parseInt(this.s.height, 10)) {
+ $lGallery.css('top', top + 'px');
+ } else {
+ $lGallery.css('top', '0px');
+ }
+ }
+ }
+
+ // Find css3 support
+ doCss() { return true; }
+
+ /**
+ * @desc Check the given src is video
+ * @param {String} src
+ * @return {Object} video type
+ */
+ isVideo(src, index) {
+
+ var html;
+ if (this.s.dynamic) {
+ html = this.s.dynamicEl[index].html;
+ } else {
+ html = this.$items.eq(index).attr('data-html');
+ }
+
+ if (!src && html) {
+ return {
+ html5: true
+ };
+ }
+ }
+
+ /**
+ * @desc Create image counter
+ * Ex: 1/10
+ */
+ counter() {
+ if (this.s.counter) {
+ $(this.s.appendCounterTo).append('' +
+ '
' +
+ '' + list + '
' +
+ '' +
+ controls +
+ subHtmlCont +
+ '' + (parseInt(this.index, 10) + 1) + ' / ' + this.$items.length + '
');
+ }
+ }
+
+ /**
+ * @desc add sub-html into the slide
+ * @param {Number} index - index of the slide
+ */
+ addHtml(index) {
+ var subHtml = null;
+ var subHtmlUrl;
+ var $currentEle;
+ if (this.s.dynamic) {
+ if (this.s.dynamicEl[index].subHtmlUrl) {
+ subHtmlUrl = this.s.dynamicEl[index].subHtmlUrl;
+ } else {
+ subHtml = this.s.dynamicEl[index].subHtml;
+ }
+ } else {
+ $currentEle = this.$items.eq(index);
+ if ($currentEle.attr('data-sub-html-url')) {
+ subHtmlUrl = $currentEle.attr('data-sub-html-url');
+ } else {
+ subHtml = $currentEle.attr('data-sub-html');
+ if (this.s.getCaptionFromTitleOrAlt && !subHtml) {
+ subHtml = $currentEle.attr('title') || $currentEle.find('img').first().attr('alt');
+ }
+ }
+ }
+
+ if (!subHtmlUrl) {
+ if (typeof subHtml !== 'undefined' && subHtml !== null) {
+
+ // get first letter of subhtml
+ // if first letter starts with . or # get the html form the jQuery object
+ var fL = subHtml.substring(0, 1);
+ if (fL === '.' || fL === '#') {
+ if (this.s.subHtmlSelectorRelative && !this.s.dynamic) {
+ subHtml = $currentEle.find(subHtml).html();
+ } else {
+ subHtml = $(subHtml).html();
+ }
+ }
+ } else {
+ subHtml = '';
+ }
+ }
+
+ if (this.s.appendSubHtmlTo === '.lg-sub-html') {
+
+ if (subHtmlUrl) {
+ this.$outer.find(this.s.appendSubHtmlTo).load(subHtmlUrl);
+ } else {
+ this.$outer.find(this.s.appendSubHtmlTo).html(subHtml);
+ }
+
+ } else {
+
+ if (subHtmlUrl) {
+ this.$slide.eq(index).load(subHtmlUrl);
+ } else {
+ this.$slide.eq(index).append(subHtml);
+ }
+ }
+
+ // Add lg-empty-html class if title doesn't exist
+ if (typeof subHtml !== 'undefined' && subHtml !== null) {
+ if (subHtml === '') {
+ this.$outer.find(this.s.appendSubHtmlTo).addClass('lg-empty-html');
+ } else {
+ this.$outer.find(this.s.appendSubHtmlTo).removeClass('lg-empty-html');
+ }
+ }
+
+ this.$el.trigger('onAfterAppendSubHtml.lg', [index]);
+ }
+
+ /**
+ * @desc Preload slides
+ * @param {Number} index - index of the slide
+ */
+ preload(index) {
+ var i = 1;
+ var j = 1;
+ for (i = 1; i <= this.s.preload; i++) {
+ if (i >= this.$items.length - index) {
+ break;
+ }
+
+ this.loadContent(index + i, false, 0);
+ }
+
+ for (j = 1; j <= this.s.preload; j++) {
+ if (index - j < 0) {
+ break;
+ }
+
+ this.loadContent(index - j, false, 0);
+ }
+ }
+
+ /**
+ * @desc Load slide content into slide.
+ * @param {Number} index - index of the slide.
+ * @param {Boolean} rec - if true call loadcontent() function again.
+ * @param {Boolean} delay - delay for adding complete class. it is 0 except first time.
+ */
+ loadContent(index, rec, delay) {
+
+ var _this = this;
+ var _hasPoster = false;
+ var _$img;
+ var _src;
+ var _poster;
+ var _srcset;
+ var _sizes;
+ var _html;
+ var getResponsiveSrc = srcItms => {
+ var rsWidth = [];
+ var rsSrc = [];
+ for (var i = 0; i < srcItms.length; i++) {
+ var __src = srcItms[i].split(' ');
+
+ // Manage empty space
+ if (__src[0] === '') {
+ __src.splice(0, 1);
+ }
+
+ rsSrc.push(__src[0]);
+ rsWidth.push(__src[1]);
+ }
+
+ var wWidth = $(window).width();
+ for (var j = 0; j < rsWidth.length; j++) {
+ if (parseInt(rsWidth[j], 10) > wWidth) {
+ _src = rsSrc[j];
+ break;
+ }
+ }
+ };
+
+ if (_this.s.dynamic) {
+
+ if (_this.s.dynamicEl[index].poster) {
+ _hasPoster = true;
+ _poster = _this.s.dynamicEl[index].poster;
+ }
+
+ _html = _this.s.dynamicEl[index].html;
+ _src = _this.s.dynamicEl[index].src;
+
+ if (_this.s.dynamicEl[index].responsive) {
+ var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');
+ getResponsiveSrc(srcDyItms);
+ }
+
+ _srcset = _this.s.dynamicEl[index].srcset;
+ _sizes = _this.s.dynamicEl[index].sizes;
+
+ } else {
+
+ if (_this.$items.eq(index).attr('data-poster')) {
+ _hasPoster = true;
+ _poster = _this.$items.eq(index).attr('data-poster');
+ }
+
+ _html = _this.$items.eq(index).attr('data-html');
+ _src = _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src');
+
+ if (_this.$items.eq(index).attr('data-responsive')) {
+ var srcItms = _this.$items.eq(index).attr('data-responsive').split(',');
+ getResponsiveSrc(srcItms);
+ }
+
+ _srcset = _this.$items.eq(index).attr('data-srcset');
+ _sizes = _this.$items.eq(index).attr('data-sizes');
+
+ }
+
+ //if (_src || _srcset || _sizes || _poster) {
+
+ var iframe = false;
+ if (_this.s.dynamic) {
+ if (_this.s.dynamicEl[index].iframe) {
+ iframe = true;
+ }
+ } else {
+ if (_this.$items.eq(index).attr('data-iframe') === 'true') {
+ iframe = true;
+ }
+ }
+
+ var _isVideo = _this.isVideo(_src, index);
+ if (!_this.$slide.eq(index).hasClass('lg-loaded')) {
+ if (iframe) {
+ _this.$slide.eq(index).prepend('');
+ } else if (_hasPoster) {
+ _this.$slide.eq(index).prepend('
');
+ _this.$el.trigger('hasVideo.lg', [index, _src, _html]);
+ } else {
+ _this.$slide.eq(index).prepend('
"),".lg-sub-html"===this.s.appendSubHtmlTo&&(a=''),s='
'+i+'
'+l+a+"');else if(u){var f="";f=p&&p.youtube?"lg-has-youtube":p&&p.vimeo?"lg-has-vimeo":"lg-has-html5",h.$slide.eq(s).prepend('
'),h.$el.trigger("hasVideo.lg",[s,a,g])):h.$slide.eq(s).prepend('
"),".lg-sub-html"===this.s.appendSubHtmlTo&&(d=''),t='
'+l+'
'+i+d+"'+(parseInt(this.index,10)+1)+' / '+this.$items.length+"
")}addHtml(s){var t,l,i=null;if(this.s.dynamic?this.s.dynamicEl[s].subHtmlUrl?t=this.s.dynamicEl[s].subHtmlUrl:i=this.s.dynamicEl[s].subHtml:(l=this.$items.eq(s)).attr("data-sub-html-url")?t=l.attr("data-sub-html-url"):(i=l.attr("data-sub-html"),this.s.getCaptionFromTitleOrAlt&&!i&&(i=l.attr("title")||l.find("img").first().attr("alt"))),!t)if(null!=i){var a=i.substring(0,1);"."!==a&&"#"!==a||(i=this.s.subHtmlSelectorRelative&&!this.s.dynamic?l.find(i).html():e(i).html())}else i="";".lg-sub-html"===this.s.appendSubHtmlTo?t?this.$outer.find(this.s.appendSubHtmlTo).load(t):this.$outer.find(this.s.appendSubHtmlTo).html(i):t?this.$slide.eq(s).load(t):this.$slide.eq(s).append(i),null!=i&&(""===i?this.$outer.find(this.s.appendSubHtmlTo).addClass("lg-empty-html"):this.$outer.find(this.s.appendSubHtmlTo).removeClass("lg-empty-html")),this.$el.trigger("onAfterAppendSubHtml.lg",[s])}preload(e){var s=1,t=1;for(s=1;s<=this.s.preload&&!(s>=this.$items.length-e);s++)this.loadContent(e+s,!1,0);for(t=1;t<=this.s.preload&&!(e-t<0);t++)this.loadContent(e-t,!1,0)}loadContent(t,l,i){var a,d,o,r,n,g,h=this,m=!1,u=t=>{for(var l=[],i=[],a=0;a'):m?h.$slide.eq(t).prepend('
'),h.$el.trigger("hasVideo.lg",[t,d,g])):h.$slide.eq(t).prepend('