• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

Dynamic Image Gallery

Dynamic Display Image Gallery

In this tutorial you will be shown how to display the images in the desired number of
columns and desired number of records per page with minimal coding. When the thumbnail image is clicked on it will open another window with the large image and image description under it.

Insert this open window java script into the head of your html file :

<script language="JavaScript">
   <!-- hide from JavaScript-challenged browsers
  function openWindow(url) {
              popupWin = window.open(url, 'remote',                 
                               'menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,        
                               dependent,width=575,height=500,left=0,top=0')
   }
   // done hiding -->
</script>



Next you set a few defaults.
Using the Cfparam and cfset tag :

This will set our table columns to 3
<CFPARAM name="columndisplay" default="3">


This will set the number of images to display to 24 making 8 rows in out table
<CFPARAM name="DisplayAmt" default="24">

This will set our table column start number to 0
<CFPARAM name="tc" default="0">


This sets our beginning record number to 1 and will be used in our next records
<CFPARAM name="StartRecord" default="1">


This will set the directory our images are stored
<CFSET dir="gallery/">


Why use cfparam and not cfset or visa versa?
The rule of thumb I use is: 
If somewhere in the cfm page I am going to reset the variable I use the cfparam tag. If the variable will not change again I use the cfset. 

Set up a table in an access databse named gallery, include 4 items:
Image id-autonumber
Sm_image-for our thumbnails-text 
Lg_image-for the normal size image-- text
Image text-(optional)-memo (I used to memo to accommodate large descriptions)

Then we query our database, selecting all fields. You can replace the field names with * if desired


<cfquery name="getdetails" datasource="gallery">
   select sm_image,imgid
   from gallery
</cfquery>


Now your will create a previous & next recordset
Write an if statement that checks if the query recordcount is larger than the DisplayAmt
variable set in the cfparam tag. If There are more records than the display amount set the DisplayNext variable equal to (start record)1+(displayAmt)24-1,
If it is not greater than set the DisplayNext variable to the amount of records--->

<cfoutput>
  <CFIF #Getdetails.RecordCount# GT (StartRecord + (DisplayAmt -1))>
    <CFSET DisplayNext = StartRecord + (DisplayAmt -1)>
  <CFELSE>
    <CFSET DisplayNext = Getdetails.Recordcount>
  </CFIF> 
Write an if statment: if the recordcount is not 0 this will write displaying from record number 
and to record number of the total amount of records on the top of the gallery


<CFIF Getdetails.RecordCount IS NOT 0>
Displaying #StartRecord# to #DisplayNext# of #Getdetails.RecordCount# 
Match<CFIF Getdetails.RecordCount GT 1>es</CFIF> Found...


EX: 
Displaying 1 to 24 of 49 Matches Found...
[NEXT] 


This next if statement will add a previous button if you have more than the DisplayAmt number of records in the gallery and have gone past the first set of records:

<CFIF StartRecord GT 1>
  <CFSET PrevRecord = (#StartRecord# - #DisplayAmt#)>
  <B>[<A HREF="gallery.cfm?StartRecord=#PrevRecord#"> LAST</A>]
</CFIF>
This if statement will add the next link if you have more than the DisplayAmt of records in the recordcount of the query or write the no records found
statement if the query recordcount is 0.

<CFIF Getdetails.RecordCount GT (#StartRecord# + (#DisplayAmt# - 1))>
<CFSET NextRecord = #DisplayNext# + 1>
   <B>[<A HREF="gallery.cfm?StartRecord=#NextRecord#">NEXT</A>]
</CFIF>
<cfelse>

  There are no images at this time in the Gallery.
  Please check back soon.

</CFIF> 
</CFOUTPUT>
This is the end of the previous -next navigation .

Note Here: Usually I keep the above navigation code in a file called prev_next.cfm
And use an include statement instead of all of that coding on the page. Just remember to always name your query get details or you will get an error.



Now to display our images.

<table width="500">
Loop through the query setting start rows and endrows with our #startrow# and #displaynext# variables

<cfloop query="getdetails" startrow="#startrecord#" endrow="#displaynext#">

This if statement checks to see if the tc variable is equal to 0, if it is it writes a <tr>
<cfif tc eq 0><tr></cfif>

Use the columndisplay variable to set the width of the table cells. Since I only use 2 or 3 I used else, but you can write it for as many as you want. 

<td <cfif #columndisplay# is 2 > width="50%"<cfelse>width="33%"</cfif>>

Use the output tag inside the <td> tag to display the images. Using it anywhere else will cause the images to repeat the displayAmt times the query recordcout.


I used the javascript to open a new window containing the lg_image.cfm file
and set a default width on the thumbnail image in the event the image is larger than a thumbnail and added 2 <br> tags for spacing .


<cfoutput> 
<a HREF='javascript:openWindow("lg_img.cfm?imgid=#getdetails.imgid#")'><img src="#dir##getdetails.sm_image#" border=0 width=100 alt=""></a>


I then reset the tc variable to increment by one and closed the cell

<cfset tc=#tc#+1>
</cfoutput>
</td>

Now I check to see if the tc varaible is equal the the columndisplay number 
I set in the cfparam tag. If it is, it will write the ending row tag </tr> and reset the tc variable to 0, if it is not it will repeat the <td> tags again.

<cfif tc eq #columndisplay#>
</tr>
<cfset tc=0> 
</cfif>


Close our Loop and end our table and html document and body tags.

</cfloop> 

</table>

</b></b>


You have now written the Gallery thumbnail display page.
One last page we need is the lg_image.cfm file to display the large images in.
<p>

Set the default dir ( actually I usually set this in the application page and 
then I don't have to include it on every page).

<cfset dir="gallery/">

Write a query to select the lg_img and img_text from the dbase using the 
url.imgid passed in our gallery.cfm page link

<cfquery name="getimg" datasource="gallery">
   SELECT lg_image,img_text FROM gallery
   where imgid = #url.imgid#
</cfquery>

Write the output statement to output our Image and text 
<cfoutput query="getimg">
<img src="#dir##lg_image#">
#img_text#
</cfoutput>
<p>

I have included all of the files needed to run this tutorial in this zip file