Raymond Camden's Blog Rss

jQuery Thickbox and ColdFusion Dynamic Image Resizing

37

Posted in jQuery, ColdFusion | Posted on 02-17-2009 | 20,463 views

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.

view plain print about
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5<title>Untitled Document</title>
6
7<script type="text/javascript" src="http://www.coldfusionjedi.com/js/jquery.js"></script>
8<script type="text/javascript" src="http://www.coldfusionjedi.com/js/thickbox/thickbox.js"></script>
9<link rel="stylesheet" href="http://www.coldfusionjedi.com/js/thickbox/thickbox.css" type="text/css" media="screen" />
10</head>
11
12<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.

view plain print about
1<cfset imageFolder = "folder2">
2<cfset imageDir = expandPath("./#imageFolder#")>
3<cfdirectory directory="#imageDir#" name="images">
4
5<!--- make thumbs --->
6<cfif not directoryExists("#imageDir#/thumbs")>
7    <cfdirectory action="create" directory="#imageDir#/thumbs">
8</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.

view plain print about
1<cfloop query="images">
2    
3    <!--- valid image? --->
4    <cfif isImageFile("#directory#/#name#")>
5        <!--- check for thumbnail --->
6        <cfif not fileExists("#directory#/thumbs/#name#")>
7            <cfimage action="read" source="#directory#/#name#" name="image">
8            <cfset imageScaleToFit(image, 125, 125)>
9            <cfset imageWrite(image, "#directory#/thumbs/#name#",true)>
10        </cfif>
11        
12        <cfoutput>    
13        <a href="#imageFolder#/#name#" title="#name#" class="thickbox" rel="gallery-ss"><img src="#imageFolder#/thumbs/#name#" alt="#name#" /></a>
14        </cfoutput>
15    </cfif>
16</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.

Download attached file

Comments

[Add Comment] [Subscribe to Comments]

Katie Atkinson said on 02-18-2009 at 4:43 AM #
I'm so excited by all this... Thanks for bringing JQuery into my life Ray :)
Curt Gratz said on 02-18-2009 at 7:23 AM #
Ray,

If you want to use the writetobrowser action and resize each image on the fly you can with your imageUtils. <a href="http://imageutils.riaforge.org/">http://im...; using the getURL() method. Just a thought so you don't have to write all the thumbs to disk. Might be expensive depending on the application.
Eric Cobb said on 02-18-2009 at 9:00 AM #
I used almost this exact same solution a few weeks ago here: http://missga.org/winnergalleryimages.cfm/5/Miss-G...

The only difference is I used Lightbox (http://plugins.jquery.com/project/jquerylightbox_b...) instead of Thickbox. No particular reason why I chose one over the other, I think it was just the first one I found.
Raymond Camden said on 02-18-2009 at 9:02 AM #
@Curt: I would definitely recommend against that. Resizing is a slow operation at times. I'd only resize once. My method writes to disk just once.

As for getURL, that is for converting a URL into an image, ie, taking a screen shot of a web page. It is not for resizing images.
Chris said on 02-18-2009 at 1:22 PM #
I will definitely check this out. Have you tried it with a lot of images, say 100?
Raymond Camden said on 02-18-2009 at 3:28 PM #
I would expect the first hit to be significantly slow. So I'd probably copy 20 at a time. Maybe 50. Of course, once shrunk, it will be much faster.
Chris Luksha said on 02-19-2009 at 8:32 AM #
Why not - instead of deleting the thumbs folder - just use your little blog cfc trick and put in some kind of reinit key to trigger the last portion of your code? After all the last section only created a thumb if the image did not have one.

So you might do
<cfparam name="url.gogogadgetreset" default="">
<cfswitch expression="url.gogogadgetreset">
<cfcase value="rebuild"> Dump the thumb folder and start over</cfcase>
<cfcase value="refresh">simply refresh the missing thumbs</cfcase>
<cfdefaultcase>do nothing</cfdefaultcase>
</cfswitch>

Just a thought
Chris
Marwan Narian said on 02-19-2009 at 9:50 AM #
Great work but adding any CF ajax tags breaks it. CF ajax tags seems not to want to work with any other Javascript.
Raymond Camden said on 02-19-2009 at 9:52 AM #
Nothing in jQuery should 'break' with CFAjax, and vice versa. I'd dig into your code more. Got to be something simple. :)
wade miller said on 02-19-2009 at 12:05 PM #
After reading your posts about jquery I quickly became a fan, but I have the latest jquery release, and thickbox does not work with it. Only after I used the release you have in this code does it work.

That gives me some concerns about using jquery. I guess nothing is perfect. I am just trying to convince others at my company of its benefits, and this didn't help.
Raymond Camden said on 02-19-2009 at 12:08 PM #
Wade - I'm using the latest jquery myself and it worked fine with thickbox. I'd try again and see if it was something else.
Bilgehan said on 02-19-2009 at 1:12 PM #
Although ajax is handy and improves user experience for forms and similar applications, i prefer rest style, easily bookmark-able image galleries.
wade miller said on 02-19-2009 at 1:15 PM #
Oh, I am about to give up on it. Using jQuery v.1.3.1, the code does not work for me. The larger images do not pull up. Using the version that you reference in the code above, jQuery v. 1.2.6, everything works fine.

I know there is something I'm probably missing. I'm just going to go back to CF.
Raymond Camden said on 02-19-2009 at 1:36 PM #
@Bilgehan: So what if there was a way to bookmark one of the images? If I did a demo of that, would you approve?

@Wade: Again, my local server was using 1.3.1. Not sure what you mean by saying you will just go back to CF - as this IS CF, CF and JavaScript. :) I wouldn't give up yet. Can you put this online where we can look?
Bilgehan said on 02-19-2009 at 2:48 PM #
Yes, providing permalinks for the images would be great for accessibility.
Raymond Camden said on 02-19-2009 at 2:53 PM #
Ok, I've got it on my TODO list. I'm thinking that, by default, you will land on a page and just see the thumbnails, but if you follow the permalink, it will auto load the right image. I can do this - I know I can - just give me few hours. :)
wade miller said on 02-19-2009 at 2:57 PM #
Okay, here are the links. It is the same exact code except for the jquery.js

