jquery-simple-carousel-gallery
Version:
A very simple image / video gallery with a carousel of thumbnails.
9 lines • 4.4 kB
JavaScript
/*
* jquery-simple-carousel-gallery - v0.9.3
* A very simple image / video gallery with a carousel of thumbnails.
* https://github.com/jthomerson/jquery-simple-carousel-gallery
*
* Made by Jeremy Thomerson
* Under Apache-2.0 License
*/
!function(a,b,c){"use strict";function d(b,c,d){this.element=a(b),this.items=c,this.settings=a.extend({},e,d),this.template=a(this.settings.templateSelector),this._defaults=e,this._name=f,this.init()}var e,f="SimpleCarouselGallery";e={templateSelector:"#SCGTemplate",preload:!0,allowPrevNextWrapAround:!1,mediaFadeInSpeed:200,mediaFadeOutSpeed:200,carouselAnimationSpeed:400,keyboardNavigation:!0,autoPlay:!0},a.extend(d.prototype,{_currentIndex:-1,init:function(){var c=this,d=this.template.clone();d.find(".media").empty(),this._renderCarouselInto(d),this.element.empty().append(d.html()),a(b).resize(this._scrollToSelectedThumbnail.bind(this)),this.element.find(".carouselItem img").eq(0).load(this._scrollToSelectedThumbnail.bind(this)),this.element.on("click",".carouselItem",function(b){var d=a(b.target).closest(".carouselItem").data("index");b.preventDefault(),c.goTo(d)}),this.goTo(0),this._registerKeyboardListeners(),this.element.find(".goToPrevious").click(this.previous.bind(this)),this.element.find(".goToNext").click(this.next.bind(this))},_registerKeyboardListeners:function(){this.settings.keyboardNavigation&&a(c).on("keyup",function(a){37===a.keyCode?this.previous():39===a.keyCode&&this.next()}.bind(this))},_getPrevInd:function(){var a=this._currentIndex-1;return 0>a&&(a=this.settings.allowPrevNextWrapAround?this.items.length-1:0),a},previous:function(a){a&&a.preventDefault(),this.goTo(this._getPrevInd())},_getNextInd:function(){var a=this._currentIndex+1;return a>=this.items.length&&(a=this.settings.allowPrevNextWrapAround?0:this.items.length-1),a},next:function(a){a&&a.preventDefault(),this.goTo(this._getNextInd())},_renderCarouselInto:function(b){var c=this.template.find(".carouselItem"),d=b.find(".carousel");d.empty(),a.each(this.items,function(b,e){var f=c.clone(),g=a("<img />"),h=a("<a />");f.attr("data-index",b).addClass(e.type||"image"),h.attr("href","#"),g.attr("src",e.thumb),g.appendTo(h),h.appendTo(f),f.appendTo(d)})},_createMarkupFor:function(b){if("video"===b.type){var c=this.template.find(".media .video").clone().contents();return c.find("source").attr("src",b.src),c}return a("<img />").attr("src",b.src)},_renderCurrent:function(){function a(){f.hide(),d.empty().append(f),f.fadeIn(e,function(){if("video"===c.type&&b.settings.autoPlay){var a=f.andSelf().filter("video").get(0);a&&a.play()}})}var b=this,c=this.items[this._currentIndex],d=this.element.find(".media"),e=this.settings.mediaFadeInSpeed,f=this._createMarkupFor(c);this._currentMediaItem?this._currentMediaItem.fadeOut(this.settings.mediaFadeOutSpeed,a):a(),this._currentMediaItem=f,this.element.find(".caption").empty().html(c.caption),this.element.trigger("galleryItemShown",c)},_highlightCurrentThumbnail:function(){this.element.find(".carousel .carouselItem").removeClass("active").eq(this._currentIndex).addClass("active"),this._scrollToSelectedThumbnail()},_scrollToSelectedThumbnail:function(){var a=this.element.find(".carousel"),b=a.find(".carouselItem:first-child"),c=a.find(".carouselItem.active"),d=a.width(),e=c.outerWidth(!0)-c.outerWidth(),f=c.outerWidth()+e/2,g=d/2-f/2-f*this._currentIndex;b.animate({marginLeft:g+"px"},this.settings.carouselAnimationSpeed)},_updateButtons:function(){this.settings.allowPrevNextWrapAround||(0===this._currentIndex?this.element.find(".goToPrevious").addClass("disabled"):this.element.find(".goToPrevious").removeClass("disabled"),this._currentIndex===this.items.length-1?this.element.find(".goToNext").addClass("disabled"):this.element.find(".goToNext").removeClass("disabled"))},_preloadSurrounding:function(){if(this.settings.preload){var b=this._getNextInd(),c=this._getPrevInd();a.each([c,b],function(b,c){var d=this.items[c];d.__isLoaded||"video"===d.type||c===this._currentIndex||a("<img />").attr("src",d.src).load(function(){a(this).remove()})}.bind(this))}},goTo:function(a){a!==this._currentIndex&&(this._currentIndex=a,this._updateButtons(),this._renderCurrent(),this._highlightCurrentThumbnail(),this._preloadSurrounding())}}),a.fn[f]=function(b,c){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new d(this,b,c))})}}(jQuery,window,document);