Thumbnail Horizontal Scroller

I am in the middle of redesigning an image gallery and I wanted to create a navigational tool to make browsing the images easier. Until now, it was simply a pop-up window with hard coded next and previous buttons.

I started by creating a ColdFusion page that would pull the country value and picture number value from the URL.

display.cfm?location=Malaysia&pic=5

Then I created some ColdFusion code to check the length of the directory where the photos of that country were stored and use that and the picture number to determine where the next and previous links would point.

The ColdFusion was the easy part. But I wanted something more non-linear.

While I was browsing for photos in Windows Explorer I noticed the horizontal scroller they use that contains thumbnails. I had seen this technique on other websites, and I wanted to use it on mine.

Here is what I started with for CSS:

div#imgnav
{
height : 150px;
overflow : auto;
width : 440px;
}

The problem I had, however, is that the images kept wrapping onto the next line when the total width was more than 440 pixels.

That’s when Richard York reminded me about the white-space property. I added it like so and it worked like a charm.

div#imgnav
{
height : 150px;
overflow : auto;
white-space : nowrap;
width : 440px;
}

A little more padding and touch up and it was perfect.