Fluid Thumbnail Bar with jQuery

Fluid Thumbnail Bar with jQuery

by: Marvin

In the past few years, we’ve seen great achievements on the web development scene. Web sites started to look beautiful if you learn web design carefully and more and more web developers have created thousands of amazing plugins. Thanks to these tech wizards, they’ve also created jQuery which makes life easier for all users, webmasters, and developers alike.

One of the cool jQuery widgets is the Fluid Thumbnail Bar, created by Sam Dunn. This tutorial is based on his tutorial on how to create a fluid thumbnail bar. The idea is to make a list of images within a space and you can flip the overflow page by page. Take note that these steps require some experience with jQuery.

Check the demo here: http://buildinternet.com/live/fluid-bar/demo.html

First, you have to make sure you have a base structure.

Scripts

<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

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

HTML

This is the list’s structure that has thumbnails which are 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>     

jQuery

Much of the functionality will be made possible through jQuery. The aims are to:

1.       Automatically resize the width of thumbnail list to accommodate the number of images it contains.

2.       Calculate the visible thumbnails within the visible area.

3.       Be able to cycle through the thumbs’ pages when you click the forward and backward arrows.

Variables

Let’s plug the elements into variables and define as thumbInterval and thumbPage, which store each page’s pixel width and distance from zero. This will make the editing easier.

var thumbTray = '#thumb-tray',  

thumbList = '#thumb-list',  

thumbNext = '#thumb-next',  

thumbPrev = '#thumb-prev',  

thumbInterval,  

thumbPage = 0; 

Setup

The width of thumbnail list should be calculated then whether it exceeds to the visible area, thumb arrows are displayed and width of thumb page is calculated.

// Adjust to true width of thumb markers  

$(thumbList).width($('> li', thumbList).length * $('> li', thumbList).outerWidth(true));

Width is calculated by this way: multiply width of one li by total number of items in the list. The outerwidth function includes the padding and margins in the calculation.

// Hide thumb arrows if not needed  

if ($(thumbList).width() <= $(thumbTray).width()) $(thumbPrev+","+thumbNext).fadeOut(0); 

Arrows are faded in if width of thumbnail list is bigger than thumb tray.

// Thumb Intervals  

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

As we are able to calculate the width of thumb list, we are also figuring out width of thumbnail pages, establishing how far the list shifts from left to right and vice-versa when you cycle through it.

Thumb Navigation

// 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

$(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'); 

        } 

     

    });