I want to build a page which will make use of the Thickbox plugin, but I don't want to hard code the images. Instead, I'll let ColdFusion scan a folder and create the list for me. Since I'm using ColdFusion 8, I can also use it to create the thumbnails as well. This means I can copy images right off my camera, dump them in a folder, and leave it at that. I like easy. Let's look at the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title>
<cfset imageFolder = "folder2"> <cfset imageDir = expandPath("./#imageFolder#")> <cfdirectory directory="#imageDir#" name="images">
<!--- make thumbs ---> <cfif not directoryExists("#imageDir#/thumbs")> <cfdirectory action="create" directory="#imageDir#/thumbs"> </cfif>
The variable imageFolder, simply refers to the subdirectory where I'm storing the images. The variable imageDir is a full path version of imageFolder. I need both a real full folder for ColdFusion and a relative one for my HTML later on. The cfdirectory tag simply grabs the files in the folder.
I check for a subdirectory named thumbs. If it doesn't exist, I create it. This should only be run once. If you needed to regenerate the thumbnails for whatever reason you can simply delete the folder.
<!--- valid image? ---> <cfif isImageFile("#directory#/#name#")> <!--- check for thumbnail ---> <cfif not fileExists("#directory#/thumbs/#name#")> <cfimage action="read" source="#directory#/#name#" name="image"> <cfset imageScaleToFit(image, 125, 125)> <cfset imageWrite(image, "#directory#/thumbs/#name#",true)> </cfif> <cfoutput> <a href="#imageFolder#/#name#" title="#name#" class="thickbox" rel="gallery-ss"><img src="#imageFolder#/thumbs/#name#" alt="#name#" /></a> </cfoutput> </cfif>
Now for the complex part (and it really isn't that complex). I loop over the images query returned from the cfdirectory tag. For each file, I check to see if it is a valid image. If so, I then see if the thumbnail exists. If it does not, I read the image in, resize it, and save it in the thumbnails folder.
The last thing to do is output the HTML. I have to use the proper class/rel attributes for Thickbox but the only real dynamic part is the URL used for the link and image tag.
And that's it. You can see this code in action here. I've also zipped the entire thing up and attached it to the blog post. Please download the Thickbox JS code yourself though.