LightBox Gallery With CFIMAGE To Resize

This is some code I did when I first started to play with CFIMAGE it has been useful so felt like sharing.

I client of mine spent a lot of time uploading and adding images to his static gallery page he used Lightbox. He had to create 2 images each time one a thumbnail and the other a large size image, then he had to add each image to his page like so...

view plain print about
1<a href="img/gallery/large/example.jpg" rel="lightbox[projects]" ><img src="img/gallery/example.jpg"/></a>

This was ok at first but it started to get untidy, you know how it is, images being taking off, new images being added, long lines of img tags, messy.

Anyhow, simple bit of code, only took around 2 minutes (I love ColdFusion). Now all he does is upload 1 large image to his image directory and it appears in his gallery. Thumbnails are created on the fly and it still works with his Lightbox.

view plain print about
1<cfset imagesFolder = "./img/gallery/"><!---change to your image directory--->
2<cfset varWidth = "100"><!---image width in px--->
3<cfset varHight = "100"><!---image height in px --->
4<!---get all images from you above specified directory--->
5<cfdirectory action="list" directory="#ExpandPath(imagesFolder)#" recurse="true" name="gallery" filter="*.jpg"/>
6<!---resize and output all images to the browser--->
7<cfoutput query="gallery">
8<cfimage action="resize" source="#ExpandPath('#imagesFolder##gallery.name#')#" width="#varWidth#" height="#varHight#" name="ImageObject"/>
9<!---rel=lightbox[projects] is my light box group change to yours--->
10<a href="img/gallery/#gallery.name#" rel="lightbox[projects]" ><cfimage action="writetobrowser" source="#ImageObject#"/></a>
11</cfoutput>

Oct01

Post Info

Comments 2

[Add Comment] [Subscribe to Comments]
  1. josue's Gravatar # Posted By josue
    21/02/09 02:42

    hey man nice tutorial but is not working, i bean looking and i need to try with a lightxob but is not working, if you can help with this i really need it, look what i need is to make the lightbox work with this that all

    josue

  1. Glyn Jackson's Gravatar # Posted By Glyn Jackson
    24/02/09 21:30

    Yes, my example is mainly showing how to load images dynamically using ColdFusion and not really how to use or setup Lightbox itself. I think in this example I actually used Silmbox. It does not matter which you use.

[Add Comment]