Make a Fluid Thumbnail Bar with jQuery
Learn how to make a fluid thumbnail bar that pages through the images it contains.
Overview
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. Speaking of pages, make sure we’re on the same one by checking out the demo page.
To be clear, this tutorial is intended to show you how to add this functionality to an existing list of images, in hopes you can use it to compliment whatever your current setup might be. This tutorial assumes you have some level of experience with jQuery.
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. For the sake of brevity, I will let you review the stylesheet on your own, which is available in the download.
<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');
}
});
Wrap-up & Expanded Script
I've taken the basics of this tutorial and expanded upon them in Thumb Reel, a free script I released that has added functionality such as clicking and keyboard navigation. You can also see this script used in the newest Supersized release, which is what it was originally made for, although it has since been modified.
