ColdFusion Slideshow

In this tutorial, we will show you how to create a ColdFusion slideshow from a folder.

The ColdFusion Code and page is designed to sit in a folder with the images. You can drop the gallery_viewer.cfm page into the folder containing .jpgs and it will display all the jpg images in that folder. This Slideshow is exactly what it says, It is a slideshow and will view the images one at a time with previous and next text. Ok, lets get started and write some ColdFusion code and explain each line for you.

The Gallery Viewer has been downloaded times.

Instructions: Download the gallery_viewer.zip, unzip, and put the gallery_viewer.cfm file into any folder with .jpg images. Upload the file and browse to the page to view your slideshow gallery. *Tested on ColdFusion MX 7.02.

<!---gallery Viewer 2.1.1 Source Code--->
<!---updated JSD January 10, 2008, Added head tags and title and the images.name variable and code to bring the image name into the title and page as text for SEO --->

<!--- param the image to show --->
<cfparam name="url.image" default="1">

<!--- directory --->
<cfset dir = expandPath(".")>

<!--- get all images --->
<cfdirectory directory="#dir#" filter="*.jpg" name="images" sort="name">

<!--- quick sanity checks --->
<cfif not isNumeric(url.image) or url.image lte 0 or url.image gt images.recordcount or round(url.image) neq url.image>
<cfset url.image = 1>
</cfif>

<html>
<head>
<title>
<!---JSD - dynamically retrieve the image name into the page title, SEO --->
<cfoutput>#images.name[url.image]#</cfoutput>
</title>
</head>
<body>

<!--- do we even have images? --->
<cfif images.recordCount>
<cfoutput>
<table align="center">
<tr><!---JSD - dynamically retrieve the image name into the page text, SEO --->
<td colspan="2"><cfoutput>#images.name[url.image]#</cfoutput></td>
</tr>
<tr>
<td><cfif url.image gt 1>
<!--- JSD - Set the Delimeter path to "\/" for windows and linux--->
<a href="#listLast(getCurrentTemplatePath(),"\/")#?image=#url.image-1#">Previous</a>
<cfelse>
Previous
</cfif></td>
<td><cfif url.image lt images.recordCount>
<a href="#listLast(getCurrentTemplatePath(),"\/")#?image=#url.image+1#">Next</a>
<cfelse>
Next
</cfif></td>
</tr>
<tr>
<td colspan="2"><img src="#images.name[url.image]#"></td>
</tr>
<!--- links --->
<tr>
<td>
<cfif url.image gt 1>
<a href="#listLast(getCurrentTemplatePath(),"\/")#?image=#url.image-1#">Previous</a>
<cfelse>
Previous
</cfif> </td>
<td align="right">
<cfif url.image lt images.recordCount>
<a href="#listLast(getCurrentTemplatePath(),"\/")#?image=#url.image+1#">Next</a>
<cfelse>
Next
</cfif> </td>
</tr>
</table>
</cfoutput>
</cfif>

</body>
</html>

NOTE: For best Search Engine results, name your images with good descriptive names. The name of the JPG with show up in the title and as text on each page. We made the ColdFusion slideshow code as light as possible for learning, so please feel free to tweak the code and it can easily be added into any website template and layout.

ColdFusion tutorials