NOTE: This project has been updated.
Read explanation below and then see:

This little project is two things in one...  a thumbnail gallery creator and a neat jquery gallery display
...both of which I am proud to show off and share after a long day of tinkering

I have a client who wants 'a bunch of photo galleries' on her site.... and she likes a flash gallery with a sliding row of thumbs at the top, large image below.
So - I built a CF tag to make galleries on the fly (in several ways.. .keep reading... ) AND a jQuery gallery that behaves just almost exactly like her flash example.

1)  // instant coldfusion photo gallery creator! //
First, I have created (and today, cleaned up and bundled) a coldfusion custom tag that automatically generates entire galleries of resized photos with thumbnails, and several options.

The same tag also displays the galleries for every folder inside a given location, creating thumbs on the fly.

By itself, it looks like this

A very naked gallery skeleton, ready to be turned into any kind of gallery you like.

Options include
 - show links or select dropdown for choosing gallery
 - show thumbnails with gallery chooser links
 - crop thumbs to centered square tile (like my examples) or use w/h resizing

There is a LOT of potential in this little script, including instant thumbnails, easy to update galleries, and a bunch of built-in options.

See my dev notes at the end of this post.

2)  // jquery slider gallery ! //

An updated version of my homegrown jQuery 'slider' gallery.
This page is using the exact same cf tag with the same exact base content.

jQuery and CSS turn the first page, above, into this.

NEW in this version - friendly 'no js' degredation. (disable js to see a styled gallery of thumbs, linked to their large images)

Also added
 - title / alt tags on thumbnails
 - captions! (currently title name with image file name)
 - next/back links
 - click large image to advance through
 - looping next/back function (goes back to start after last image)

Here is a version with dropdown instead of links, and the filename removed from the captions

and another version with no captions

These options can all be set when calling the tag from your main page, i.e.

<cfimport prefix="sitetags" taglib="tags" />
    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"

To Do:
- Advance the slider when clicking the next/back links or large image
( best approach - auto scroll current thumbnail to center as part of the 'current image highlighting' function)
- Preload the large images
- Show a transition effect (might require multiple large images and a swap behavior)
- Show a 'loading' graphic while waiting for large image to load

jQuery code is a bit messy, this is all very fresh, but I would love to have some input for ways to speed it up or add the auto-advancing function.


I'd like to post this on riaforge and maybe other places too, in a nice 'demo' wrapper, as a freebie for the CF / jQuery world.
First, I'd like some feedback from people actually trying to use it.

The important concept here - this is two things - the cftag that makes all the thumbnails,
and the jquery / css that turns that raw markup into a gallery. They can be used together or totally independently.

Please contact me directly - I can easily bundle this up and send it to you for testing, let me know.


For those who might be interested, I put heavy instructions / notes into the head of the tag file.
Here is what it says currently...

Photo Gallery Custom Tag
Michael Evangelista : Evangelista Design :
Creates thumbnails and full size images on the fly, creating a thumbnail gallery
Created 20081011

1)Set up your images in directories, grouped by gallery
   The name of your folder will be the name of the gallery
   Put all of these named folders of raw images into any other folder (this is your 'parent' folder)

    note: The size of the original images will have a big effect on performance.
    Ideally your images should not be huge to begin with, but can be larger than your large gallery size.
2) Put this file in a folder called 'tags'
3) Put this code at the beginning of any cfm page
   (adjust the path so it points from your cfm page to the 'tags' folder)

    <cfimport prefix="sitetags" taglib="tags">

4) Put this code below that
    (origfolder is the path from your cfm page to the parent folder for your original , unsized images)
    (newfolder is the path from your cfm page to the new parent folder for your gallery images
     **this will be created for you if it does not exist!)
    (gallery url is the url version of the path above)

    ** Be sure your paths and url end with the trailing slash 

    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"
5) Browse to your page. You won't see anything but a dropdown list with no options.
    Put "?init=run" after your page url (i.e. gallerypage.cfm?init=run) and the page will make your gallery folders for you (be patient).
    You should then see an option in the dropdown for each folder, and a set of thumbnails showing each gallery.
    Change the selection, see the thumbnails.
    ** Note: you can - and should - change the cfparam for "attributes.initpw" to anything you like, instead of 'run'.
        Make it hard to guess so nobody can trigger your gallery creator without permission. Then just use "gallerypage.cfm?init=mynewpassword".
    ** If the page times out or takes too long, try it with less images per folder, or just put a few folders at a time in your parent directory.
    ( see 'adding images' below)
