Vertical Centering for Moving Boxes

[schadeck]

First, I want to say that Moving Boxes is a really slick Jquery carousel without a doubt. I was working on a project, and Moving Boxes looked like just what I needed if only for one small problem. The boxes expand or fish eye from the top, and not the center like the client wanted. After a little tweaking around I figured out how to do just that.

Example:
[img]http://i36.tinypic.com/300zhfp.jpg[/img]

Hop into the slider.js file and and a add a couple of lines:

Create a variable for the top margin

Code:

var regBoxClear = $(“.panel”).css(“margin-top”);

Then create a variable for the updated location of the top margin

Code:

var curBoxClear = “-30px”;

Place them like so

Code:

var regBoxClear = $(“.panel”).css(“margin-top”);
var regWidth = $(“.panel”).css(“width”);
var regImgWidth = $(“.panel img”).css(“width”);
var regTitleSize = $(“.panel h2”).css(“font-size”);
var regParSize = $(“.panel p”).css(“font-size”);

var movingDistance = 300;

var curBoxClear = “-30px”;
var curWidth = 350;
var curImgWidth = 326;
var curTitleSize = “20px”;
var curParSize = “15px”;

Next, update the returnToNormal function by adding a reference to the new variable next to the regWidth

Code:

.animate({ width: regWidth, marginTop: regBoxClear })

Likewise, update the growBigger function with a reference of the updated variable next to curWidth

Code:

.animate({ width: curWidth, marginTop: curBoxClear })

Finally update your css for the .inside class to accommodate the new top margin

Code:

.inside {
margin-top: 30px;
padding: 10px;
border: 1px solid #999;
}

And there we have it. Of course there is probably a much more elegant way to accomplish this, but for now this seems to the do the trick. I would say the only thing Moving Boxes would need now is the ability to loop, but that might be a little beyond me at the moment. Thanks again Chris for the great slider-thingy.

[Author]

Posts