CSSGlobe Easy Slider 1.7, how to restart animation?

i'm using the EasySlider 1.7 by CSSGlobe numeric version (http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider), in a project. When i click on a number the animation stops on the respective image, what I wanted to do is to inject another button that when pressed could restart the animation from where it stopped to the next item.

Then i've added:

(function($) {

      $.fn.easySlider = function(options){

        // default configuration properties
        var defaults = {            
            prevId:         'prevBtn',
            prevText:         'Previous',
            nextId:         'nextBtn',    
            nextText:         'Next',
            controlsShow:    true,
            controlsBefore:    '',
            controlsAfter:    '',    
            controlsFade:    true,
            firstId:         'firstBtn',
            firstText:         'First',
            firstShow:        false,
            lastId:         'lastBtn',    
            lastText:         'Last',
            lastShow:        false,                
            vertical:        false,
            speed:             800,
            auto:            false,
            pause:            2000,
            continuous:        false, 
            numeric:         false,
            numericId:         'controls'
        }; 

        var options = $.extend(defaults, options);  

        this.each(function() {  
            var obj = $(this);                 
            var s = $("li", obj).length;
            var w = $("li", obj).width(); 
            var h = $("li", obj).height(); 
            var clickable = true;
            obj.width(w); 
            obj.height(h); 
            obj.css("overflow","hidden");
            var ts = s-1;
            var t = 0;
            $("ul", obj).css('width',s*w);            

            if(options.continuous){
                $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
                $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
                $("ul", obj).css('width',(s+1)*w);
            };                

            if(!options.vertical) $("li", obj).css('float','left');

            if(options.controlsShow){
                var html = options.controlsBefore;                
                if(options.numeric){
                    html += '<ol id="'+ options.numericId +'"></ol>';
/* <-------------- added row ---------------> */
                    html += '<span id="replay"><a href="javascript:void(0);" title="Restart the animation"><img src="http://a.imageshack.us/img59/516/replays.png" alt="Replay button" /></a></span>';
/* <-------------- /added row ---------------> */
                } else {
                    if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href="javascript:void(0);">'+ options.firstText +'</a></span>';
                    html += ' <span id="'+ options.prevId +'"><a href="javascript:void(0);">'+ options.prevText +'</a></span>';
                    html += ' <span id="'+ options.nextId +'"><a href="javascript:void(0);">'+ options.nextText +'</a></span>';
                    开发者_JAVA百科if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';                
                };

                html += options.controlsAfter;                        
                $(obj).after(html);                                        
            };

            if(options.numeric){                                    
                for(var i=0;i<s;i++){                        
                    $(document.createElement("li"))
                        .attr('id',options.numericId + (i+1))
                        .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
                        .appendTo($("#"+ options.numericId))
                        .click(function(){                            
                            animate($("a",$(this)).attr('rel'),true);
                        });                                                 
                };    

            } else {
                $("a","#"+options.nextId).click(function(){        
                    animate("next",true);
                });
                $("a","#"+options.prevId).click(function(){        
                    animate("prev",true);                
                });    
                $("a","#"+options.firstId).click(function(){        
                    animate("first",true);
                });                
                $("a","#"+options.lastId).click(function(){        
                    animate("last",true);                
                });                
            };

            function setCurrent(i){
                i = parseInt(i)+1;
                $("li", "#" + options.numericId).removeClass("current");
                $("li#" + options.numericId + i).addClass("current");
            };

            function adjust(){
                if(t>ts) t=0;        
                if(t<0) t=ts;    
                if(!options.vertical) {
                    $("ul",obj).css("margin-left",(t*w*-1));
                } else {
                    $("ul",obj).css("margin-left",(t*h*-1));
                }
                clickable = true;
                if(options.numeric) setCurrent(t);
            };

            function animate(dir,clicked){
                if (clickable){            
                    clickable = false;
                    var ot = t;                
                    switch(dir){
                        case "next":
                            t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                        
                            break; 
                        case "prev":
                            t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
                            break; 
                        case "first":
                            t = 0;
                            break; 
                        case "last":
                            t = ts;
                            break; 
                        default:
                            t = dir;
                            break; 
                    };    
                    var diff = Math.abs(ot-t);
                    var speed = diff*options.speed;                        
                    if(!options.vertical) {
                        p = (t*w*-1);
                        $("ul",obj).animate(
                            { marginLeft: p }, 
                            { queue:false, duration:speed, complete:adjust }
                        );                
                    } else {
                        p = (t*h*-1);
                        $("ul",obj).animate(
                            { marginTop: p }, 
                            { queue:false, duration:speed, complete:adjust }
                        );                    
                    };

                    if(!options.continuous && options.controlsFade){                    
                        if(t==ts){
                            $("a","#"+options.nextId).hide();
                            $("a","#"+options.lastId).hide();
                        } else {
                            $("a","#"+options.nextId).show();
                            $("a","#"+options.lastId).show();                    
                        };
                        if(t==0){
                            $("a","#"+options.prevId).hide();
                            $("a","#"+options.firstId).hide();
                        } else {
                            $("a","#"+options.prevId).show();
                            $("a","#"+options.firstId).show();
                        };                    
                    };                

                    if(clicked) clearTimeout(timeout);
                    if(options.auto && dir=="next" && !clicked){;
                        timeout = setTimeout(function(){
                            animate("next",false);
                        },diff*options.speed+options.pause);
                    };

                };

            };
            // init
            var timeout;
            if(options.auto){;
                timeout = setTimeout(function(){
                    animate("next",false);
                },options.pause);
            };        

            if(options.numeric) setCurrent(0);

            if(!options.continuous && options.controlsFade){                    
                $("a","#"+options.prevId).hide();
                $("a","#"+options.firstId).hide();                
            };        

/* <------ Replay -------------------> */
                $('#replay').click(function(){
                /* What to put here? */

                });        
/* <------ /Replay -------------------> */            
        });

    };

})(jQuery); 

There's the row with the injected button (#replay) at the beginning, and the controller at the end of the script. I've tried to reset and restart the timer, the animation restart but it slides beyond the end of all the image list... Maybe the last block sholdn't be there?

The parameters used to call the script are:

$("#slider").easySlider({
                orientation: 'horizontal',
                speed:         2000,
                auto:            true,
                pause:            2500,
                continuous:        true,
                numeric: true
            });

Any suggestion? I guess someone else have already made it

Temporary test demo here

---

Please add this t = parseInt(t); after line no. 142 and on line no. 195 please comment as below

if(options.auto /* && dir=="next" && !clicked*/){;

Hope this helps...

---

Perhaps if you can't get it to work, making continuous: true would be a workaround?

Actually another workaround would be something like this:

$("a","#"+options.firstId).click(function(){        
    animate("first",true);
});

Where animate is the internal function that controls how the slider moves

---

Did you try this?

$('#slider').easySlider({
    autoStart: 6000,
    restart: 5000
});