Javascript image ticker looping trouble

Question

Javascript is not my strong point and I am currently trying to modify the image scroller from the tutorial Building a jQuery Image Scroller found here.

I have it mostly working however at the moment the images scroll the whole way through before resetting leaving a good 6 seconds or so of blank area. What I would like yo try and do is have the new loop start as soon as the first one has shown its last image?

Here is my code (based on the tutorial)

        <div id="outerContainer">
        <div id="imageScroller">
            <div id="viewer" class="js-disabled">
                <img src="http://localhost:8888/ribbon/data/uploads/slider/imageScrollerBG.png" style="position:relative;display:block;float:left; z-index:10;">
                <a class="wrapper" href="#nogo" title="img1"><img class="logo" id="01" src="http://localhost:8888/ribbon/data/uploads/slider/01.jpg" alt="01"></a>
                <a class="wrapper" href="#nogo" title="img2"><img class="logo" id="02" src="http://localhost:8888/ribbon/data/uploads/slider/02.jpg" alt="02"></a>
                <a class="wrapper" href="#nogo" title="img3"><img class="logo" id="03" src="http://localhost:8888/ribbon/data/uploads/slider/03.jpg" alt="03"></a>
                <a class="wrapper" href="#nogo" title="img4"><img class="logo" id="04" src="http://localhost:8888/ribbon/data/uploads/slider/04.jpg" alt="04"></a>
                <a class="wrapper" href="#nogo" title="img5"><img class="logo" id="05" src="http://localhost:8888/ribbon/data/uploads/slider/05.jpg" alt="05"></a>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
            <script type="text/javascript">
        $(function() {

          //remove js-disabled class
            $("#viewer").removeClass("js-disabled");

          //create new container for images
            $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 200).height(110).appendTo("div#viewer");

            //add images to container
            $(".wrapper").each(function() {
                $(this).appendTo("div#container");
            });

            //work out duration of anim based on number of images (1 second for each image)
            var duration = $(".wrapper").length * 6000;

            //store speed for later (distance / time)
            var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;

            //set direction
            var direction = "rtl";

            //set initial position and class based on direction
            (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;

            //animator function
            var animator = function(el, time, dir) {

                //which direction to scroll
                if(dir == "rtl") {

                  //add direction class
                    el.removeClass("ltr").addClass("rtl");

                    //animate the el
                    el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {

                        //reset container position
                        $(this).css({ left:$("div#imageScroller").width(), right:"" });

                        //restart animation
                        animator($(this), duration, "rtl");

                        //hide controls if visible
                        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            

                    });
                } else {

                  //add direction class
                    el.removeClass("rtl").addClass("ltr");

                    //animate the el
                    el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {

                        //reset container position
                        $(this).css({ left:0 - $("div#container").width() });

                        //restart animation
                        animator($(this), duration, "ltr");

                        //hide controls if visible
                        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            
                    });
                }
            }

            //start anim
            animator($("div#container"), duration, direction);

            //pause on mouseover
            $("a.wrapper").live("mouseover", function() {





                //variable to hold trigger element
                var title = $(this).attr("title");

                //add p if doesn't exist, update it if it does
                ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
            });

            //restart on mouseout
            $("a.wrapper").live("mouseout", function(e) {

                //hide controls if not hovering on them
                (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out distance left to travel
                var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container"), newDuration, $("div#container").attr("class"));

            });

            //handler for ltr button
            $("#ltr").live("click", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("rtl").addClass("ltr");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container"), newDuration, "ltr");
            });

            //handler for rtl button
            $("#rtl").live("click", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("ltr").addClass("rtl");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container"), newDuration, "rtl");
            });
        });
    </script>

and the css

.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0     0; }

#outerContainer { width:900px; height:110px; margin:auto; margin-bottom:11px; margin-    top:-8px;  position:relative; }
#imageScroller { width:900px; height:110px; position:relative; background:#fff     url(images/imageScrollerBG.png) no-repeat; }
#viewer { width:900px; height:110px; overflow:hidden; margin:auto; position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#fff; }
#imageScroller a img { border:0; }

Any help would be greatly appreciated.

Answer 1

It is how this code works. The demo from tutorial page does it too.

I don't see any way to solve this which would not involve rewrite most part of code.

If you do not care about using this code, I recommend you to try this another plugin:

http://logicbox.net/jquery/simplyscroll/horizontal.html