Build a Rotating Gallery in ColdFusion

They came, they bought... but did they come back? An ecommerce site’s most important visitors are the ones that actually give up the plastic, and once you’ve got a live one on the line, you need them to come back -- and to bring their friends too. How? Well, shoppers are people, and people like to feel a part of something. Why not make your customers a part of your site by creating a picture gallery for them to populate?

I know what you’re thinking: galleries like this tend to grow too big, and when they do, they start to lose their appeal. I had a client recently with an interesting solution: make the gallery rotate.

Sit in Your Car and Rotate

My client wanted their gallery to only show twelve pictures at a time, and rotate one old item out, and one new item in, each day. This client sells street rod parts and kits, and their customers love to send in pictures of themselves at the throttles of their T Buckets, popping wheelies in the company parking lot and scaring grandmas. Here’s an example that shows it in action. This example is set to rotate once per second, so refresh your browser a few times to see it in action.

So I was driving around the twisty backroads where I live, listening to Eric Dolphy, when I figured out how I was going to get this to work. I was going to use a table in the database, so the client could add pictures through an admin section. We needed a way to shift forward one record every day, regardless of the recordcount. I could see, too, there was going to be an overlap from the last record to the first that would need smoothing out.

Shake that Mody

It occurred to me that if I had a large number that incremented daily, I could divide it by the recordcount to calculate which record to begin with. For instance, if we count the number of days since Jan 1, 2000 (let’s call it the ticker), and we then divide the ticker by the recordcount, the remainder will always be between 0 and one less than the recordcount. Becuase our ticker will steadily increment (if the sun rises), our remainder will also increment at the same rate. If we wanted, we could make the gallery rotate every hour, minute, or second by adjusting how the ticker is calculated.

Getting Started

This example assumes you have a basic understanding of HTML and the ColdFusion language. If you are just starting out with ColdFusion, check out Chris Beasley's excellent 3-part series here.

ColdFusion Server 5 is now available free to developers; the trial version becomes a single-user license when the 30-day trial expires. You can download it here.

You'll need this ZIP file.

It contains:

• rotating_gallery.cfm ColdFusion template
• sitepoint_gallery.mdb Microsoft Access database
• 26 thumbnails (.gif)

The database contains only one table, named 'gallery'. The fields in it are:

• ID (autoincrement, primary key)
• img_name – the filename of the image (12.gif)
• img_x – image width
• img_y – image height
• img_title – text to display with this image

There are 26 records, one for each of the 26 thumbnails.

Unzip to a folder mapped to the ColdFusion server. Hit Alt-M in ColdFusion studio to open the mappings window, read the ColdFusion documentation if you need help. You'll also need to create a System DSN named 'sp_gallery' that points to the access .mdb file. Again, if you need help, try the documentation.

Point your browser to the ‘rotating_gallery.cfm’ file. You should see a small gallery of 12 numbered images, similar to the example from above.