/** ==========================================================
* jquery lightGallery.js v1.1.0
* http://sachinchoolur.github.io/lightGallery/
* Released under the Apache License - http://opensource.org/licenses/Apache-2.0
=========================================================/**/
;
(function ($) {
"use strict";
$.fn.lightGallery = function (options) {
var defaults = {
mode: 'slide',
useCSS: true,
easing: 'linear', //'cubic-bezier(0.25, 0, 0.25, 1)',//
speed: 1000,
closable: true,
loop: false,
auto: false,
pause: 4000,
escKey: true,
rel: false,
lang: {
allPhotos: 'All photos'
},
exThumbImage: false,
index: false,
thumbnail: true,
caption: false,
captionLink: false,
desc: false,
counter: false,
controls: true,
hideControlOnEnd: false,
mobileSrc: false,
mobileSrcMaxWidth: 640,
//touch
swipeThreshold: 50,
vimeoColor: 'CCCCCC',
videoAutoplay: true,
videoMaxWidth: 855,
dynamic: false,
//callbacks
dynamicEl: [],
onOpen: function () {},
onSlideBefore: function () {},
onSlideAfter: function () {},
onSlideNext: function () {},
onSlidePrev: function () {},
onBeforeClose: function () {},
onCloseAfter: function () {}
},
el = $(this),
$children,
index,
lightGalleryOn = false,
html = '
',
isTouch = document.createTouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msMaxTouchPoints,
$gallery, $galleryCont, $slider, $slide, $prev, $next, prevIndex, $thumb_cont, $thumb, windowWidth, interval, usingThumb = false,
aTiming = false,
aSpeed = false;
var settings = $.extend(true, {}, defaults, options);
var lightGallery = {
init: function () {
el.each(function () {
var $this = $(this);
if (settings.dynamic == true) {
$children = settings.dynamicEl;
index = 0;
prevIndex = index;
setUp.init(index);
} else {
$children = $(this).children();
$children.click(function (e) {
if (settings.rel == true && $this.data('rel')) {
var rel = $this.data('rel');
$children = $('[data-rel="' + rel + '"]').children();
} else {
$children = $this.children();
}
e.preventDefault();
e.stopPropagation();
index = $children.index(this);
prevIndex = index;
setUp.init(index);
});
}
});
},
};
var setUp = {
init: function () {
this.start();
this.build();
},
start: function () {
this.structure();
this.getWidth();
this.closeSlide();
},
build: function () {
this.loadContent(index);
this.addCaption();
this.addDesc(); //description
this.counter();
this.slideTo();
this.buildThumbnail();
this.keyPress();
if(settings.index) {
this.slide(settings.index);
}
else {
this.slide(index);
}
this.touch();
this.enableTouch();
setTimeout(function () {
$gallery.addClass('opacity');
}, 50);
},
structure: function () {
$('body').append(html).addClass('lightGallery');
$galleryCont = $('#lightGallery-outer');
$gallery = $('#lightGallery-Gallery');
$slider = $gallery.find('#lightGallery-slider');
var slideList = '';
if (settings.dynamic == true) {
for (var i = 0; i < settings.dynamicEl.length; i++) {
slideList += '';
}
} else {
$children.each(function () {
slideList += '';
});
}
$slider.append(slideList);
$slide = $gallery.find('.lightGallery-slide');
},
closeSlide: function () {
var $this = this;
if(settings.closable) {
$('.lightGallery-slide')
.on('click', function(event) {
console.log(event.target);
if($(event.target).is('.lightGallery-slide')) {
$this.destroy();
}
})
;
}
$('#lightGallery-close').bind('click touchend', function () {
$this.destroy();
});
},
getWidth: function () {
var resizeWindow = function () {
windowWidth = $(window).width();
};
$(window).bind('resize.lightGallery', resizeWindow());
},
doCss: function () {
var support = function () {
var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition'];
var root = document.documentElement;
for (var i = 0; i < transition.length; i++) {
if (transition[i] in root.style) {
//cssPrefix = transition[i].replace('Transition', '').toLowerCase();
//cssPrefix == 'transition' ? cssPrefix = 'transition' : cssPrefix = ('-'+cssPrefix+'-transition');
return true;
}
}
};
if (settings.useCSS && support()) {
return true;
}
return false;
},
enableTouch: function () {
var $this = this;
if (isTouch){
var startCoords = {},
endCoords = {};
$('body').on('touchstart.lightGallery', function(e) {
endCoords = e.originalEvent.targetTouches[0];
startCoords.pageX = e.originalEvent.targetTouches[0].pageX;
startCoords.pageY = e.originalEvent.targetTouches[0].pageY;
});
$('body').on('touchmove.lightGallery', function(e) {
var orig = e.originalEvent;
endCoords = orig.targetTouches[0];
e.preventDefault();
});
$('body').on('touchend.lightGallery', function(e) {
var distance = endCoords.pageX - startCoords.pageX,
swipeThreshold = settings.swipeThreshold;
if( distance >= swipeThreshold ){
$this.prevSlide();
clearInterval(interval);
}
else if( distance <= - swipeThreshold ){
$this.nextSlide();
clearInterval(interval);
}
});
}
},
touch: function () {
var xStart, xEnd;
var $this = this;
$('.lightGallery').bind('mousedown', function (e) {
e.stopPropagation();
e.preventDefault();
xStart = e.pageX;
});
$('.lightGallery').bind('mouseup', function (e) {
e.stopPropagation();
e.preventDefault();
xEnd = e.pageX;
if (xEnd - xStart > 20) {
$this.prevSlide();
} else if (xStart - xEnd > 20) {
$this.nextSlide();
}
});
},
isVideo: function (src) {
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);
if (youtube || vimeo) {
return true;
}
},
loadVideo: function (src, a, _id) {
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 video = '';
if (youtube) {
if (settings.videoAutoplay === true && a === true) {
a = '?autoplay=1&rel=0&wmode=opaque';
} else {
a = '?wmode=opaque';
}
video = '';
} else if (vimeo) {
if (settings.videoAutoplay === true && a === true) {
a = 'autoplay=1&';
} else {
a = '';
}
video = '';
}
return '';
},
loadContent: function (index) {
var $this = this;
var i, j, ob, l = $children.length - index;
var src;
$this.autoStart();
if (settings.mobileSrc === true && windowWidth <= settings.mobileSrcMaxWidth) {
if (settings.dynamic == true) {
src = settings.dynamicEl[0]['mobileSrc'];
} else {
src = $children.eq(index).attr('data-responsive-src');
}
} else {
if (settings.dynamic == true) {
src = settings.dynamicEl[0]['src'];
} else {
src = $children.eq(index).attr('data-src');
}
}
if (!$this.isVideo(src)) {
$slide.eq(index).prepend('
');
ob = $('img');
} else {
$slide.eq(index).prepend($this.loadVideo(src, true, index));
ob = $('iframe');
if (settings.auto && settings.videoAutoplay === true) {
clearInterval(interval);
}
}
if ($children.length > 1) {
$slide.eq(index).find(ob).on('load error', function () {
for (i = 0; i <= index - 1; i++) {
var src;
if (settings.mobileSrc === true && windowWidth <= settings.mobileSrcMaxWidth) {
if (settings.dynamic == true) {
src = settings.dynamicEl[index - i - 1]['mobileSrc'];
} else {
src = $children.eq(index - i - 1).attr('data-responsive-src');
}
} else {
if (settings.dynamic == true) {
src = settings.dynamicEl[index - i - 1]['src'];
} else {
src = $children.eq(index - i - 1).attr('data-src');
}
}
if (!$this.isVideo(src)) {
$slide.eq(index - i - 1).prepend('
');
} else {
$slide.eq(index - i - 1).prepend($this.loadVideo(src, false, index - i - 1));
}
}
for (j = 1; j < l; j++) {
var src;
if (settings.mobileSrc === true && windowWidth <= settings.mobileSrcMaxWidth) {
if (settings.dynamic == true) {
src = settings.dynamicEl[index + j]['mobileSrc'];
} else {
src = $children.eq(index + j).attr('data-responsive-src');
}
} else {
if (settings.dynamic == true) {
src = settings.dynamicEl[index + j]['src'];
} else {
src = $children.eq(index + j).attr('data-src');
}
}
if (!$this.isVideo(src)) {
$slide.eq(index + j).prepend('
');
} else {
$slide.eq(index + j).prepend($this.loadVideo(src, false, index + j));
}
}
});
}
},
addCaption: function () {
if (settings.caption === true) {
var i, title = false;
for (i = 0; i < $children.length; i++) {
if (settings.dynamic == true) {
title = settings.dynamicEl[i]['caption'];
} else {
title = $children.eq(i).attr('data-title');
}
if (typeof title == 'undefined' || title == null) {
title = 'image ' + i + '';
}
if (settings.captionLink === true) {
var link = $children.eq(i).attr('data-link');
if (typeof link !== 'undefined' && link !== '') {
link = link
} else {
link = '#'
}
$slide.eq(i).append('');
} else {
$slide.eq(i).append('' + title + '
');
}
}
}
},
addDesc: function () {
if (settings.desc === true) {
var i, description = false;
for (i = 0; i < $children.length; i++) {
if (settings.dynamic == true) {
description = settings.dynamicEl[i]['desc'];
} else {
description = $children.eq(i).attr('data-desc');;
}
if (typeof description == 'undefined' || description == null) {
description = 'image ' + i + '';
}
if (settings.caption === false) {
$slide.eq(i).append('' + description + '
');
} else {
$slide.eq(i).find('.info').append('' + description + '');
}
}
}
},
counter: function() {
if (settings.counter === true) {
var slideCount = $("#lightGallery-slider > div").length;
$gallery.append(" / "+slideCount+"
");
}
},
buildThumbnail: function () {
if (settings.thumbnail === true && $children.length > 1) {
var $this = this;
$gallery.append('');
$thumb_cont = $gallery.find('.thumb_cont');
$prev.after('');
$gallery.find('.cLthumb').bind('click touchend', function () {
$thumb_cont.addClass('open');
if ($this.doCss() && settings.mode === 'slide') {
$slide.eq(index).prevAll().removeClass('nextSlide').addClass('prevSlide');
$slide.eq(index).nextAll().removeClass('prevSlide').addClass('nextSlide');
}
});
$gallery.find('.close').bind('click touchend', function () {
$thumb_cont.removeClass('open');
});
var thumbInfo = $gallery.find('.thumb_info');
var $thumb_inner = $gallery.find('.thumb_inner');
var thumbList = '';
var thumbImg;
if (settings.dynamic == true) {
for (var i = 0; i < settings.dynamicEl.length; i++) {
thumbImg = settings.dynamicEl[i]['thumb'];
thumbList += '';
}
} else {
$children.each(function () {
if (settings.exThumbImage === false || typeof $(this).attr(settings.exThumbImage) == 'undefined' || $(this).attr(settings.exThumbImage) == null) {
thumbImg = $(this).find('img').attr('src');
} else {
thumbImg = $(this).attr(settings.exThumbImage);
}
thumbList += '';
});
}
$thumb_inner.append(thumbList);
$thumb = $thumb_inner.find('.thumb');
$thumb.bind('click touchend', function () {
usingThumb = true;
var index = $(this).index();
$thumb.removeClass('active');
$(this).addClass('active');
$this.slide(index);
clearInterval(interval);
});
thumbInfo.prepend('' + settings.lang.allPhotos + ' (' + $thumb.length + ')');
}
},
slideTo: function () {
var $this = this;
if (settings.controls === true && $children.length > 1) {
$gallery.append('');
$prev = $gallery.find('#lightGallery-prev');
$next = $gallery.find('#lightGallery-next');
$prev.bind('click', function () {
$this.prevSlide();
clearInterval(interval);
});
$next.bind('click', function () {
$this.nextSlide();
clearInterval(interval);
});
}
},
autoStart: function () {
var $this = this;
if (settings.auto === true) {
interval = setInterval(function () {
if (index + 1 < $children.length) {
index = index;
} else {
index = -1;
}
index++;
$this.slide(index);
}, settings.pause);
}
},
keyPress: function () {
var $this = this;
$(window).bind('keyup.lightGallery', function (e) {
e.preventDefault();
e.stopPropagation();
if (e.keyCode === 37) {
$this.prevSlide();
clearInterval(interval);
}
if (e.keyCode === 38 && settings.thumbnail === true) {
if (!$thumb_cont.hasClass('open')) {
if ($this.doCss() && settings.mode === 'slide') {
$slide.eq(index).prevAll().removeClass('nextSlide').addClass('prevSlide');
$slide.eq(index).nextAll().removeClass('prevSlide').addClass('nextSlide');
}
$thumb_cont.addClass('open');
}
} else if (e.keyCode === 39) {
$this.nextSlide();
clearInterval(interval);
}
if (e.keyCode === 40 && settings.thumbnail === true) {
if ($thumb_cont.hasClass('open')) {
$thumb_cont.removeClass('open');
}
} else if (settings.escKey === true && e.keyCode === 27) {
if (settings.thumbnail === true && $thumb_cont.hasClass('open')) {
$thumb_cont.removeClass('open');
} else {
$this.destroy();
}
}
});
},
nextSlide: function () {
var $this = this;
index = $slide.index($slide.eq(prevIndex));
if (index + 1 < $children.length) {
index++;
$this.slide(index);
} else {
if (settings.loop) {
index = 0;
$this.slide(index);
} else if (settings.mode === 'fade' && settings.thumbnail === true && $children.length > 1) {
$thumb_cont.addClass('open');
}
}
settings.onSlideNext.call(this);
},
prevSlide: function () {
var $this = this;
index = $slide.index($slide.eq(prevIndex));
if (index > 0) {
index--;
$this.slide(index);
} else {
if (settings.loop) {
index = $children.length - 1;
$this.slide(index);
} else if (settings.mode === 'fade' && settings.thumbnail === true && $children.length > 1) {
$thumb_cont.addClass('open');
}
}
settings.onSlidePrev.call(this);
},
slide: function (index) {
if (lightGalleryOn) {
if (!$slider.hasClass('on')) {
$slider.addClass('on');
}
if (this.doCss() && settings.speed !== '') {
if (!$slider.hasClass('speed')) {
$slider.addClass('speed');
}
if (aSpeed === false) {
$slider.css('transition-duration', settings.speed + 'ms');
aSpeed = true;
}
}
if (this.doCss() && settings.easing !== '') {
if (!$slider.hasClass('timing')) {
$slider.addClass('timing');
}
if (aTiming === false) {
$slider.css('transition-timing-function', settings.easing);
aTiming = true;
}
}
settings.onSlideBefore.call(this);
}
if (settings.mode === 'slide') {
if (this.doCss() && !$slider.hasClass('slide')) {
$slider.addClass('slide');
}
/* if(this.doCss()){
$slider.css({ 'transform' : 'translate3d('+(-index*100)+'%, 0px, 0px)' });
}*/
if (!this.doCss() && !lightGalleryOn) {
$slider.css({
left: (-index * 100) + '%'
});
//$slide.eq(index).css('transition','none');
} else if (!this.doCss() && lightGalleryOn) {
$slider.animate({
left: (-index * 100) + '%'
}, settings.speed, settings.easing);
}
} else if (settings.mode === 'fade') {
if (this.doCss() && !$slider.hasClass('fadeM')) {
$slider.addClass('fadeM');
} else if (!this.doCss() && !$slider.hasClass('animate')) {
$slider.addClass('animate');
}
if (!this.doCss() && !lightGalleryOn) {
$slide.fadeOut(100);
$slide.eq(index).fadeIn(100);
} else if (!this.doCss() && lightGalleryOn) {
$slide.eq(prevIndex).fadeOut(settings.speed, settings.easing);
$slide.eq(index).fadeIn(settings.speed, settings.easing);
}
}
if (index + 1 >= $children.length && settings.auto && settings.loop === false) {
clearInterval(interval);
}
$slide.eq(prevIndex).removeClass('current');
$slide.eq(index).addClass('current');
if (this.doCss() && settings.mode === 'slide') {
if (usingThumb === false) {
$('.prevSlide').removeClass('prevSlide');
$('.nextSlide').removeClass('nextSlide');
$slide.eq(index - 1).addClass('prevSlide');
$slide.eq(index + 1).addClass('nextSlide');
} else {
$slide.eq(index).prevAll().removeClass('nextSlide').addClass('prevSlide');
$slide.eq(index).nextAll().removeClass('prevSlide').addClass('nextSlide');
}
}
if (settings.thumbnail === true && $children.length > 1) {
$thumb.removeClass('active');
$thumb.eq(index).addClass('active');
}
if (settings.controls && settings.hideControlOnEnd && settings.loop === false) {
if (index === 0) {
$prev.addClass('disabled');
} else if (index === $children.length - 1) {
$next.addClass('disabled');
} else {
$prev.add($next).removeClass('disabled');
}
}
prevIndex = index;
lightGalleryOn === false ? settings.onOpen.call(this) : settings.onSlideAfter.call(this);
lightGalleryOn = true;
usingThumb = false;
if (settings.counter) {
$("#lightGallery_counter_current").text(index+1);
}
},
destroy: function () {
settings.onBeforeClose.call(this);
lightGalleryOn = false;
aTiming = false;
aSpeed = false;
usingThumb = false;
clearInterval(interval);
$('.lightGallery').off('mousedown mouseup');
$('body').off('touchstart.lightGallery touchmove.lightGallery touchend.lightGallery');
$(window).off('resize.lightGallery keyup.lightGallery');
$gallery.addClass('fadeM');
setTimeout(function () {
$galleryCont.remove();
$('body').removeClass('lightGallery');
}, 500);
settings.onCloseAfter.call(this);
}
};
lightGallery.init();
return this;
};
}(jQuery));