http://www.bray.com/tboxtest/index.cfm?test=works

http://www.bray.com/tboxtest/index.cfm?test=fail

What I meant by "back to using CF" I left off and actionscript.
Raymond Camden said on 02-19-2009 at 3:06 PM #
Use Firebug. Go to the net tab, and you will see it fails on

http://www.bray.com/tboxtest/macFFBgHack.png

On the docs for Thickbox, they talk about the fixes you have to do in code for this.
wade miller said on 02-19-2009 at 3:16 PM #
I looked all over the documentation. Two of us did. I can't believe we missed that. Thank you.

I've been meaning to install Firebug, but I always put it off. Now, I will do it while it is fresh on my mind.
Hatem Jaber said on 02-19-2009 at 4:25 PM #
@Ray, not sure if you looked at Fancybox, but i've used it and it's a really nice modal for the gallery stuff:

http://fancy.klade.lv/
Raymond Camden said on 02-19-2009 at 4:47 PM #
That's pretty snazzy.
Raymond Camden said on 02-20-2009 at 6:04 AM #
@Chris: Yes, that's an idea as well. I started to build a custom tag version of this to make it simpler, but the code is so short I didn't really think it worthwhile.
Marwan Narian said on 02-20-2009 at 10:40 AM #
Ray, please try to display the images in a cflayout type border as an examples of how things breaks with cf ajax when adding external javascript.
Raymond Camden said on 02-20-2009 at 2:10 PM #
@Marwan: Well, Thickbox is looking for items that match a class when the page loads. If the cflayout loaded content via Ajax then the content wouldn't be there when thickbox was trying to run it.
Marwan Narian said on 02-20-2009 at 2:38 PM #
Is doing this loading via ajax? And how do you make this kind of calls work? Excuse my poor Javascript skills. Thanks.

<cflayout type="border">
<cflayoutarea name="whatever" position="center">
<script type="text/javascript" src="http://www.coldfusionjedi.com/js/jquery.js"&g...;
<script type="text/javascript" src="http://www.coldfusionjedi.com/js/thickbox/thickbox...;
<link rel="stylesheet" href="http://www.coldfusionjedi.com/js/thickbox/thickbox...; type="text/css" media="screen" />
</head>

<body>

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

<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>
</cflayoutarea>
</cflayout>
Raymond Camden said on 02-21-2009 at 4:01 PM #
That code worked ok for me.
Marwan Narian said on 02-23-2009 at 9:13 AM #
Glad the code works for you. This code and any code that contains cflayout of type border that you insert javascript any where in it stops to work on all 3 of our servers.
Raymond Camden said on 02-23-2009 at 9:17 AM #
And you used the exact same code? Are you running CF801 with the latest hotfixes?
Tiffany Trott said on 03-04-2009 at 9:58 AM #
I am experiencing the same problem as Wade Miller. If I use the current 1.3.2 release of jquery the code does not work, revert back to an older version it works fine. I did change the path for macFFBgHack.png and all other paths as well. Any ideas on this? I have experienced this problem on a few of our apps at work as well, they work fine with the older jquery builds but the latest release seems to break them.

Any help would be appreciated!
Raymond Camden said on 03-04-2009 at 10:04 AM #
I've confirmed - and I'm digging. May have to check with the plugin author.
Raymond Camden said on 03-04-2009 at 10:09 AM #
Ok, I punted. I contacted the plugin author.
Raymond Camden said on 03-04-2009 at 10:11 AM #
I should have just checked his forums first:

http://codylindley.com/thickboxforum/comments.php?...

I replace the line mentioned and it worked for me.
Tiffany Trott said on 03-04-2009 at 10:38 AM #
Thank you so much! I guess I could have checked the forums too, but letting others who come across this post know is a good thing as well.

Thanks again Jedi!!!
Wade Miller said on 03-04-2009 at 5:40 PM #
I had looked, but never found this solution. I had been cheating and including the older jQuery just for this particular plugin. It was working, but I was never happy since I was fudging.
Clint McKoy said on 04-22-2010 at 6:10 AM #
Awesome and easy... thanks for another great tutorial! Just set this up on a site I'm converting from php to cfm that has many galleries and no database... this made my day a whole lot easier.
Adam said on 10-27-2011 at 11:26 AM #
Great tutorial! It has helped me immensely. I am wondering about adding captions to describe the images. It seems that the quick and easy way would be to rename the image using the description. Is this wrong or bad? How else should I perform this?
Raymond Camden said on 10-27-2011 at 4:55 PM #
Well, it might get messy. I mean, this is ok:

A_Picture_Of_My_Dog.jpg

But a caption that was a bit longer would be ugly. I'd maybe consider storing the captions in a db table that related file names to captions.

[Add Comment] [Subscribe to Comments]