Created
October 5, 2013 07:58
-
-
Save cubika/6838128 to your computer and use it in GitHub Desktop.
jquery slicebox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * jquery.slicebox.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: 50 | |
| }; | |
| // ======================= imagesLoaded Plugin =============================== | |
| // https://github.com/desandro/imagesloaded | |
| // $('#my-container').imagesLoaded(myFunction) | |
| // execute a callback when all images have loaded. | |
| // needed because .load() doesn't work on cached images | |
| // callback function gets image collection as argument | |
| // this is the container | |
| // original: mit license. paul irish. 2010. | |
| // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou | |
| // blank image data-uri bypasses webkit log warning (thx doug jones) | |
| var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; | |
| $.fn.imagesLoaded = function( callback ) { | |
| var $this = this, | |
| deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, | |
| hasNotify = $.isFunction(deferred.notify), | |
| $images = $this.find('img').add( $this.filter('img') ), | |
| loaded = [], | |
| proper = [], | |
| broken = []; | |
| // Register deferred callbacks | |
| if ($.isPlainObject(callback)) { | |
| $.each(callback, function (key, value) { | |
| if (key === 'callback') { | |
| callback = value; | |
| } else if (deferred) { | |
| deferred[key](value); | |
| } | |
| }); | |
| } | |
| function doneLoading() { | |
| var $proper = $(proper), | |
| $broken = $(broken); | |
| if ( deferred ) { | |
| if ( broken.length ) { | |
| deferred.reject( $images, $proper, $broken ); | |
| } else { | |
| deferred.resolve( $images ); | |
| } | |
| } | |
| if ( $.isFunction( callback ) ) { | |
| callback.call( $this, $images, $proper, $broken ); | |
| } | |
| } | |
| function imgLoaded( img, isBroken ) { | |
| // don't proceed if BLANK image, or image is already loaded | |
| if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { | |
| return; | |
| } | |
| // store element in loaded images array | |
| loaded.push( img ); | |
| // keep track of broken and properly loaded images | |
| if ( isBroken ) { | |
| broken.push( img ); | |
| } else { | |
| proper.push( img ); | |
| } | |
| // cache image and its state for future calls | |
| $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); | |
| // trigger deferred progress method if present | |
| if ( hasNotify ) { | |
| deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); | |
| } | |
| // call doneLoading and clean listeners if all images are loaded | |
| if ( $images.length === loaded.length ){ | |
| setTimeout( doneLoading ); | |
| $images.unbind( '.imagesLoaded' ); | |
| } | |
| } | |
| // if no images, trigger immediately | |
| if ( !$images.length ) { | |
| doneLoading(); | |
| } else { | |
| $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ | |
| // trigger imgLoaded | |
| imgLoaded( event.target, event.type === 'error' ); | |
| }).each( function( i, el ) { | |
| var src = el.src; | |
| // find out if this image has been already checked for status | |
| // if it was, and src has not changed, call imgLoaded on it | |
| var cached = $.data( el, 'imagesLoaded' ); | |
| if ( cached && cached.src === src ) { | |
| imgLoaded( el, cached.isBroken ); | |
| return; | |
| } | |
| // if complete is true and browser supports natural sizes, try | |
| // to check for image status manually | |
| if ( el.complete && el.naturalWidth !== undefined ) { | |
| imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); | |
| return; | |
| } | |
| // cached images don't fire load sometimes, so we reset src, but only when | |
| // dealing with IE, or image is complete (loaded) and failed manual check | |
| // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f | |
| if ( el.readyState || el.complete ) { | |
| el.src = BLANK; | |
| el.src = src; | |
| } | |
| }); | |
| } | |
| return deferred ? deferred.promise( $this ) : $this; | |
| }; | |
| // global | |
| var $window = $( window ), | |
| Modernizr = window.Modernizr; | |
| $.Slicebox = function( options, element ) { | |
| this.$el = $( element ); | |
| this._init( options ); | |
| }; | |
| $.Slicebox.defaults = { | |
| // (v)ertical, (h)orizontal or (r)andom | |
| orientation : 'v', | |
| // perspective value | |
| perspective : 1200, | |
| // number of slices / cuboids | |
| // needs to be an odd number 15 => number > 0 (if you want the limit higher, change the _validate function). | |
| cuboidsCount : 5, | |
| // if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten) | |
| cuboidsRandom : false, | |
| // the range of possible number of cuboids if cuboidsRandom is true | |
| // it is strongly recommended that you do not set a very large number :) | |
| maxCuboidsCount : 5, | |
| // each cuboid will move x pixels left / top (depending on orientation). The middle cuboid doesn't move. the middle cuboid's neighbors will move disperseFactor pixels | |
| disperseFactor : 0, | |
| // color of the hidden sides | |
| colorHiddenSides : '#222', | |
| // the animation will start from left to right. The left most cuboid will be the first one to rotate | |
| // this is the interval between each rotation in ms | |
| sequentialFactor : 150, | |
| // animation speed | |
| // this is the speed that takes "1" cuboid to rotate | |
| speed : 600, | |
| // transition easing | |
| easing : 'ease', | |
| // if true the slicebox will start the animation automatically | |
| autoplay : false, | |
| // time (ms) between each rotation, if autoplay is true | |
| interval: 3000, | |
| // the fallback will just fade out / fade in the items | |
| // this is the time fr the fade effect | |
| fallbackFadeSpeed : 300, | |
| // callbacks | |
| onBeforeChange : function( position ) { return false; }, | |
| onAfterChange : function( position ) { return false; }, | |
| onReady : function() { return false; } | |
| }; | |
| $.Slicebox.prototype = { | |
| _init : function( options ) { | |
| // options | |
| this.options = $.extend( true, {}, $.Slicebox.defaults, options ); | |
| this._validate(); | |
| // all the items | |
| this.$items = this.$el.children( 'li' ); | |
| // total number of items | |
| this.itemsCount = this.$items.length; | |
| // if there's no items return | |
| if(this.itemsCount === 0 ) { | |
| return false; | |
| }; | |
| // suport for css 3d transforms and css transitions | |
| this.support = Modernizr.csstransitions && Modernizr.csstransforms3d; | |
| // current image index | |
| this.current = 0; | |
| // control if the slicebox is animating | |
| this.isAnimating = false; | |
| // control if slicebox is ready (all images loaded) | |
| this.isReady = false; | |
| // preload the images | |
| var self = this; | |
| this.$el.imagesLoaded( function() { | |
| // we need to hide the items except first one (current default value) | |
| var $current = self.$items.eq( self.current ).css( 'display', 'block' ).addClass( 'sb-current' ); | |
| // get real size of image | |
| var i = new Image(); | |
| i.src = $current.find( 'img' ).attr( 'src' ); | |
| self.realWidth = i.width; | |
| // assuming all images with same size | |
| self._setSize(); | |
| self._setStyle(); | |
| self._initEvents(); | |
| self.options.onReady(); | |
| self.isReady = true; | |
| if( self.options.autoplay ) { | |
| self._startSlideshow(); | |
| } | |
| }); | |
| }, | |
| _validate : function( options ) { | |
| if( this.options.cuboidsCount < 0 ){ | |
| this.options.cuboidsCount = 1; | |
| } | |
| else if( this.options.cuboidsCount > 15 ) { | |
| this.options.cuboidsCount = 15; | |
| } | |
| else if( this.options.cuboidsCount %2 === 0 ) { | |
| ++this.options.cuboidsCount; | |
| } | |
| if( this.options.maxCuboidsCount < 0 ){ | |
| this.options.maxCuboidsCount = 1; | |
| } | |
| else if( this.options.maxCuboidsCount > 15 ) { | |
| this.options.maxCuboidsCount = 15; | |
| } | |
| else if( this.options.maxCuboidsCount %2 === 0 ) { | |
| ++this.options.maxCuboidsCount; | |
| } | |
| if( this.options.disperseFactor < 0 ) { | |
| this.options.disperseFactor = 0; | |
| } | |
| if( this.options.orientation !== 'v' && this.options.orientation !== 'h' && this.options.orientation !== 'r' ) { | |
| this.options.orientation = 'v'; | |
| } | |
| }, | |
| _setSize : function() { | |
| var $visible = this.$items.eq( this.current ).find( 'img' ); | |
| this.size = { | |
| width : $visible.width(), | |
| height : $visible.height() | |
| }; | |
| }, | |
| _setStyle : function() { | |
| // max-width is the real size of the images | |
| this.$el.css( { | |
| 'max-width' : this.realWidth | |
| } ); | |
| }, | |
| _initEvents : function() { | |
| var self = this; | |
| $window.on( 'debouncedresize.slicebox', function( event ) { | |
| // assuming all images with same size | |
| self._setSize(); | |
| } ); | |
| }, | |
| _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; | |
| } | |
| }, | |
| _navigate : function( dir, pos ) { | |
| if( this.isAnimating || !this.isReady || this.itemsCount < 2 ) { | |
| return false; | |
| } | |
| this.isAnimating = true; | |
| // current item's index | |
| this.prev = 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.itemsCount - 1 ? this.current + 1 : 0; | |
| } | |
| else if( dir === 'prev' ) { | |
| this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1; | |
| } | |
| // callback trigger | |
| this.options.onBeforeChange( this.current ); | |
| if( !this.support ) { | |
| this._fade( dir ); | |
| } | |
| else { | |
| this._layout( dir ); | |
| this._rotate(); | |
| } | |
| }, | |
| _fade : function( dir ) { | |
| var self = this, | |
| $visible = this.$items.eq( this.prev ), | |
| h = $visible.find( 'img' ).height(); | |
| this.$el.css( 'height', h ); | |
| this.$items.css( 'position', 'absolute' ); | |
| this.$items.eq( this.current ).fadeIn( this.options.fallbackFadeSpeed, function() { | |
| $( this ).css( 'display', 'block' ).addClass( 'sb-current' ); | |
| self.$el.css( 'height', 'auto' ); | |
| self.$items.css( 'position', 'relative' ); | |
| self.isAnimating = false; | |
| } ); | |
| self.$items.eq( self.prev ).removeClass( 'sb-current' ).fadeOut( this.options.fallbackFadeSpeed ); | |
| }, | |
| _layout : function( dir ) { | |
| // create a structure like this and append it to the main container (this.$el): | |
| // <div> wrapper with perspective | |
| // <div> | |
| // <div></div> front side | |
| // <div></div> back side | |
| // <div></div> right side | |
| // <div></div> left side | |
| // <div></div> top side | |
| // <div></div> bottom side | |
| // </div> | |
| // <div>..</div> | |
| // <div>..</div> | |
| // <div>..</div> | |
| // ... number of slices defined in options | |
| // </div> | |
| var orientation = this.options.orientation; | |
| if( orientation === 'r' ) { | |
| orientation = Math.floor( Math.random() * 2 ) === 0 ? 'v' : 'h'; | |
| } | |
| if( this.options.cuboidsRandom ) { | |
| this.options.cuboidsCount = Math.floor( Math.random() * this.options.maxCuboidsCount + 1 ); | |
| } | |
| this._validate(); | |
| var boxStyle = { | |
| 'width' : this.size.width, | |
| 'height' : this.size.height, | |
| 'perspective' : this.options.perspective + 'px' | |
| }, | |
| config = $.extend( this.options, { | |
| size : this.size, | |
| items : this.$items, | |
| direction : dir, | |
| prev : this.prev, | |
| current : this.current, | |
| o : orientation | |
| } ), | |
| self = this; | |
| this.$box = $('<div>').addClass( 'sb-perspective' ).css( boxStyle ).appendTo( this.$el ); | |
| this.cuboids = []; | |
| this.$el.css( 'overflow', 'visible' ); | |
| for( var i = 0; i < this.options.cuboidsCount; ++i ) { | |
| var cuboid = new $.Cuboid( config, i ); | |
| this.$box.append( cuboid.getEl() ); | |
| this.cuboids.push( cuboid ); | |
| } | |
| }, | |
| _rotate : function() { | |
| // hide current item | |
| this.$items.eq( this.prev ).removeClass( 'sb-current' ).hide(); | |
| for( var i = 0; i < this.options.cuboidsCount; ++i ) { | |
| var cuboid = this.cuboids[ i ], | |
| self = this; | |
| cuboid.rotate( function( pos ) { | |
| if( pos === self.options.cuboidsCount - 1 ) { | |
| self.$el.css( 'overflow', 'hidden' ); | |
| self.isAnimating = false; | |
| self.$box.remove(); | |
| var $current = self.$items.eq( self.current ); | |
| $current.css( 'display', 'block' ); // show() makes it inline style | |
| setTimeout(function() { | |
| $current.addClass( 'sb-current' ); | |
| } , 0 ); | |
| self.options.onAfterChange( self.current ); | |
| } | |
| }); | |
| } | |
| }, | |
| _destroy : function( callback ) { | |
| this.$el.off( '.slicebox' ).removeData( 'slicebox' ); | |
| $window.off( '.slicebox' ); | |
| callback.call(); | |
| }, | |
| // public methos: adds more items to the slicebox | |
| add : function( $items, callback ) { | |
| this.$items = this.$items.add( $items ); | |
| this.itemsCount = this.$items.length; | |
| if ( callback ) { | |
| callback.call( $items ); | |
| } | |
| }, | |
| // public method: shows next image | |
| next : function() { | |
| this._stopSlideshow(); | |
| this._navigate( 'next' ); | |
| }, | |
| // public method: shows previous image | |
| previous : function() { | |
| this._stopSlideshow(); | |
| this._navigate( 'prev' ); | |
| }, | |
| // public method: goes to a specific image | |
| jump : function( pos ) { | |
| pos -= 1; | |
| if( pos === this.current || pos >= this.itemsCount || 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(); | |
| } | |
| }, | |
| // publicc methos: 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 ); | |
| } | |
| }; | |
| $.Cuboid = function( config, pos ) { | |
| this.config = config; | |
| this.pos = pos; | |
| this.side = 1; | |
| this._setSize(); | |
| this._configureStyles(); | |
| }; | |
| $.Cuboid.prototype = { | |
| _setSize : function() { | |
| this.size = { | |
| width : this.config.o === 'v' ? Math.floor( this.config.size.width / this.config.cuboidsCount ) : this.config.size.width, | |
| height : this.config.o === 'v' ? this.config.size.height : Math.floor( this.config.size.height / this.config.cuboidsCount ) | |
| }; | |
| // extra space to fix gaps | |
| this.extra = this.config.o === 'v' ? this.config.size.width - ( this.size.width * this.config.cuboidsCount ) : this.config.size.height - ( this.size.height * this.config.cuboidsCount ); | |
| }, | |
| _configureStyles : function() { | |
| // style for the cuboid element | |
| // set z-indexes based on the cuboid's position | |
| var middlepos = Math.ceil( this.config.cuboidsCount / 2 ), | |
| positionStyle = this.pos < middlepos ? { | |
| zIndex : ( this.pos + 1 ) * 100, | |
| left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0, | |
| top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos | |
| } : { | |
| zIndex : (this.config.cuboidsCount - this.pos) * 100, | |
| left : ( this.config.o === 'v' ) ? this.size.width * this.pos : 0, | |
| top : ( this.config.o === 'v' ) ? 0 : this.size.height * this.pos | |
| }; | |
| // how much this cuboid is going to move (left or top values) | |
| this.disperseFactor = this.config.disperseFactor * ( ( this.pos + 1 ) - middlepos ); | |
| this.style = $.extend( { | |
| '-webkit-transition' : '-webkit-transform ' + this.config.speed + 'ms ' + this.config.easing, | |
| '-moz-transition' : '-moz-transform ' + this.config.speed + 'ms ' + this.config.easing, | |
| '-o-transition' : '-o-transform ' + this.config.speed + 'ms ' + this.config.easing, | |
| '-ms-transition' : '-ms-transform ' + this.config.speed + 'ms ' + this.config.easing, | |
| 'transition' : 'transform ' + this.config.speed + 'ms ' + this.config.easing | |
| }, positionStyle, this.size ); | |
| this.animationStyles = { | |
| side1 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px )' }, | |
| side2 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -90deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -90deg )' }, | |
| side3 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -180deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -180deg )' }, | |
| side4 : ( this.config.o === 'v' ) ? { 'transform' : 'translate3d( 0, 0, -' + ( this.size.height / 2 ) + 'px ) rotate3d( 1, 0, 0, -270deg )' } : { 'transform' : 'translate3d( 0, 0, -' + ( this.size.width / 2 ) + 'px ) rotate3d( 0, 1, 0, -270deg )' } | |
| }; | |
| var measure = ( this.config.o === 'v' ) ? this.size.height : this.size.width; | |
| this.sidesStyles = { | |
| frontSideStyle : { | |
| width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width, | |
| height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra, | |
| backgroundColor : this.config.colorHiddenSides, | |
| transform : 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px )' | |
| }, | |
| backSideStyle : { | |
| width : this.size.width, | |
| height : this.size.height, | |
| backgroundColor : this.config.colorHiddenSides, | |
| transform : 'rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, ' + ( measure / 2 ) + 'px ) rotateZ( 180deg )' | |
| }, | |
| rightSideStyle : { | |
| width : measure, | |
| height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra, | |
| left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2 : 0, | |
| backgroundColor : this.config.colorHiddenSides, | |
| transform : 'rotate3d( 0, 1, 0, 90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )' | |
| }, | |
| leftSideStyle : { | |
| width : measure, | |
| height : ( this.config.o === 'v' ) ? this.size.height : this.size.height + this.extra, | |
| left : ( this.config.o === 'v' ) ? this.size.width / 2 - this.size.height / 2 : 0, | |
| backgroundColor : this.config.colorHiddenSides, | |
| transform : 'rotate3d( 0, 1, 0, -90deg ) translate3d( 0, 0, ' + ( this.size.width / 2 ) + 'px )' | |
| }, | |
| topSideStyle : { | |
| width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width, | |
| height : measure, | |
| top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2, | |
| backgroundColor : this.config.colorHiddenSides, | |
| transform : 'rotate3d( 1, 0, 0, 90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )' | |
| }, | |
| bottomSideStyle : { | |
| width : ( this.config.o === 'v' ) ? this.size.width + this.extra : this.size.width, | |
| height : measure, | |
| top : ( this.config.o === 'v' ) ? 0 : this.size.height / 2 - this.size.width / 2, | |
| backgroundColor : this.config.colorHiddenSides, | |
| transform : 'rotate3d( 1, 0, 0, -90deg ) translate3d( 0, 0, ' + ( this.size.height / 2 ) + 'px )' | |
| } | |
| }; | |
| }, | |
| getEl : function() { | |
| this.$el = $('<div/>').css( this.style ) | |
| .css( this.animationStyles.side1 ) | |
| .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.frontSideStyle ) ) | |
| .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.backSideStyle ) ) | |
| .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.rightSideStyle ) ) | |
| .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.leftSideStyle ) ) | |
| .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.topSideStyle ) ) | |
| .append( $('<div/>').addClass('sb-side').css( this.sidesStyles.bottomSideStyle ) ); | |
| this._showImage( this.config.prev ); | |
| return this.$el; | |
| }, | |
| _showImage : function( imgPos ) { | |
| var sideIdx, | |
| $item = this.config.items.eq( imgPos ), | |
| imgParam = { | |
| 'background-size' : this.config.size.width + 'px ' + this.config.size.height + 'px' | |
| }; | |
| imgParam.backgroundImage = 'url(' + $item.find( 'img' ).attr('src') + ')'; | |
| switch( this.side ) { | |
| case 1 : sideIdx = 0; break; | |
| case 2 : sideIdx = ( this.config.o === 'v' ) ? 4 : 2; break; | |
| case 3 : sideIdx = 1; break; | |
| case 4 : sideIdx = ( this.config.o === 'v' ) ? 5 : 3; break; | |
| }; | |
| imgParam.backgroundPosition = ( this.config.o === 'v' ) ? - ( this.pos * this.size.width ) + 'px 0px' : '0px -' + ( this.pos * this.size.height ) + 'px'; | |
| this.$el.children().eq( sideIdx ).css( imgParam ); | |
| }, | |
| rotate : function( callback ) { | |
| var self = this, animationStyle; | |
| setTimeout(function() { | |
| if( self.config.direction === 'next' ) { | |
| switch( self.side ) { | |
| case 1 : animationStyle = self.animationStyles.side2; self.side = 2; break; | |
| case 2 : animationStyle = self.animationStyles.side3; self.side = 3; break; | |
| case 3 : animationStyle = self.animationStyles.side4; self.side = 4; break; | |
| case 4 : animationStyle = self.animationStyles.side1; self.side = 1; break; | |
| }; | |
| } | |
| else { | |
| switch( self.side ) { | |
| case 1 : animationStyle = self.animationStyles.side4; self.side = 4; break; | |
| case 2 : animationStyle = self.animationStyles.side1; self.side = 1; break; | |
| case 3 : animationStyle = self.animationStyles.side2; self.side = 2; break; | |
| case 4 : animationStyle = self.animationStyles.side3; self.side = 3; break; | |
| }; | |
| } | |
| self._showImage( self.config.current ); | |
| var animateOut = {}, animateIn = {}; | |
| if( self.config.o === 'v' ) { | |
| animateOut.left = '+=' + self.disperseFactor + 'px'; | |
| animateIn.left = '-=' + self.disperseFactor + 'px'; | |
| } | |
| else if( self.config.o === 'h' ) { | |
| animateOut.top = '+=' + self.disperseFactor + 'px'; | |
| animateIn.top = '-=' + self.disperseFactor + 'px'; | |
| } | |
| self.$el.css( animationStyle ).animate( animateOut, self.config.speed / 2 ).animate( animateIn, self.config.speed / 2 , function() { | |
| if( callback ) { | |
| callback.call( self, self.pos ); | |
| } | |
| }); | |
| }, this.config.sequentialFactor * this.pos + 30 ); | |
| } | |
| }; | |
| var logError = function( message ) { | |
| if ( window.console ) { | |
| window.console.error( message ); | |
| } | |
| }; | |
| $.fn.slicebox = function( options ) { | |
| var self = $.data( this, 'slicebox' ); | |
| if ( typeof options === 'string' ) { | |
| var args = Array.prototype.slice.call( arguments, 1 ); | |
| this.each(function() { | |
| if ( !self ) { | |
| logError( "cannot call methods on slicebox prior to initialization; " + | |
| "attempted to call method '" + options + "'" ); | |
| return; | |
| } | |
| if ( !$.isFunction( self[options] ) || options.charAt(0) === "_" ) { | |
| logError( "no such method '" + options + "' for slicebox self" ); | |
| return; | |
| } | |
| self[ options ].apply( self, args ); | |
| }); | |
| } | |
| else { | |
| this.each(function() { | |
| if ( self ) { | |
| self._init(); | |
| } | |
| else { | |
| self = $.data( this, 'slicebox', new $.Slicebox( options, this ) ); | |
| } | |
| }); | |
| } | |
| return self; | |
| }; | |
| } )( jQuery, window ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Slicebox Style */ | |
| .sb-slider { | |
| margin: 10px auto; | |
| position: relative; | |
| overflow: hidden; | |
| width: 100%; | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .sb-slider li { | |
| margin: 0; | |
| padding: 0; | |
| display: none; | |
| } | |
| .sb-slider li > a { | |
| outline: none; | |
| } | |
| .sb-slider li > a img { | |
| border: none; | |
| } | |
| .sb-slider img { | |
| max-width: 100%; | |
| display: block; | |
| } | |
| .sb-description { | |
| padding: 20px; | |
| bottom: 10px; | |
| left: 10px; | |
| right: 10px; | |
| z-index: 1000; | |
| position: absolute; | |
| background: #CBBFAE; | |
| background: rgba(190,176,155, 0.4); | |
| border-left: 4px solid rgba(255,255,255,0.7); | |
| -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: alpha(opacity=0); | |
| opacity: 0; | |
| color: #fff; | |
| -webkit-transition: all 200ms; | |
| -moz-transition: all 200ms; | |
| -o-transition: all 200ms; | |
| -ms-transition: all 200ms; | |
| transition: all 200ms; | |
| } | |
| .sb-slider li.sb-current .sb-description { | |
| -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | |
| filter: alpha(opacity=80); | |
| opacity: 1; | |
| } | |
| .sb-slider li.sb-current .sb-description:hover { | |
| -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; | |
| filter: alpha(opacity=99); | |
| background: rgba(190,176,155, 0.7); | |
| } | |
| .sb-perspective { | |
| position: relative; | |
| } | |
| .sb-perspective > div { | |
| position: absolute; | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -o-transform-style: preserve-3d; | |
| -ms-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| -webkit-backface-visibility : hidden; | |
| -moz-backface-visibility : hidden; | |
| -o-backface-visibility : hidden; | |
| -ms-backface-visibility : hidden; | |
| backface-visibility : hidden; | |
| } | |
| .sb-side { | |
| margin: 0; | |
| display: block; | |
| position: absolute; | |
| -moz-backface-visibility : hidden; | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -o-transform-style: preserve-3d; | |
| -ms-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment