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: http://i36.tinypic.com/300zhfp.jpg
Hop into the slider.js file and and a add a couple of lines:
Create a variable for the top margin
var regBoxClear = $(\".panel\").css(\"margin-top\");
Then create a variable for the updated location of the top margin
var curBoxClear = \"-30px\";
Place them like so
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
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.
Example:
http://i36.tinypic.com/300zhfp.jpg
Hop into the slider.js file and and a add a couple of lines:
Create a variable for the top margin
Then create a variable for the updated location of the top margin
Place them like so
Next, update the returnToNormal function by adding a reference to the new variable next to the regWidth
.animate({ width: regWidth, marginTop: regBoxClear })Likewise, update the growBigger function with a reference of the updated variable next to curWidth
.animate({ width: curWidth, marginTop: curBoxClear })Finally update your css for the .inside class to accommodate the new top margin
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.