jQuery slicebox configuration question

[faz139]

This is a question on the jQuery Slicebox http://tympanus.net/Development/Slicebox/index3.html

I couldnt' see a jQuery section so if this needs moving, please go ahead.

I'm just trying to change the default animation so instead of slicing it always does the 'revolving cube' type animation. If you look a the link above, that's on random so does a bit of everything which is the same script i'm using but I can't pinpoint where the setting for this is.

I can only give you all the code if you need it but the configuration bits as stated in the docs are here (this is how I have it set up now)


$.Slicebox.defaults = {
// (v)ertical, (h)orizontal or (r)andom
orientation : 'h',
// 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 : true,
// 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; }
};


If anyone could advise it would be great. I would guess someone may be able to read this and make absolute sense of it.

Thanks a lot.

[jscheuer1]

Just guessing I'd say:


cuboidsCount : 1,

If you want no slices, then 1 would likely do that. With only one cuboid, there should be nothing to slice.

The browser cache may need to be cleared and/or the page refreshed to see changes.

BTW, this script looks pretty bad in IE 10. For that reason I would avoid using it unless it could be made more serviceable in that browser. This should be possible, as IE 10 is highly CSS 3 compliant. But there's a chance that it cannot. In which case it should fall back to a simple fade transition. As it is now, it shows the cuboid(s), but blank. Looks ugly.

[faz139]

Thanks, that has done the trick! It also makes perfect sense, i guess I was looking too much into decipering the code as opposed to actually stopping and thinking logically.

The latest version of IE9 I have on the machines here is 9 and it simply fades the slides in that. Is a little odd that this would not fade in IE10? I could understand if it didn't work in 9 but did in 10 but not vice versa?

[jscheuer1]

That might be due in part to the script using vendor specific CSS 3 styles. When these styles were first introduced, that was all that was available. Mozilla (Firefox) and Webkit (Safari, Chrome) devised their own names for these properties, using the proposed generic names preceding each with a vendor specific prefix. If only these are used, IE will not respond. It uses the generic names with no prefixes, as all browsers should now, or soon will do. Whether or not with these generic names IE 10 can do the full effect or not would have to be tested. Also the code would need to be gone over to see how it branches for non-supporting browsers. Ideally this should be done via feature detection. But in the case of IE, often browser sniffing is used. What might be happening is that enough features are detected to do the effect part way, but the sniffing prevents IE from getting the full effect. Or it could be something else.