thumbnail scroller with jquery

A cool jquery/css thumbnail scroller inspired by the ones made in Flash. It works on mouse over and it’s simple to configure and easy to style through css.

 

The code for the full sized, horizontal scroller with easing

The css

html,body{height:100%;}
body {margin:0; padding:0; background:#000;}
#outer_container{position:fixed; bottom:0; margin:40px 0; height:170px; padding:0 5px; border-top:1px solid #666; border-bottom:1px solid #666;}
#thumbScroller{position:relative; overflow:hidden;}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{float:left;}
#thumbScroller .content div{margin:10px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#thumbScroller img{border:5px solid #fff;}
#thumbScroller a{padding:5px;}

The jQuery scripts and plugins inside head tag


The markup

The path

A flower

Dusk

A waterfall

The canyon

The road

A forest

A house

Paradise

Trees

Plant leaves

The full javascript code is inserted in the end of the document, just before the closing body tag.


$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");

$(window).load(function() {
sliderLeft=$thumbScroller_container.position().left;
padding=$outer_container.css("paddingRight").replace("px", "");
sliderWidth=$(window).width()-padding;
$thumbScroller.css("width",sliderWidth);
var totalContent=0;

//get content width
$thumbScroller_content.each(function () {
var $this=$(this);
totalContent+=$this.innerWidth();
$thumbScroller_container.css("width",totalContent);
});

//content scrolling
$thumbScroller.mousemove(function(e){
if($thumbScroller_container.width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType="easeOutCirc";
if(mouseCoords>destX){
//$thumbScroller_container.css("left",-thePosA); //without easing
$thumbScroller_container.stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
} else if(mouseCoords //$thumbScroller_container.css("left",thePosB); //without easing
$thumbScroller_container.stop().animate({left: thePosB}, animSpeed,easeType); //with easing
} else {
$thumbScroller_container.stop();
}
}
});
//thumbnails mouse over/out and initial state
var fadeSpeed=200;

$thumbScroller_thumb.each(function () {
var $this=$(this);
$this.fadeTo(fadeSpeed, 0.4);
});

$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
var $this=$(this);
$this.fadeTo(fadeSpeed, 0.4);
}
);
});

//browser resize
$(window).resize(function() {
//$thumbScroller_container.css("left",sliderLeft); //without easing
$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); //with easing
var newWidth=$(window).width()-padding;
$thumbScroller.css("width",newWidth);
sliderWidth=newWidth;
});

Have fun and feel free to change it as you like :)

Download: http://www.htmldrive.net/items/download/652

Leave a comment