Moving Boxes Inquiry (Infinite Loop)

[erickcardona]

I am a UI CSS/xHTML Designer. Know about JS Plugins, and how to tweek them, but I would not know how to make the Moving boxes, an infinite loop. Is there a way to make the moving boxes an infinite loop?

Here is the Code Posted;

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’, “-350px”);

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_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; } }); });

[Capt Otis]

Maybe I missed it, but what is this to? Can you give the whole code so I can see what this goes to…?

[erickcardona]

It is the Moving Boxes Freebee >> (https://css-tricks.com/examples/MovingBoxes/), I am using the concept for a client under a subdomain in my website; (http://sacc.republik9.com/index.html). It is a carousel, that stops at the last div box. My associate designer said it would seem a lot smoother if it was an infinite loop type carousel. I was tweeking it, but could not get a desired result.

[Author]

Posts