/** ========================================================== * jquery lightGallery.js v1.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: 'ease',//'cubic-bezier(0.25, 0, 0.25, 1)',// speed: 1000, loop: false, auto: false, pause: 4000, escKey:true, rel:false, exThumbImage: false, thumbnail: true, caption:false, desc: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.touch(); this.enableTouch(); this.getWidth(); this.closeSlide(); }, build: function(){ this.loadContent(index); this.addCaption(); this.addDesc();//description this.slideTo(); this.buildThumbnail(); this.keyPress(); this.slide(index); 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= swipeThreshold ){ $this.prevSlide(); clearInterval(interval); } else if( distance <= - swipeThreshold ){ $this.nextSlide(); clearInterval(interval); } $('.touch').off('touchmove').removeClass('touch'); }); } }, 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(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/); var vimeo = src.match(/vimeo\.com\/([0-9]*)/); if( youtube || vimeo){ return true; } }, loadVideo: function(src,a,_id){ var youtube = src.match(/watch\?v=([a-zA-Z0-9\-_]+)/); var vimeo = src.match(/vimeo\.com\/([0-9]*)/); 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 '
'+video+'
'; }, 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'); } 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+''; } $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+''); } } } }, 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'; } }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('All photos ('+$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 touchend', function(){ $this.prevSlide(); clearInterval(interval); }); $next.bind('click touchend', 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', 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; }, destroy : function(){ settings.onBeforeClose.call( this ); lightGalleryOn = false; aTiming= false; aSpeed = false; usingThumb=false; clearInterval(interval); $('.lightGallery').unbind('mousedown'); $('.lightGallery').unbind('mouseup'); $('body').removeClass('touch'); $('body').unbind('touchstart'); $('body').unbind('touchmove'); $('body').unbind('touchend'); $(window).unbind('resize'); $(window).unbind('keyup'); $gallery.addClass('fadeM'); setTimeout(function(){ $galleryCont.remove(); $('body').removeClass('lightGallery'); },500); settings.onCloseAfter.call( this ); } }; lightGallery.init(); }; }(jQuery));