The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Moving Boxes example. How to start from first? How to loop? Re: Moving Boxes example. How to start from first? How to loop?


If you look on line 26 of the slider.js file, You will find a line that says

.css(‘left’, "-350px");

This line tells the images to move over so that the 3rd image is lined up in the center. I changed it to be 225px. You can see when you run the script how it affects the script. You can play with the number to move the images. I would start out by setting the number to 0px. This will align the images up to the left of the window. So image 1 will be first. However, I think it looks a lot better if the images get bigger in the middle rather than the end.


If you look on line 102, you will see this code


This code says to make the panel with the id of panel_3 grow bigger.I changed it to ("#panel_1")

then on line 103 you will find

var curPanel = 3;

I changed this to read var curPanel = 1;

The complete changed code is below. Mess with these values to achieve the affect you are looking for. Don’t remove any code or the code will stop working. Try instead to set the value to 0 or false.

$(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 = 300;

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

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

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

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

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

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

function returnToNormal(element) {
.animate({ width: regWidth })
.animate({ width: regImgWidth })
.animate({ fontSize: regTitleSize })
.animate({ fontSize: regParSize });

function growBigger(element) {
.animate({ width: curWidth })
.animate({ width: curImgWidth })
.animate({ fontSize: curTitleSize })
.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_1"); var curPanel = 1; $("#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; } }); });