ColdFusion Auto Gallery
Creating a photo gallery can be time consuming for even a handful of images. Auto Gallery is a quick and dirty photo gallery tag meant to solve one problem. Automatically generating photo galleries from a folder of images and thumbnails. Team up autoGallery with Photoshop's Batch automation tools and you have a very quick gallery of images!
If your the type of person that just can't wait, here is a demo and download link.
Preparing Your Images
Prepare your images by creating a large version and a thumbnail version. The thumbnails can be any size you like. It's best to make them no larger than 100 pixels on either side if unless you do not mind changing the css. Large images can be any size you wish.
Save the thumbnails into a separate folder (thumbs) from your large images (large) but keep the file names the same. autoGallery simply references the large images based on your thumbnail file name.
For sake of demonstration I am placing the both the "thumbs" and "large" folder in a folder called images. This is the default directory for autoGallery. You can think of this as an album. The name can be anything you want. Naming it something other than "images" just means that you will need to use the image path attribute in the call to the tag. See Optional Attributes below.
Preparing Your Document
autoGallery uses jquery and FancyBox for it's cool gallery overlay effect. You can use anything you like with minimal customization. For this we will a few lines to our document <head> and call our magical jquery code. While we are there, we will call the fancy zoom css file and our page styles.
<link rel="stylesheet" type="text/css" href="resources/style.css" />
<link rel="stylesheet" type="text/css" href="resources/fancy.css" />
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript">
$(function(){
$(".thumbnails").fancybox({ 'zoomSpeedIn': 500, 'zoomSpeedOut': 500, 'overlayShow': true });
});
</script></p>
Using the Tag
You can use autoGallery with any existing coldfusion page with any style you wish. I have included a starter index.cfm for you to use. There is only one line needed to call the autoGallery tag.
<cfmodule template="autoGallery.cfm">
Place this module call on any page that you wish to use autoGallery with and that's it.
Optional Attributes
You can specify additional parameters to the tag for adding various functionality or customization. Here is a list of optional attributes.
| Attribute | Required | Default |
|---|---|---|
| largeimagepath | Only if default is not used | images/large/ |
| smallimagepath | Only if default is not used | images/thumbs/ |
| classvalue | no | thumbnails |
| sort | no | file name |
| order | no | asc |
| showtitle | no | false |
largeimagepath: Path to large images folder
smallimagepath: Path to small images folder
classvalue: If you need to specify a different class for the thumbnails in case it conflicts with existing page styles.
sort: Change sorting method to any of the following attributes: name, size, type, dateLastModified
order: Sort in asc or decs order
That's all there is to it. I think it took longer to write this article than it took to create. This is by far my most used snippet of code. It enables me to put images online in record time for clients, friends, and family to enjoy. Best of all, it looks great, and is incredibly easy to use.
Additional Credits
Though I have used this script for several years, I do need to give credit to Script Style for publishing their php auto gallery script. After reading their article and seeing the number of positive comments they received, I decided that I could make my script available to the community as well. I did however, ditch my old lightbox script in favor of the jquery script because it looks way cooler than lightbox.
Tags: ColdFusion · Design · Freebies
12 comments so far ↓
Maybe I should just be patient and let you take a look :)
Thanks for being there for us beginners in coldfusion! I'm ever so grateful
I am having problem "containing" the gallery (same as Marita above). I am just creating an HTML table with a fixed width but the gallery keeps stretching the table larger. Need help.
Tks
Leave a Comment