2016/1/30 Slicebox (lower part)

_layout:function (dir) {
var orientation = this.options.orientation;
if (orientation = = ' R ') {
Orientation = Math.floor (Math.random () * 2) = = 0? ' V ': ' H ';
}
if (this.options.cubiodsRandom) {
This.options.cubiodsCount = Math.floor (Math.random () * this.options.maxCubiodsCount + 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.cubiodsCount; ++i) {
var cuboid = new $. Cuboid (config, i);
This.box.appendTo (Cuboid.getel ());
This.cuboids.push (cuboid);
}
},
_rotate:function () {
this. $items. EQ (this.prev). Removeclass (' sb-current '). Hide ();
for (var i = 0; i < This.options.cubiodsCount; ++i) {
var cuboid = This.cuboids[i],
self = this;
Cuboid.rotate (function (POS) {
if (pos = = self.options.cubiodscount-1) {
Self. $el. css (' overflow ', ' hidden ');
Self.isanimating = false;
Self. $box. Remove ();
var $current = self. $items. EQ (self.current);
$current. CSS (' Display ', ' block ');
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 ();
},
_add:function ($items, callback) {
this. $items = this. $items. Add ($items);
This.itemscount = this. $items. length;
if (callback) {
Callback.all ($items);
}
},
Next:function () {
This._stopslideshow ();
This._navigate (' Next ');
},
Previous:function () {
This._stopslideshow ();
This._navigate (' prev ');
},
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);
},
Play:function () {
if (!this.isplaying) {
This.isplaying = true;
This._navigate (' Next ');
This.options.autoplay = true;
This._startslideshow ();
}
},
Pause:function () {
if (this.isplaying) {
This._stopslideshow ();
}
},
Isactive:function () {
return this.isanimating;
},
Destroy:function (callback) {
This._destroy (callback);
}
};
$. Cuboid = function (config, POS) {
This.conig = 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 was 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 ': ' Translate (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.width:this.size.height;
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: {
Height:measure,
Width: (this.config.o = = ' V ')? This.size.width + this.extra:this.width,
Top: (THIS.CONFIG.O = = ' V ')? THIS.SIZE.HEIGHT/2-THIS.SIZE.WIDTH/2:0,
Backgroundcolor:this.config.colorHiddenSides,
Transform: ' Rotate3d (0,1,0,90deg) Translate3d (0,0 ' + (THIS.SIZE.HEIGHT/2) + ' px) '
},
Bottomsidestyle: {
Height:measure,
Width: (this.config.o = = ' V ')? This.size.width + this.extra:this.width,
Top: (THIS.CONFIG.O = = ' V ')? THIS.SIZE.HEIGHT/2-THIS.SIZE.WIDTH/2:0,
Backgroundcolor:this.config.colorHiddenSides,
Transform: ' Rotate3d (0,1,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.size.width + ' pc ' + this.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 = 2;
Break
Case 4:
Sideidx = (THIS.CONFIG.O = = = ' V ')? 5:3;
Break
}
;
}
else{
Switch (self.side)
{
Case
1
:
Animationstyle = Self.animationStyles.side4;
Self.side = 4;
Break
Case
2
:
Animationstyle = Self.animationStyles.side4;
Self.side = 1;
Break
Case
3
:
Animationstyle = Self.animationStyles.side4;
Self.side = 2;
Break
Case
4
:
Animationstyle = Self.animationStyles.side4;
Self.side = 3;
Break
}
;
}
Self._showimage (self.config.current);
var animateout = {}, Animatein = {};
if (this.config.o = = = ' V ') {
Animateout.left = ' + = ' + self.dispersefactor + ' px ';
Animatein.left = ' + = ' + self.dispersefactor + ' px ';
}
else if (this.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 (massage) {
if (window.console) {
Window.console.error (massage);
}
};
$.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");
Return
}
Self[options].apply (Self.args);
});
}
else{
This.each (function () {
if (self) {
Self._init ();
}
else{
Self = $.date (this, ' Slicebox ', new $. Slicebox (Options,this))
}
});
}
return self;
}
}) (jquery Window);

2016/1/30 Slicebox (lower part)