Building a Dynamic P7 Image Gallery

Project Seven has great products for increasing the pinache and functionality of any website. Their Image Gallery creates a slideshow of images in a 'filmstrip' type of gallery. When HHWD created this for Aiken's Makin's website, it was instantly a huge hit.

Another client, with a CF8 website wanted the same functionality with their home tour. But it needed to be able to pull photos from two locations and build the image gallery on the fly.

Here is how to do this (after you first buy IG from P7):
1) In the page to build the Image Gallery, first create a 'dummy' image gallery, by allowing the code to set up a gallery using 2-3 images of your choice. This lets the P7 base code and CSS to be set up.
2) Update the code as follows. Since I needed to be able to display image, description, and alt tags, I first built an array of structures containing the image information to be displayed.

(first thing: before creating your image gallery and customizing it set a variable rowpernum = the number of tnails per row)

Heres the code

The idea is to determine the number of thumbnails per row, know the ending tnail for the current row (and if it is at the end of the array/recordset -- variable i) and know the actual tnail number you are on (-- variable j)

Quick & Dirty: Carrying Form Variables on Multi=page Forms

Since HTML is a 'stateless' environment (meaning that once you go to a new page, the information on the old page isn't saved on its own merit), multi-page forms can be a pain.

You could make either a LOOONNNGGG form that bogs down the user and risks potential session timeouts. Or use a multi-page form, taking care to manage the variables from page to page.

In Coldfusion, this is very easy. And you don't have to even keep up with all the variable names from page to page.

You can either keep up with the values on previous form pages by re-establishing them in the current page form, or you san save them as session variables.

To re-establish them as form variables on your second (and subsequent form pages), add the following to your code after your

tag. (I used the generic HTML form tag here, but CFFORM should work as well)


<cfloop list="#form.fieldnames#" index="i">
<input type='hidden' name="#i#" id='#i#' value="#evaluate(i)#" />
</cfloop>

This will recreate the form variables as hidden fields in your form.

To save them as session variables, do the similar loop:


<cfloop list="#form.fieldnames#" index="i">
<cfset "session.formdata.#i#" = "#evaluate(i)#" />
</cfloop>
(Note, Assumption is you are working in CF7/8. If using earlier versions, remember to place a scope lock around your loop)

Or... You could do both to make absolutely sure you have the data for your user:


<cfloop list="#form.fieldnames#" index="i">
<input type='hidden' name="#i#" id='#i#' value="#evaluate(i)#" />
<cfset "session.formdata.#i#" = "#evaluate(i)#" />
</cfloop>

Of course, remember to add your data validation per page, so that the user doesn't get all the way to the end of the form to find an error on page 1 :).

Quick & Dirty Tricks -- Using CFDUMP inside CFC -- Viewing All Methods, Pt. 2

In the second part of CFDump Q&D tricks, you can view the entire methods and settings for a CFC, just like you would see in the 'Live Data View' from inside Dreamweaver.

Placing in a CFC outside a function, but inside the tags starts the setup and produces a runtime dump that looks like this:

Clicking on the linked 'component' in that dump will open up the Live data View (note, you'll need administrator privileges to view the methods).

And, in keeping with Adobe's color coding, CFC Dumps are red :).

Quick & Dirty -- Using CFDUMP To View CFC Functions

CFDUMP is a quick way to see the contents of variables, structures, arrays, even queries. But it can also be used to quickly see at runtime the parameters and setup of a called CFC Function.

If a is placed inside a CFC Function, then at runtime, the dump generated shows the user quick information regarding the function itself.

Side Note: Adobe color codes cfdumps (if not overridden by CSS settings). variable and structure dumps are blue, arrays green, queries purple-ish, CFC Methods are red,and CFC functions are brown. Nice tough to pick out types of dumps.

More Entries

BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.002. Contact HHWD