The idea of a fluid thumbnail bar is simple: Create a list of thumbnails within a space where the overflow can be flipped through page by page.

Features

• Cycle through thumbnails in different intervals depending on container width
• Page arrows only displayed when needed (thumbnails overflow container)

Getting Started

First off, let’s make sure we have a base structure to work with, outlined below.

Scripts

jQuery (surprise!), Easing, and the separate file which will contain our script.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/fluid.thumbs.js"></script>

CSS

Just one stylesheet needed, nothing crazy.

<link rel="stylesheet" href="css/fluid.thumbs.css" type="text/css" media="screen" />

HTML

Below is the structure of the list which will contain the thumbnails, wrapped in a container.

<div id="thumb-tray">
     <ul id="thumb-list">
          <li><img src="thumb-1.jpg"/></li>
          <li><img src="thumb-2.jpg"/></li>
          <li><img src="thumb-x.jpg"/></li>
     </ul>
     <div id="thumb-prev"></div>
     <div id="thumb-next"></div>
</div>

The jQuery

This is where the bulk of the functionality will be made possible, to get a good sense of what we’re aiming to do, here are the goals:

• Automatically resize the width of thumbnail list to fit number of images it contains (when the window is loaded or resized).
• Calculate how many thumbs are visible within the visible area.
• Cycle through the pages of thumbs when the forward or back arrows are clicked.

The Variables

To make editing easier, we are going to plug the elements into variables. Additionally, we are defining the thumbInterval and thumbPage variables, which store the pixel width of each page and the pixel distance from zero, respectively.

var thumbTray = '#thumb-tray',
thumbList = '#thumb-list',
thumbNext = '#thumb-next',
thumbPrev = '#thumb-prev',
thumbInterval,
thumbPage = 0;

Setup

When the document is first ready, the width of the thumbnail list must be calculated, and then depending whether or not it exceeds to visible area, the thumb arrows are displayed and the pixel width of each thumb page is calculated.

// Adjust to true width of thumb markers $(thumbList).width($('> li', thumbList).length * $('> li', thumbList).outerWidth(true));

The width is calculated by multiplying the width of one li by the total number of items within the list. The outerWidth function allows us to include padding and margins in our calculation.

// Hide thumb arrows if not needed
if ($(thumbList).width() <= $(thumbTray).width()) $(thumbPrev+","+thumbNext).fadeOut(0);

If the width of the thumbnail list is larger than the thumb tray, then the arrows are needed and faded in.

// Thumb Intervals
thumbInterval = Math.floor($(thumbTray).width() / $('> li', thumbList).outerWidth(true)) * $('> li', thumbList).outerWidth(true);

Similar to how the true width of the thumb list was calculated, we are now figuring out the width of each page of thumbnails, establishing how far to shift the list (left or right) when it is cycled through.

Thumb Navigation

Pages are navigated by adjusting the left property in a positive(backward) or negative(forward) direction. The thumbInterval variable stores what distance is considered a page, while the thumbPage variable stores the total distance from the left.

If the beginning or end of the list is reached, it will automatically spill over to the opposite end of the list. Each page is calculated based on how many complete list items can be visible in the current visible space. We make use of easing for these animations to add extra smooth transitions.

// Thumb Next Button
$(thumbNext).click(function(){
	if (thumbPage - thumbInterval <= -$(thumbList).width()){
		thumbPage = 0;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}else{
		thumbPage = thumbPage - thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}
});

// Thumb Previous Button
$(thumbPrev).click(function(){
	if (thumbPage + thumbInterval > 0){
		thumbPage = Math.floor($(thumbList).width() / thumbInterval) * -thumbInterval;
		if ($(thumbList).width() <= -thumbPage) thumbPage = thumbPage + thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}else{
		thumbPage = thumbPage + thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}
});

Handling Resizes

Since the thumbInterval and thumbPage are calculated when the page first loads, we need to adjust for the fact that when the browser window size changes, those numbers are no longer relevant. In order to keep this simple, when the window is resized, the variables are recalculated and the page is set back to zero.

$(window).resize(function(){

	// Update Thumb Interval & Page
	thumbPage = 0;
	thumbInterval = Math.floor($(thumbTray).width() / $('> li', thumbList).outerWidth(true)) * $('> li', thumbList).outerWidth(true);

	// Adjust thumbnail markers
	if ($(thumbList).width() > $(thumbTray).width()){
		$(thumbPrev+","+thumbNext).fadeIn('fast');
		$(thumbList).stop().animate({'left':0}, 200);
	}else{
		$(thumbPrev+","+thumbNext).fadeOut('fast');
	}

});

The article source:http://buildinternet.com/2011/06/make-a-fluid-thumbnail-bar-with-jquery/