Ok, is it just me, or has JavaScript spoiled me? It seems like almost daily I come across a web page with a long list of image thumbnails. I click on one and the entire page reloads. I click back and get a whole other large page load. I click on another image, and, well, you get the idea. I hate this. I've blogged before about the jQuery Thickbox plugin. It is a great solution to this problem, especially when you team it up with ColdFusion. Here is a great example.
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><script type="text/javascript" src="http://www.coldfusionjedi.com/js/jquery.js"></script> <script type="text/javascript" src="http://www.coldfusionjedi.com/js/thickbox/thickbox.js"></script> <link rel="stylesheet" href="http://www.coldfusionjedi.com/js/thickbox/thickbox.css" type="text/css" media="screen" /> </head>
<body>
This is the header of the page. Most of it comes right from the default template Dreamweaver made for me. What you really want to care about are the 2 JavaScript includes and the CSS file. These are all the requirements needed for Thickbox.
<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.
<cfloop query="images"><!--- 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> </cfloop>
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.