Quickie ColdFusion Image Viewer

Need a quick way to add a slide show to a directory of images? I have many times in the past. Here is a simple block of code. It needs to be dropped in the same folder as the images, and it doesn't do anything fancy like thumbnails, but it does let you quickly add an image browser. This is much easier than giving someone an index of images and asking them to go back and forth to view all the images. Comments are inline with the code, but let me know if you have any questions. And yes, obviously, it could be done a lot more fancier. Remember KISS.

<!--- param the image to show ---> <cfparam name="url.image" default="1">

<!--- directory ---> <cfset dir = expandPath(".")>

<!--- get all images ---> <cfdirectory directory="#dir#" filter="*.jpg" name="images">

<!--- quick sanity checks ---> <cfif not isNumeric(url.image) or url.image lte 0 or url.image gt images.recordcount or round(url.image) neq url.image> <cfset url.image = 1> </cfif>

<!--- do we even have images? ---> <cfif images.recordCount> <cfoutput> <table align="center"> <tr> <td colspan="2"><img src="#images.name[url.image]#"></td> </tr> <!--- links ---> <tr> <td> <cfif url.image gt 1> <a href="#listLast(getCurrentTemplatePath(),"/")#?image=#url.image-1#">Previous</a> <cfelse> Previous </cfif> </td> <td align="right"> <cfif url.image lt images.recordCount> <a href="#listLast(getCurrentTemplatePath(),"/")#?image=#url.image+1#">Next</a> <cfelse> Next </cfif> </td> </tr> </table> </cfoutput> </cfif>

Archived Comments

Comment 1 by Bryan Dolnik posted on 7/24/2006 at 6:00 PM

Pretty cool, I dropped it in and it works like a charm, nothing exciting here just some family photos... http://www.dolnik.com/image...

Thanks Ray, a very handy little piece of code!

Comment 2 by Raymond Camden posted on 7/24/2006 at 6:06 PM

Cute kids. Mine are cuter of course... ;)

Comment 3 by RconR posted on 7/24/2006 at 7:46 PM

Ray:

This is awesome!!!! But, you know what would be really cool. If we could make a dirty quick FLASH FORM and have the same functionality. Just to make it look pretty. Not in pink because I hate that color.

Coldfusion is still a big mystery to me especially with Flash Forms.

Thanks.

Comment 4 by Ryan posted on 7/24/2006 at 7:52 PM

Agreed, cute kids Bryan, there are some really good pictures in there!

Ryan

Comment 5 by Raymond Camden posted on 7/24/2006 at 8:01 PM

RconR: I wouldn't use Flash Forms now that Flex2 makes it easier. :) I'll try build such a beast.

Comment 6 by James Edmunds posted on 7/24/2006 at 8:06 PM

This goes into the category for me of Get the Most Out of A Seemingly Simple ColdFusion Tag! Namely, in this case cfdirectory.

A couple of months ago I built a feature for a photographer client to let his clients see and order photos from a shoot which lets him simply FTP his slightly-cleaned up shoot folder (get rid of a few, although almost all of his are gems, and batch resize in Photoshop into the folder he uploads), pop over to his admin to give it a name and a password for the client and set the print prices if not the defaulted amounts, and that's all to have a page that shows thumbs, click to see full photo, and even prints an order form they can fax or mail. All with a bit of cfdirectory and a smattering of CSS. Unfortunately I can't send you a sample link as it is all behind client passwords, but you get the picture.

My point is, one little tag like cfdirectory can sometimes provide lots of power to solve a problem and get something done!

Comment 7 by Raymond Camden posted on 7/24/2006 at 8:58 PM

I built on in Flex2 in about 10 minutes. I'll post it tonight.

Comment 8 by todd posted on 7/24/2006 at 9:45 PM

Dang it! I JUST finished one in flash forms yesterday!!! I was going to release it next week! Always one step ahead of us Camden!

Comment 9 by Gary Funk posted on 7/25/2006 at 6:06 AM

Waiting for tonight to get here. Great work Ray. How do you think of these things?

Comment 10 by Raymond Camden posted on 7/25/2006 at 6:10 AM

I have lots and lots of pictures. I'll definitely post my flex app before I go to bed. It isn't much, I'm still learning, but it works, and wow do I love how easy Flex is.

Comment 11 by Gary Funk posted on 7/25/2006 at 6:21 AM

I have a few thousand pictures. If you like Racing, look at locophoto.com

Comment 12 by robi posted on 7/25/2006 at 6:46 AM

In the last Forta Advanced CF book there is code to use a gateway and java to automatically generate thumbnails. Great for your photo viewer code.

Comment 13 by Matt posted on 7/25/2006 at 1:04 PM

Hi guys.

The code looks great Ray.

I have written a cfc for my company Intranet that works as a photo gallery.
The only arguments to is the directory location of the gallery, and it will display all "albums" (directories) within the gallery.
A scaled thumbnail image is provided for each image on the gallery viewer, with quick links to open up the file. It also generates the necessary html for the user to copy and paste the file into the URL, use as an <img src..> tag or even a <a href..> (just like photobucket, if anybody uses that service)

I'm very happy with the results, and will post a demo if anybody is interested..?

Comment 14 by Bryan Dolnik posted on 7/25/2006 at 4:57 PM

Would love to see the demo Matt.

Comment 15 by Matt posted on 7/25/2006 at 5:47 PM

Ok, I've done my best to set up a temporary access point.

Please bear with me, and I apologise that the server is pretty slow..

The photogallery can be viewed (for a few days) here:
http://giffserver.no-ip.inf...

At the moment, the cfc still needs a little 'tweaking', and will incorporate the form within the component itself, but I'm pretty happy with the outcome so far, and it does exactly what I need it to do (for the moment)

Comment 16 by Michael White posted on 7/25/2006 at 8:27 PM

I used FusionGallery to generate an xml "album" file for a directory of photos and then use the xml file for the demo flex2 photo gallery. Fusion Gallery uses a custom tag to create three sizes of photos but I don't use that feature in the flex app although it would be nice to offer different sizes for different connection speeds. If I knew what I was doing, I could do the whole thing in Flex:
http://www.michaelwhitephot...