').addClass( 'sb-perspective' ).css( boxStyle ).appendTo( this.jQueryel );
this.cuboids = [];
this.jQueryel.css( 'overflow', 'visible' );
for( var i = 0; i < this.options.cuboidsCount; ++i ) {
var cuboid = new jQuery.Cuboid( config, i );
this.jQuerybox.append( cuboid.getEl() );
this.cuboids.push( cuboid );
}
},
_rotate : function() {
// hide current item
this.jQueryitems.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.jQueryel.css( 'overflow', 'hidden' );
self.isAnimating = false;
self.jQuerybox.remove();
var jQuerycurrent = self.jQueryitems.eq( self.current );
jQuerycurrent.css( 'display', 'block' ); // show() makes it inline style
setTimeout(function() {
jQuerycurrent.addClass( 'sb-current' );
} , 0 );
self.options.onAfterChange( self.current );
}
});
}
},
_destroy : function( callback ) {
this.jQueryel.off( '.slicebox' ).removeData( 'slicebox' );
jQuerywindow.off( '.slicebox' );
callback.call();
},
// public methos: adds more items to the slicebox
add : function( jQueryitems, callback ) {
this.jQueryitems = this.jQueryitems.add( jQueryitems );
this.itemsCount = this.jQueryitems.length;
if ( callback ) {
callback.call( jQueryitems );
}
},
// 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 );
}
};
jQuery.Cuboid = function( config, pos ) {
this.config = config;
this.pos = pos;
this.side = 1;
this._setSize();
this._configureStyles();
};
jQuery.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 = jQuery.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.jQueryel = jQuery('
').css( this.style )
.css( this.animationStyles.side1 )
.append( jQuery('
').addClass('sb-side').css( this.sidesStyles.frontSideStyle ) )
.append( jQuery('
').addClass('sb-side').css( this.sidesStyles.backSideStyle ) )
.append( jQuery('
').addClass('sb-side').css( this.sidesStyles.rightSideStyle ) )
.append( jQuery('
').addClass('sb-side').css( this.sidesStyles.leftSideStyle ) )
.append( jQuery('
').addClass('sb-side').css( this.sidesStyles.topSideStyle ) )
.append( jQuery('
').addClass('sb-side').css( this.sidesStyles.bottomSideStyle ) );
this._showImage( this.config.prev );
return this.jQueryel;
},
_showImage : function( imgPos ) {
var sideIdx,
jQueryitem = this.config.items.eq( imgPos ),
imgParam = {
'background-size' : this.config.size.width + 'px ' + this.config.size.height + 'px'
};
imgParam.backgroundImage = 'url(' + jQueryitem.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.jQueryel.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.jQueryel.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 );
}
};
jQuery.fn.slicebox = function( options ) {
var self = jQuery.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 ( !jQuery.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 = jQuery.data( this, 'slicebox', new jQuery.Slicebox( options, this ) );
}
});
}
return self;
};
} )( jQuery, window );