I'm using the jquery script "moving boxes" found on CSS-Tricks.com
(http://css-tricks.com/moving-boxes/) ... It works great so far except
for one thing I need to accomplish. I need to have the script "loop"
the content, so that when my images/divs are loaded, once you get to
the last one, if you click the right arrow, the 1st image/div comes
back into rotation. So basically it would be a never-ending infinite
loop of the content images/divs. Can anyone help me? Here is the
jquery:

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

        var curWidth                    = 225;
        var curImgWidth                 = 225;
        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_5");
        var curPanel = 5;

        $("#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;
          }
        });

});
-----

Reply via email to