Simple image slide show built in ColdFusion 8

I wrote up a quick and dirty slide show application in ColdFusion 8 and thought I’d share the code. While it isn’t very pretty (I have a second version to show you tomorrow), it gets the job done. First take a look at the demo, and then I’ll describe the code: Demo

The demo makes use of two ColdFusion 8 features - image support and and the cflayout tag. Let me talk first about how the images are handled. I begin by getting a list of all the files in a folder:

<!--- get my images ---> <cfdirectory action="list" directory="#folder#" name="images" type="file">

Note the new type attribute. This lets you filter a directory listing to just files or directories. Next I run a query of query to filter out just the images. Why not use the filter attribute? The cfdirectory tag only lets you filter by one extension. I wanted to support both GIFs and JPGs so I used the following:

<!--- filter out jpg and gif and _thumb_* ---> <cfquery name="images" dbtype="query"> select name from images where (lower(name) like '%.jpg' or lower(name) like '%.gif') and lower(name) not like '_thumb_%' </cfquery>

Notice the last condition. I’m also going to filter out any file named thumb*. Why? I’m getting there.

Next I create a simple layout using the cflayoutarea tag, type=border. I’m not going to bother showing that code here, you can see it at the end. In my left hand menu I want to show all my pictures, but I want to show thumbnails and not a scaled down version of the full image. How do I do that?

<cfloop query="images"> <cfif not fileExists(folder & "_thumb_" & name)> <cfimage source="#folder##name#" action="read" name="newimage"> <cfset imageScaleToFit(newimage, 100, 100)> <cfimage action="write" source="#newimage#" destination="#folder#/_thumb_#name#" overwrite="true"> </cfif>

&lt;cfoutput&gt;&lt;a href="javaScript:setImage('#jsStringFormat(name)#');"&gt;&lt;img src="#folderurl#/_thumb_#name#" border="0" vspace="5" /&gt;&lt;/a&gt;&lt;/cfoutput&gt; &lt;/cfloop&gt;		   </code>

I begin by looping over my images query. For each one, I check for the existence of a thumbnail version. If it doesn’t exist, I read in the file using cfimage. I then use the scaleToFit function. This will resize and keep the proportions of my thumbnail. Lastly I write out the scaled down image. That last bit of JavaScript just sets the image for my main display.

Pretty simple, eh? As I said, I got a slightly sexier version to show tomorrow. Here is the complete code for the demo. Note that I abstracted out the URL and folder for images. In theory you could turn this into a simple custom tag.

<cfsetting showdebugoutput=false>

<!— what url is the folder, relative from me —> <cfset folderurl = “images2”> <!— full path to folder —> <cfset folder = expandPath(“./images2/”)>

<!— get my images —> <cfdirectory action=”list” directory=”#folder#” name=”images” type=”file”>

<!— filter out jpg and gif and thumb* —>
<cfquery name=”images” dbtype=”query”> select name from images where (lower(name) like ‘%.jpg’ or lower(name) like ‘%.gif’) and lower(name) not like ‘thumb%’ </cfquery>

<cflayout type=”border”>

<cflayoutarea position=”left” title=”Pictures” size=”150” align=”center” collapsible=”true”>

<script> function setImage(i) { var mImage = document.getElementById(‘mainImage’); <cfoutput> mImage.src=’#folderurl#/’+i; </cfoutput> }

<cfloop query=”images”> <cfif not fileExists(folder & “thumb” & name)> <cfimage source=”#folder##name#” action=”read” name=”newimage”> <cfset imageScaleToFit(newimage, 100, 100)> <cfimage action=”write” source=”#newimage#” destination=”#folder#/thumb#name#” overwrite=”true”> </cfif>

&lt;cfoutput&gt;&lt;a href="javaScript:setImage('#jsStringFormat(name)#');"&gt;&lt;img src="#folderurl#/_thumb_#name#" border="0" vspace="5" /&gt;&lt;/a&gt;&lt;/cfoutput&gt; &lt;/cfloop&gt;		  


<cflayoutarea position=”center” align=”center”>

<cfoutput> <p> <img src=”#folderurl#/[1]#” id=”mainImage”> </p> </cfoutput>


</cflayout> </code>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA