Moving Boxes example. How to start from first? How to loop?

[Historical Forums User]

Hi there!
New to this site and new to JS! This place is really impressive!
My question is regarding the good old "Moving Boxes" example at https://css-tricks.com/examples/MovingBoxes/
I am wondering how to make it start from the first image (by default it’ll start from the 3rd).
I started to change basic parameters at the slider.js

Code:

// Set up “Current” panel and next and prev
growBigger(“#panel_3”);
var curPanel = 3;

I thought this piece of code might be the part controlling that, so i tried changing to 1 instead of 3… It didn’t really work, it made the boxes endless and empty and broke the whole design structure
I was wondering if anyone can tell me where in the code is the part "telling" the slider to start from 3? and how to change it to the first? I saw a lot of questions like that with no answers on the demo page :)

Another question in the same zone is how can one loop the images? say you have 7 panels so -> click on 7 —> will show 1. I would like the images to continue and show, even when repeating…

Really hope for any feedback. I know I am not the only newbie here ;-)
Thanks in advance
Adam

[cybershot]

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.

Second

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

growBigger("#panel_3")

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.

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

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

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: curWidth })
.find(“img”)
.animate({ width: curImgWidth })
.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_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; } }); });

[Historical Forums User]

cybershot, Thanks for helping in my first tweaks of JS!
Your explanation worked like a charm.
Thanks for the example as well!
Now I need to payback by actually looping the thing ;-)

Adam.

[cybershot]

I am afraid that you are on your own with looping. That is beyond my skills at the moment

[Historical Forums User]

You helped me very much! dont’ misunderstand me :-)

[RodeoRamsey]

I am looking into adding infinite looping to the script as well. Anyone figure it out? Thanks!

[DavidH]

Brilliant! I was looking for this a while now and thanks to Cybershot I am able to start the slider on the most left panel! thx!

[Author]

Posts