473,703 Members | 2,914 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

ColdFusion Image Gallery

By Max Kington
Senior Programmer, Webhanger.com

Image Gallery

This example will show you how to use URL variables and make use of ColdFusion templates. The idea is to have an image gallery with two Pages. One standard HTML page and one ColdFusion template. The normal HTML document will be the page with all of your thumbnails on it. When a specially formatted link beneath the image is clicked on, the browser will go to the ColdFusion template and display the larger, full-size image in the page. Before you would have to have used one page for the thumbnail and another for each larger image. Now all you need to use is two pages, one with the thumbnails and one for the full size image. What you do is tell the ColdFusion template what image you want to insert into the page. The following code shows you how to do this.

In this application we use two variables. Url.title and Url.myimage. The title variable is the text to go inside the title tags, the myimage variable is the name of the image file to be shown.

On the Thumbnails page URL's to the ColdFusion template will have to be created using the following format. For image 1 a link totemplate.cfm?title=mytitle&myimage= image1.jpg, for image 2 a link to the same page would look like template.cfm?title=mytitle2&myimage=image2.jpg or whatever the filename of the second image would be. Now lets look at the code that will deal with these URL's.

PLEASE NOTE: The HTTP 1.1 specification limits the number of characters that can be passed down along it to 1000 characters. This includes the web site URL. Therefore large amounts of text can't be sent down the URL.

3. <html>
4. <head>
5. <cfif isDefined("url.title">
6. <cfoutput><title>#url.title#</title></cfoutput>
7. <cfelse>
8. <cflocation url="thumbnails.html">
9. </cfif>
10. </head>
12. <body>
13. <cfif isDefined("url.myimage")>
14. <cfoutput><div align="center"><img src="#url.myimage#"></div></cfoutput>
15. <cfelse>
16. <cflocation url="thumbnails.html">
17. </cfif>
19. </body>
20. </html>

Explanations of the ColdFusion Code follows.

The Code

Lines 5-9:

This CF code deals with the title attribute of the page. Using <CFIF> and the isDefined function we check to see if the title variable has been passed into our ColdFusion page. If not, then we send the person back to the thumbnails.html. Otherwise, if it has been defined we place the title specified in the URL in between the <title> tags so when it returns to the browser the title is specific to the image.

Lines 13-17:

This is the part of the page that deals with displaying our image.

In the URL link to that page we will pass the location and name of the image file. E.g. template.cfm?myimage=image1.jpg. Then when the page gets back to the user image1.jpg will be inside the IMG SRC tag and so the browser will retrieve image1.jpg. If the second link is clicked on then the information appended to the URL will be used, so if the link followed was template.cfm?myimage=image2.jpg then the text image2.jpg would be inserted into the place where #url.myimage# is used in the template. Hence the template.cfm will load whatever image it's told to load by the URL. If this attribute isn't there then the isDefiend function will return false and therefore go to thumbnails.html.


In this article we have looked at variables in a very basic level and attempted to describe what they do and how they can be used. There are many sources of variables and ways that they can be manipulated. As you read thorough each article you will see them in use more and more. Variables are very powerful and you will use them extensively in your ColdFusion applications.

« Using Variables  

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.