Moving Boxes White Space

[Kez]

Hi Guys,
I am currently using the moving boxes to display a number of thumbnails and linking them to other pages.
My question is… How do I remove the extra white space to the left of the thumbnails of my slider, so basically left aligin the thumbs as opposed to center.

Here are my settings

Code:

$(function() {

var totalPanels = $(“.scrollContainer”).children().size();

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 = 115;

var curWidth = 115;
var curImgWidth = 90;
var curTitleSize = “12px”;
var curParSize = “11px”;

var $panels = $(‘#slider .scrollContainer > div’);
var $container = $(‘#slider .scrollContainer’);

$panels.css({‘float’ : ‘left’,’position’ : ‘relative’});

$(“#slider”).data(“currentlyMoving”, false);

$container
.css(‘width’, ($panels[0].offsetWidth * $panels.length) +100 )
.css(‘left’, “0px”);

var scroll = $(‘#slider .scroll’).css(‘overflow’, ‘hidden’);

function returnToNormal(element) {
$(element)
.animate({ width: regWidth })
.find(“img”)
.animate({ width: regImgWidth })
.end()
.find(“h2”)
.animate({ fontSize: regTitleSize })
.end()
.find(“p”)
.animate({ fontSize: regParSize });
};

function growBigger(element) {
$(element)
.animate({ width: regWidth })
.find(“img”)
.animate({ width: regImgWidth })
.end()
.find(“h2”)
.animate({ fontSize: curTitleSize })
.end()
.find(“p”)
.animate({ fontSize: curParSize });
}

//direction true = right, false = left
function change(direction) {

//if not at the first or last panel
if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; } //if not currently moving if (($("#slider").data("currentlyMoving") == false)) { $("#slider").data("currentlyMoving", true); var next = direction ? curPanel + 1 : curPanel - 1; var leftValue = $(".scrollContainer").css("left"); var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance; $(".scrollContainer") .stop() .animate({ "left": movement }, function() { $("#slider").data("currentlyMoving", false); }); //returnToNormal("#panel_"+curPanel); //growBigger("#panel_"+next); curPanel = next; //remove all previous bound functions $("#panel_"+(curPanel+1)).unbind(); //go forward $("#panel_"+(curPanel+1)).click(function(){ change(true); }); //remove all previous bound functions $("#panel_"+(curPanel-1)).unbind(); //go back $("#panel_"+(curPanel-1)).click(function(){ change(false); }); //remove all previous bound functions $("#panel_"+curPanel).unbind(); } } // Set up "Current" panel and next and prev //growBigger("#panel_3"); var curPanel = 3; $("#panel_"+(curPanel+1)).click(function(){ change(true); }); $("#panel_"+(curPanel-1)).click(function(){ change(false); }); //when the left/right arrows are clicked $(".right").click(function(){ change(true); }); $(".left").click(function(){ change(false); }); $(window).keydown(function(event){ switch (event.keyCode) { case 13: //enter $(".right").click(); break; case 32: //space $(".right").click(); break; case 37: //left arrow $(".left").click(); break; case 39: //right arrow $(".right").click(); break; } }); });

Code:

* {
margin: 0;
padding: 0;
}

body {
font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
width: 800px;
margin: 25px auto;
}

#intro {
padding-bottom: 10px;
}

#slider {
width: 100%;
margin: 0;
position: relative;
border: 1px solid #ccc;
padding:0px 30px 0px 30px;
}

.scroll {
overflow: hidden;
width: 100%;
margin: 0;
position: relative;
}

.scrollContainer {
position: relative;
}

.scrollContainer div.panel {
padding: 10px;
width: 100px;
height: 150px;
}

#left-shadow {
position: absolute;
top: 0;
left: 0;
width: 12px;
bottom: 0;
background: url(../images/leftshadow.png) repeat-y;
}

#right-shadow {
position: absolute;
top: 0;
right: 0;
width: 12px;
bottom: 0;
background: url(../images/rightshadow.png) repeat-y;
}

.inside {
padding: 10px;
/*border: 1px solid #999;*/
}

.inside img {
display: block;
/*border: 1px solid #666;*/
/*margin: 0 0 10px 0;
*width: 250px;*/
}

.inside h2 {
font-weight: Normal;
text-transform:capitalize;
color: #CC0000;
font-size: 12px;
margin: 0 0 8px 0;
}

.inside p {
font-size: 11px;
color: #999;
}

a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

a:hover {
border-bottom: 1px solid #999;
}

.scrollButtons {
position: absolute;
top: 50px;
cursor: pointer;
}

.scrollButtons.left {
left: 10px;
}

.scrollButtons.right {
right: 10px;
}

.hide {
display: none;
}

Thanks in advance for you help!

[Author]

Posts