Five Star Rating

This simple WordPress plug-in allows viewers to rate a post.

jQuery showMessage

This jQuery plug-in allows you to easily create a 'twitter-like' notification.

Web Tips

Sharing our knowledge of CFML & jQuery and many other web development tips.

Coldfusion Image Rotator

By admin in : Coldfusion // Mar 3 2008

I was tasked a few months ago to rotate an image on a site randomly. Ordinarily this would not be an issue but the image was a css background image and I really didn’t have the ambition to rewrite the css and page html to do this. Thankfully my laziness paid off, because I found a solution while looking through some php code for wordpress.

I ran into this template that I liked, but wanted to change the header image. I changed it, uploaded it and refreshed the page, but NOTHING changed. I spent a good 5 minutes on this before checking the css to see what was going on. Instead of finding a path to an image in the css for the background, I found a path to a file named rotate.php. The script was written by Matt Mullenweg ( and seemed simple enough to me. What I liked about this script is that it didn’t require managing a bunch of images. If you want an image you simply stick it in a predefined directory and point to that directory.

I decided to rewrite this in coldfusion and within a few minutes I had a working. It is rather simple. Define your folder, define your extensions and define the url path to the folder and you are done. You will find the code below.

created by Andrew Alba >>
This will grab images from specified folder and randomly display them. You will only need to modify the three variables below
<!--- Insert the absolute path (with trailing slash) to the images.
"/home/mysite/public_html/images/" or "/www/mysite/web/images/random/"
If the images are in the same directory as this script you can leave it as shown file
	<cfset folder = "#GetDirectoryFromPath(GetBaseTemplatePath())#" />
	<!--- List of allowed extensions (separate with space) --->
	<cfset ext = "jpg jpeg png gif" />
	<!--- Insert the URL to the folder that contains the images --->
	<cfset url_image_path = "" />
	<!--- do not edit below this point --->
	<!--- lets get the contents of the folder --->
	<cfdirectory directory="#folder#" action="list" name="filelisting" />
	<!--- pull just file names out of the list --->
	<cfset fileList = "" />
	<cfoutput query="filelisting">
		<cfif filelisting.type is "file">
			<cfset fileList = listappend(fileList, />
	<!--- now we can create a new list of files --->
	<cfset new_fileList = "">
	<cfloop list="#fileList#" index="i" delimiters=",">
	<!--- lets use our list of extensions to weed out the files types we don't want --->
	<!--- now we grab just the extension --->
		<cfset file_ext = listlast(i,".") />
		<!--- if it finds file_ext is acceptable as per ext then it adds it to the array --->
		<cfif listfindnocase(ext,file_ext," ")>
			<cfset new_fileList = listappend(new_fileList,i) />
	<!--- now to choose random number from the list --->
	<cfset image_file = listgetat(new_fileList,randrange(1,listlen(new_fileList),"SHA1PRNG"),",") />
	<cflocation url="#url_image_path##image_file#?rand=#randrange(1,999999999,"SHA1PRNG")#" addtoken="no">
	<cfcatch type="any"></cfcatch>

About the Author

admin has written 26 articles for dingobytes.

Andrew Alba is a Software Engineer who resides in the Minneapolis-St Paul since 2010. Andrew has almost a decade and a half of web development and advertising experience. Andrew is currently employed with The Lacek Group in Minneapolis, MN after spending almost three years with Internet Broadcasting in St Paul, MN and five years with Interive Media Group in Fargo, ND. Andrew enjoys developing solutions using CFML, JavaScript/AJAX, Java, PHP and anything else he can steal from the web.

4 Responses to "Coldfusion Image Rotator"

  1. Brian June 22, 2009 10:40 am

    Hey Andrew,

    That’s a very nice script – just what I was looking for this morning. Apparently, I suck at Flash programming and your script came as the savior. Just one question though:

    Since my code resides on two machines – my own computer where all the code is developed and the server where the website is actually hosted, would it not be easier to set the variable folder using a relative path rather than an absolute path??

    I tried using a relative path for that variable and it doesn’t seem to work. What am I missing here??

    Thanks in advance!

  2. admin June 22, 2009 12:08 pm

    Had to check the ColdFusion documentation before I responded but the documentation confirmed what I thought. You need to use the absolute path for the CFDirectory tag.

    That said, I might have a possible solution for you. I was using two different operating systems for my developement and host. I kept a variable in the Application.cfm that defined the absolute path to the web root. I had one application file for the development environment and one for the live environment. The development.Application.cfm file had <cfset basePath = “/var/www/html” /> while the live.Application.cfm had <cfset basePath = “/home/mySite/public_html” />

    Using this basePath variable you can save your absolute path using something like this:

    <cfset folder = “#basePath#/path/to/my/images/” />
    <cfdirectory directory=”#folder#” action=”list” name=”filelisting” />

    Hope that works for you.

  3. Jason February 14, 2012 11:57 pm

    Great Script, Took me a minute to figure it out had to look at the reference you had. Seems like a pretty straight forward way to do it. Think theres a way to make them transition based on time passed? Or would that just be best used with a javascript/jquery script?

  4. Anonymous February 15, 2012 12:02 am

    Thank you. Very old script, I almost forgot about it. If you are thinking about slide show with transitions, I would definitely look into jQuery. Not sure how the new plugin site for jQuery is, but in the past there have been some really great scripts to do slide show with transitions.

Leave a Reply

You must be logged in to post a
video comment.