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.

 

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.

HTML

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


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.

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.

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.

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

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.

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.

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.

Posted Wednesday, June 22nd, 2011 · Back to Top

SPONSOR

Add Comment

53 Comments 23 Mentions

  1. Alejandro Author Editor

    great fluids

    ·

    • تور دبی Author Editor

      تور دبی:i really thanks for this

      ·

  2. honlapkeszites Author Editor

    Nice effects! Thanks for sharing!

    ·

  3. Chris Author Editor

    awesome!!! thanks guys. also, could you add some more thumbnails to the demo? It doesn’t do anything by default on a wide monitor (working on a 27″ imac)

    ·

  4. joris de befashionlike Author Editor

    Thanks,

    We can add link to the thumbnails ?

    Best

    ·

    • Sam Dunn Author Editor

      Definitely, this is meant to be used to enhance whatever thumbnail list you may currently be using

      ·

  5. Origin Ideas Author Editor

    great tut, thx! but the demo lead to 404…

    ·

  6. Paweł P. Author Editor

    And why not act in HTML 5?
    Best regards!

    ·

  7. Siddhartha Sinha Author Editor

    Thanks for sharing this info and code

    ·

  8. Dave Author Editor

    Same as above…any chance that can be fixed?

    ·

    • Sam Dunn Author Editor

      Should be fixed now, thanks!

      ·

  9. AndyiBM Author Editor

    Same as Chris… my wide screen just shows a line of static thumbnails – thought it was broke. The link arrows only show up when I resize the screen smaller.

    ·

  10. Michael Author Editor

    Thank you very much this tutorial was very helpful and the thumbReel widget has some great additions. I have tried to incorporate this into a little Facebook app I am working on it seems to have trouble (does not receive any of the events and only loads a small portion of the images in the list). Can you think of any reason the thumbReel would have issues inside an IFrame?

    ·

  11. Giuseppe Author Editor

    Thanks for this fantastic tutorial

    ·

  12. affordable web designer Author Editor

    Nice effects! Thanks for sharing!

    ·

  13. Mick Author Editor

    Good question!

    ·

  14. Mick Author Editor

    I ment Michaels: Can you think of any reason the thumbReel would have issues inside an IFrame?

    ·

  15. Brian Wiltshire Author Editor

    Very informative, love this site !!

    ·

  16. shashank Author Editor

    Great site,ulti information and worth sharing Sam Dunn !!

    ·

  17. Dinesh Verma Author Editor

    How can i add this to my blogger blog?

    ·

  18. Rakesh Kumar Author Editor

    I always try to find out how people make this type of thumbnail. But this time i have a solution. Thanks

    ·

  19. Tiffany Author Editor

    Can we add captions to the pictures so that when the mouse hovers, you can see a title…? I tried to add it myself with jQuery Captify demo, but I’m ashamedly a novice and can’t seem to get it to work. Any help you could give me would be great.

    ·

  20. Shikeb Ali Author Editor

    Nice, it would be interesting to implement this on wordpress site. Scrolling post thumbnails.
    Thanks :)

    ·

  21. Namita Author Editor

    good share buddy .. :)

    ·

  22. Big Crunchy Author Editor

    You got here a nice collection of stuff!

    You should increase your number of thumbnails, because at 1920px wide doesn’t appear the arrows just because of 1/2 thumbnails missing.

    Good work!

    ·

  23. David Proctor Author Editor

    Is there a maximum number of thumbnails you can add? Obviously too man would create an issue with loading, but hypothetically, could you add several hundred without ill effect?

    ·

    • Sam Dunn Author Editor

      Yessir, the limit would be on the hardware side of things

      ·

  24. Gautch Author Editor

    Do you have a way to make this fluid, but maxed at 960px wide instead of full width?

    I cant seem to bet it to work right.

    ·

  25. Magnus Moholdt Author Editor

    Thank you for this! Great tutorial!

    ·

  26. Manish Author Editor

    Sir,
    I tried to include two bars o one page but only first one is working…2nd one is visible but its not working.. :(

    ·

  27. Used Forestry Trucks Author Editor

    nice effects and fluids. very thorough tutorial

    ·

  28. شات صوتي Author Editor

    You are great and thank

    ·

  29. Beats Headphones Author Editor

    Hi, Neat publish.There’s a issue with your web-site in net explorer, would verify this?? IE nevertheless would be the market leader and a large portion of people will miss your magnificent producing resulting from this predicament.

    ·

  30. Dhafian Author Editor

    This is cool man! Is this site using it for the thumbnail?

    ·

  31. Ali Author Editor

    Very nice example. Thanks for tutorial.

    ·

  32. ترموکوپل Author Editor

    Great site,ulti information and worth sharing Sam Dunn !!

    ·

  33. Bomb Shelter Construction Author Editor

    Hi, is there a way to make the thumbnails auto-scroll instead of having to click the thumb next arrow?

    thanks

    ·

  34. طراحی سایت Author Editor

    Good question!

    ·

  35. وی پی ان Author Editor

    good, i really thanks for this article

    ·

  36. سئو Author Editor

    Very Nice.

    سئو

    ·

  37. خرید شارژ Author Editor

    they are very helpful.nice effects and fluids.

    ·

  38. thelivenews Author Editor

    nice effects and fluids. very thorough tutorial

    ·

  39. طراحی سایت کرمانشاه Author Editor

    good! tnx

    ·

  40. ajcha Author Editor

    Is there a way to set the image size? I want to make the thumbnail larger than the current size on the demo..

    ·

  41. lesniks Author Editor

    Is there a way to set the image size? I want to make the thumbnail larger than the current size on the demo..

    ·

  42. Honlapkészítés Author Editor

    Awesome dude! Thanks!

    ·

  43. تور دبي Author Editor

    Very nice example

    ·

  44. تور کیش Author Editor

    تور کیش:they are very helpful.

    ·

  45. personel alımı Author Editor

    thanks for the information.nice effects like this.

    ·

  46. طراحی وب سایت Author Editor

    Is there a way to set the image size? I want to make the thumbnail larger than the current size on the demo..

    ·

  47. طراحی سایت Author Editor

    thanks

    ·

  48. خرید vpn Author Editor

    tnx, really useful

    ·

  49. طراحی سایت حرفه ای Author Editor

    Very nice example. Thanks for tutorial.

    ·

 

Build Internet by One Mighty Roar. Since 2008.