/** * jquery.slitslider.js v1.1.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2012, Codrops * http://www.codrops.com */ ;( function( $, window, undefined ) { 'use strict'; /* * debouncedresize: special jQuery event that happens once after a window resize * * latest version and complete README available on Github: * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js * * Copyright 2011 @louis_remi * Licensed under the MIT license. */ var $event = $.event, $special, resizeTimeout; $special = $event.special.debouncedresize = { setup: function() { $( this ).on( "resize", $special.handler ); }, teardown: function() { $( this ).off( "resize", $special.handler ); }, handler: function( event, execAsap ) { // Save the context var context = this, args = arguments, dispatch = function() { // set correct event type event.type = "debouncedresize"; $event.dispatch.apply( context, args ); }; if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } execAsap ? dispatch() : resizeTimeout = setTimeout( dispatch, $special.threshold ); }, threshold: 20 }; // global var $window = $( window ), $document = $( document ), Modernizr = window.Modernizr; $.Slitslider = function( options, element ) { this.$elWrapper = $( element ); this._init( options ); }; $.Slitslider.defaults = { // transitions speed speed : 800, // if true the item's slices will also animate the opacity value optOpacity : false, // amount (%) to translate both slices - adjust as necessary translateFactor : 230, // maximum possible angle maxAngle : 25, // maximum possible scale maxScale : 2, // slideshow on / off autoplay : false, // keyboard navigation keyboard : true, // time between transitions interval : 4000, // callbacks onBeforeChange : function( slide, idx ) { return false; }, onAfterChange : function( slide, idx ) { return false; } }; $.Slitslider.prototype = { _init : function( options ) { // options this.options = $.extend( true, {}, $.Slitslider.defaults, options ); // https://github.com/twitter/bootstrap/issues/2870 this.transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }; this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ]; // suport for css 3d transforms and css transitions this.support = Modernizr.csstransitions && Modernizr.csstransforms3d; // the slider this.$el = this.$elWrapper.children( '.sl-slider' ); // the slides this.$slides = this.$el.children( '.sl-slide' ).hide(); // total slides this.slidesCount = this.$slides.length; // current slide this.current = 0; // control if it's animating this.isAnimating = false; // get container size this._getSize(); // layout this._layout(); // load some events this._loadEvents(); // slideshow if( this.options.autoplay ) { this._startSlideshow(); } }, // gets the current container width & height _getSize : function() { this.size = { width : this.$elWrapper.outerWidth( true ), height : this.$elWrapper.outerHeight( true ) }; }, _layout : function() { this.$slideWrapper = $( '
' ); // wrap the slides this.$slides.wrapAll( this.$slideWrapper ).each( function( i ) { var $slide = $( this ), // vertical || horizontal orientation = $slide.data( 'orientation' ); $slide.addClass( 'sl-slide-' + orientation ) .children() .wrapAll( '
' ) .wrapAll( '
' ); } ); // set the right size of the slider/slides for the current window size this._setSize(); // show first slide this.$slides.eq( this.current ).show(); }, _navigate : function( dir, pos ) { if( this.isAnimating || this.slidesCount < 2 ) { return false; } this.isAnimating = true; var self = this, $currentSlide = this.$slides.eq( this.current ); // if position is passed if( pos !== undefined ) { this.current = pos; } // if not check the boundaries else if( dir === 'next' ) { this.current = this.current < this.slidesCount - 1 ? ++this.current : 0; } else if( dir === 'prev' ) { this.current = this.current > 0 ? --this.current : this.slidesCount - 1; } this.options.onBeforeChange( $currentSlide, this.current ); // next slide to be shown var $nextSlide = this.$slides.eq( this.current ), // the slide we want to cut and animate $movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide, // the following are the data attrs set for each slide configData = $movingSlide.data(), config = {}; config.orientation = configData.orientation || 'horizontal', config.slice1angle = configData.slice1Rotation || 0, config.slice1scale = configData.slice1Scale || 1, config.slice2angle = configData.slice2Rotation || 0, config.slice2scale = configData.slice2Scale || 1; this._validateValues( config ); var cssStyle = config.orientation === 'horizontal' ? { marginTop : -this.size.height / 2 } : { marginLeft : -this.size.width / 2 }, // default slide's slices style resetStyle = { 'transform' : 'translate(0%,0%) rotate(0deg) scale(1)', opacity : 1 }, // slice1 style slice1Style = config.orientation === 'horizontal' ? { 'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')' } : { 'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')' }, // slice2 style slice2Style = config.orientation === 'horizontal' ? { 'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' } : { 'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' }; if( this.options.optOpacity ) { slice1Style.opacity = 0; slice2Style.opacity = 0; } // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next" // or going "prev" according to the direction. // the idea is to make it more interesting by giving some animations to the respective slide's elements //( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' ); $currentSlide.removeClass( 'sl-trans-elems' ); var transitionProp = { 'transition' : 'all ' + this.options.speed + 'ms ease-in-out' }; // add the 2 slices and animate them $movingSlide.css( 'z-index', this.slidesCount ) .find( 'div.sl-content-wrapper' ) .wrap( $( '
' ).css( transitionProp ) ) .parent() .cond( dir === 'prev', function() { var slice = this; this.css( slice1Style ); setTimeout( function() { slice.css( resetStyle ); }, 50 ); }, function() { var slice = this; setTimeout( function() { slice.css( slice1Style ); }, 50 ); } ) .clone() .appendTo( $movingSlide ) .cond( dir === 'prev', function() { var slice = this; this.css( slice2Style ); setTimeout( function() { $currentSlide.addClass( 'sl-trans-back-elems' ); if( self.support ) { slice.css( resetStyle ).on( self.transEndEventName, function() { self._onEndNavigate( slice, $currentSlide, dir ); } ); } else { self._onEndNavigate( slice, $currentSlide, dir ); } }, 50 ); }, function() { var slice = this; setTimeout( function() { $nextSlide.addClass( 'sl-trans-elems' ); if( self.support ) { slice.css( slice2Style ).on( self.transEndEventName, function() { self._onEndNavigate( slice, $currentSlide, dir ); } ); } else { self._onEndNavigate( slice, $currentSlide, dir ); } }, 50 ); } ) .find( 'div.sl-content-wrapper' ) .css( cssStyle ); $nextSlide.show(); }, _validateValues : function( config ) { // OK, so we are restricting the angles and scale values here. // This is to avoid the slices wrong sides to be shown. // you can adjust these values as you wish but make sure you also ajust the // paddings of the slides and also the options.translateFactor value and scale data attrs if( config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle ) { config.slice1angle = this.options.maxAngle; } if( config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle ) { config.slice2angle = this.options.maxAngle; } if( config.slice1scale > this.options.maxScale || config.slice1scale <= 0 ) { config.slice1scale = this.options.maxScale; } if( config.slice2scale > this.options.maxScale || config.slice2scale <= 0 ) { config.slice2scale = this.options.maxScale; } if( config.orientation !== 'vertical' && config.orientation !== 'horizontal' ) { config.orientation = 'horizontal' } }, _onEndNavigate : function( $slice, $oldSlide, dir ) { // reset previous slide's style after next slide is shown var $slide = $slice.parent(), removeClasses = 'sl-trans-elems sl-trans-back-elems'; // remove second slide's slice $slice.remove(); // unwrap.. $slide.css( 'z-index', 1 ) .find( 'div.sl-content-wrapper' ) .unwrap(); // hide previous current slide $oldSlide.hide().removeClass( removeClasses ); $slide.removeClass( removeClasses ); // now we can navigate again.. this.isAnimating = false; this.options.onAfterChange( $slide, this.current ); }, _setSize : function() { // the slider and content wrappers will have the window's width and height var cssStyle = { width : this.size.width, height : this.size.height }; this.$el.css( cssStyle ).find( 'div.sl-content-wrapper' ).css( cssStyle ); }, _loadEvents : function() { var self = this; $window.on( 'debouncedresize.slitslider', function( event ) { // update size values self._getSize(); // set the sizes again self._setSize(); } ); if ( this.options.keyboard ) { $document.on( 'keydown.slitslider', function(e) { var keyCode = e.keyCode || e.which, arrow = { left: 37, up: 38, right: 39, down: 40 }; switch (keyCode) { case arrow.left : self._stopSlideshow(); self._navigate( 'prev' ); break; case arrow.right : self._stopSlideshow(); self._navigate( 'next' ); break; } } ); } }, _startSlideshow: function() { var self = this; this.slideshow = setTimeout( function() { self._navigate( 'next' ); if ( self.options.autoplay ) { self._startSlideshow(); } }, this.options.interval ); }, _stopSlideshow: function() { if ( this.options.autoplay ) { clearTimeout( this.slideshow ); this.isPlaying = false; this.options.autoplay = false; } }, _destroy : function( callback ) { this.$el.off( '.slitslider' ).removeData( 'slitslider' ); $window.off( '.slitslider' ); $document.off( '.slitslider' ); this.$slides.each( function( i ) { var $slide = $( this ), $content = $slide.find( 'div.sl-content' ).children(); $content.appendTo( $slide ); $slide.children( 'div.sl-content-wrapper' ).remove(); } ); this.$slides.unwrap( this.$slideWrapper ).hide(); this.$slides.eq( 0 ).show(); if( callback ) { callback.call(); } }, // public methos: adds more slides to the slider add : function( $slides, callback ) { this.$slides = this.$slides.add( $slides ); var self = this; $slides.each( function( i ) { var $slide = $( this ), // vertical || horizontal orientation = $slide.data( 'orientation' ); $slide.hide().addClass( 'sl-slide-' + orientation ) .children() .wrapAll( '
' ) .wrapAll( '
' ) .end() .appendTo( self.$el.find( 'div.sl-slides-wrapper' ) ); } ); this._setSize(); this.slidesCount = this.$slides.length; if ( callback ) { callback.call( $items ); } }, // public method: shows next slide next : function() { this._stopSlideshow(); this._navigate( 'next' ); }, // public method: shows previous slide previous : function() { this._stopSlideshow(); this._navigate( 'prev' ); }, // public method: goes to a specific slide jump : function( pos ) { pos -= 1; if( pos === this.current || pos >= this.slidesCount || pos < 0 ) { return false; } this._stopSlideshow(); this._navigate( pos > this.current ? 'next' : 'prev', pos ); }, // public method: starts the slideshow // any call to next(), previous() or jump() will stop the slideshow play : function() { if( !this.isPlaying ) { this.isPlaying = true; this._navigate( 'next' ); this.options.autoplay = true; this._startSlideshow(); } }, // public method: pauses the slideshow pause : function() { if( this.isPlaying ) { this._stopSlideshow(); } }, // public method: check if isAnimating is true isActive : function() { return this.isAnimating; }, // publicc methos: destroys the slicebox instance destroy : function( callback ) { this._destroy( callback ); } }; var logError = function( message ) { if ( window.console ) { window.console.error( message ); } }; $.fn.slitslider = function( options ) { var self = $.data( this, 'slitslider' ); if ( typeof options === 'string' ) { var args = Array.prototype.slice.call( arguments, 1 ); this.each(function() { if ( !self ) { logError( "cannot call methods on slitslider prior to initialization; " + "attempted to call method '" + options + "'" ); return; } if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) { logError( "no such method '" + options + "' for slitslider self" ); return; } self[ options ].apply( self, args ); }); } else { this.each(function() { if ( self ) { self._init(); } else { self = $.data( this, 'slitslider', new $.Slitslider( options, this ) ); } }); } return self; }; } )( jQuery, window );