6) When the gallery creator is done, you will see the page refresh, with links or dropdown options now in place for each gallery.
   Select one... there it is!
Now you have the basic skeleton of any dynamic gallery display - thumbnails in ul/li html markup, each linked to their larger versions,
with a title created from the folder name, and a set of links to manage the different galleries. Depending on your settings ( see below ),
you also have captions and thumbnails in the selection menu (if using selecttype = 'ul' and showthumbs = 1)

You can link to any gallery by simply putting the name in the url like this
gallerypage.cfm?gallery=some-gallery-name  (note the url-friendly hyphenation)


You can set the max width or height of thumbs and full size images in the params below, or by adding the attributes to your tag call.
( note: the sizes will not apply to images that have already been generated)

    origfolder = "#expandPath('_temp/')#"
    newfolder = "#expandPath('img/galleries/')#"
    galleryurl = "img/galleries/"

You can also use the 'cropthumbs' and 'thumbcropsize' options to set up a square cropped thumbnail using the 'thumbcropsize' for both width and height.
( note: cropthumbs=1 overrides all thumbnail width and height settings)
You can control some of the output markup with these options errorFiles
(note: showthumbs only applies if selecttype is 'ul', no thumbs shown with dropdown)

You can also set the name of the thumb and full folders


And the type of selection list  - choose from links or select box ( "ul" or "select" ) or code in your own
You can also turn off the thumbnails on the gallery list page


This tag does two distinct things

1) in INIT mode (with ?init=run in the url OR by putting initmode='1" in the tag call)
     What it does: Get directory listing, create folders, resize photos

The tag looks at the origination folder, and checks for folders inside of that.
It loops through each of the image files in the those folders, and makes a new folder
in the destination with resized images,one for each original subfolder.

If the destination parent folder does not exist, it will be created for you.
Your folder names will be made web-friendly, replacing special chars and spaces with "-"       

Inside of each folder will be two more folders, "thumb" and "full" (or whatever you assign in the attributes).
The generated images will have the exact same filename, they are just in different folders
(this makes javascript / css gallery coding really simple!)

The resizing will use the larger side of your image and compare to the max set for that dimension.
(i.e. wide images get resized by width, scaling the height; tall images are resized by height, scaling the width.)
Images will not be made larger than the original.

2) In 'standard' mode (default use)
      Get new directory listing, create thumbnails from large images, show html with linked thumbnails

The tag looks at the gallery parent folder ( in your "newfolder" attribute)
A list is created of all the folders inside the parent, with filenames made 'reader friendly' (hyphens replaced with spaces)

If you have a folder matching the 'fullfolder' attribute (i.e. "full"), you have a gallery.
The code loops through the fullfolder, and checks for a thumbnail for every full size image.
If there is not a thumbnail, one will be created for you.

A list of all the gallery folders is created, either as a ul/li list of links,
or a select box dropdown that changes the page automatically on selecting a gallery.

The output from this code is very basic html markup.
The images are in a ul/li list, with thumbs linked to their larger counterparts - very easy to target with css and/or javascript.
The gallery name (and filename if showfilenames = 1) is assigned as the 'title attribute on the thumbnail's link element,
and as an 'alt' attribute on the thumbnail image itself, and used as a caption (if showcaptions = 1).


Here is where it gets really cool - you have several options for updating your existing photo collection.

You can slide a new 'full' image into an existing gallery's 'full' folder, and the thumbnail will be created instantly
(when you view the page for the first time).

You can create a whole new gallery in standard mode by adding a folder to your parent directory,
containing another folder called 'full' with your presized larger-size images. On first view, the thumbs will be created for you.

You can resize all your thumbs by deleting the all the thumbnails from the small size folder,
and setting a new thumbw and thumbh in the tag attributes. Just browse to your gallery to get all new thumbs.

You can add and auto-resize a new gallery any time by adding a new folder to your original location and running in 'init' mode again
(any folders that already have a matching gallery folder in the destination will be ignored)

So, you have several options for adding more photos.

To remove images from the gallery - just delete the large one, the thumbnail will be ignored.

// THAT's IT!

// Please send comments or additions to Michael Evangelista, evangelistadesign at gmail dot com or
  Thanks and have fun