Simple image slide show built in ColdFusion 8

August 29, 2007 coldfusion

(This post is more than 2 years old.)

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>

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

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>
}		

</script>
<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>
<cfoutput><a href="javaScript:setImage('#jsStringFormat(name)#');"><img src="#folderurl#/thumb#name#" border="0" vspace="5" /></a></cfoutput>
</cfloop>
</cflayoutarea>
<cflayoutarea position="center" align="center">
<cfoutput>
<p>
<img src="#folderurl#/#images.name[1]#" id="mainImage">
</p>
</cfoutput>
</cflayoutarea>

</cflayout>