Article
Build a Rotating Gallery in ColdFusion
Get Out Your Airgun
Let’s take a look at ‘rotating_gallery.cfm’.
<cfprocessingdirective suppresswhitespace="Yes">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Rotating Gallery</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=ISO-8859-1">
</head>
<body>
Start the page like any other, the cfprocessingdirective tag helps to suppress extra white space generated by the loops below. This makes for a smaller file when the template is parsed and sent to the browser, speeding up the visitor’s experience.
<cfquery name="qGallery" datasource="sp_gallery"
cachedwithin="#CreateTimeSpan(0,0,10,0)#">
SELECT ID,pic_thumb,pic_x,pic_y,pic_title FROM gallery
ORDER BY ID;
</cfquery>
We run a simple query to retrieve all the records from the gallery table.
<!--- initialize variables --->
<cfset start_day = DateDiff("y","01/01/2000",Now())>
This is our ticker value, which we need incremented every day. We use the DateDiff function to tell us how many days ("y") have passed since 01/01/2000 and today, and assign it to the variable 'start_day'. This value must be larger than your recordcount, so push the date back if you have a large number of items to cycle through.
<cfset total_items = 12>
Set total_items to the total number of items to display on the page. We’ll use this variable to determine the stopping point.
<cfset start_item = (start_day MOD qGallery.recordcount) + 1>
The variable start_item will hold the value of the item in the first position. We find it by adding one to the remainder of the start_day variable divided by the record count from our query. To find the remainder (or the modulus) of a division equation, we employ the MOD math function. In ColdFusion (5 MOD 2) returns 1, the remainder of 5 / 2. The modulus will always be an integer lower than the divisor. If you think about it, any number divided by 4 will always produce a remainder (or modulus) of 0, 1, 2 or 3.
<cfset end_item = start_item + (total_items - 1)>
We also need to know which record to stop at, we can find it easily by subtracting one from the 'total_items' variable and adding that value to the 'start_item' variable. We assign this result to the variable 'end_item'.
<cfif end_item GT qGallery.recordcount>
<cfset end_item = end_item - qGallery.recordcount>
</cfif>
What happens if start_item is record 20, and there are only 23 records? When we add 11 we get 31! We'll need to deal with the overlap from the last record to the first. We still need to know what record to stop at, so if the 'end_item' variable is greater than the recordcount, we subtract the recordcount from the 'end_item' value to find the correct 'end_item'.
<cfset columns = 4>
Set the 'columns' variable to the desired number of table columns.
<cfset col_tick = 0>
We'll increment the 'col_tick' variable as we output the table cells in each row.
<cfset count = 0>
Count will also be incremented, and when it reaches the value of our total_items variable, we're at the end.
Now our query has been run and all necessary variables initialized. On with the fun part: building the gallery!