Question

I’m working on a thumbnail scroller: https://dl.dropbox.com/u/2241201/jquery-thumbnail-scroll/index.html

If you mouse over the thumbnails, it wobbles left to right.

I feel like I’ve tried everything, but am unable to prevent the image thumbnails from looking unstable.

I think this is a CSS issue, as the default scroller was smaller, and did not wiggle.

Answer 1

It’s not a Css issue, it’s a JavaScript issue which changes .jTscroller‘s left property.

The code is

$this.mousemove(function(e){
    mouseCoords=(e.pageX-pos[1]);
    mouseCoordsY=(e.pageY-pos[0]);
    var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
    var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
    var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
    var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
    $scroller.stop(true,false).animate({left:destX,top:destY},options.scrollEasingAmount,options.scrollEasing); 
});

Use

$this.mousemove(function(e){
    var obj=new Object();
    if(options.scrollerOrientation=="horizontal"){
        mouseCoords=(e.pageX-pos[1]);
        var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
        var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
        obj.left=destX;
    }else{
        mouseCoordsY=(e.pageY-pos[0]);
        var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
        var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
        obj.top=destY;
    }
    $scroller.stop(true,false).animate(obj,options.scrollEasingAmount,options.scrollEasing); 
});

See it here: http://jsfiddle.net/rUCXg/2/