ColdFusion slideshow possibilities?

[cfsetNewbie]

Hello;

I am trying to come up with a way to make a coldfusion slideshow using cf code and javascript. I am hoping someone can help focus me into a proper solution. In my head, it seems kind of easy, I would just need a java script "timer" of sorts to cycle through all the records in the database, or turn it off and do it manually. I am going to post my coldfusion portion of the code.. maybe someone can either point me in the direction of a site with a tutorial, or help me with the java portion?

Normal cf query with paging function-

<cfquery NAME="slideShow" datasource="#APPLICATION.dataSource#">
SELECT ID, mainImage, content
FROM slide
ORDER BY ID
</cfquery>
<cfset rowsPerPage = 1>
<cfparam name="URL.startRow" default="1" type="numeric">
<cfset totalRows = slideShow.recordCount>
<cfset endRow = min(URL.startRow + rowsPerPage - 1, totalRows)>
<cfset startRowNext = endRow + 1>
<cfset startRowBack = URL.startRow - rowsPerPage>

<cfloop query="slideShow" startRow="#URL.startRow#" endrow="#endRow#">

<cfoutput>

#mainImage#
#content#
</cfoutput>

</cfloop>

I'm not loading it up with layout code or anything.. I am just putting the hard code for this.. I also want to have links to go back to each record, something like this....

<cfset thisPage = 1>
<cfloop from="1" to="#totalRows#" step="#rowsPerPage#" index="pageRow">
<cfset isCurrentPage = (pageRow gte URL.startRow) and (pageRow lte endRow)>
<cfif isCurrentPage>
<cfoutput>#thisPage#</cfoutput>

<cfelse>

<cfoutput>
<a href="#CGI.script_name#?startRow=#pageRow#" class="nav">#thisPage#</a>

</cfoutput>

</cfif>
<cfset thisPage = thisPage + 1>
</cfloop>

I am not sure how easy it is going to be to make it automatically go through the records without reloading the page.. maybe using an ajax control or javascript is what I'm thinking. I know this can be done in flash, but I'm not good enough with flash to use remoting and create it...

Can anyone either point me in the right direction or help me out with a script that might work this type of a small app?

Thank you

[JR__Bob__Dobbs]

Do you have to use Javascript for this?  Are the presentation features built into CF an option?  See CF docs linked below.

"Creating Slide Presentations"

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-6ffc.html

[cfsetNewbie]

It would be PERFECT.. if I was on a cf server 9! *(&^%&$^%#&^^( My hosting company isn't running 9 in a shared environment yet.

Is there a way to make this work in cf8? aside from cfpresentation? That stinks.. it would have worked perfectly! So now I'm forced to make controls? A cfscript maybe with a timer and fade effect? would that work? then how would I write it?

[JR__Bob__Dobbs]

I would look for a JavaScript option for creating your slideshow.

Take a look at: http://jquery.malsup.com/cycle/

[cfsetNewbie]

ok.. bear with me.. I'm trying to wrap my head around this little app you linked too..

I want to get this to read from a database.... so I would write my query, and leave it open to put all the records into this field like so....

<cfquery NAME="slideShow" datasource="#APPLICATION.dataSource#">
SELECT ID, mainImage, content
FROM slide
ORDER BY ID
</cfquery>

<div class="slideshow">
<cfoutput query="slideShow">
<table>

<tr>

<td><img src="#mainImage#" width="200" height="200" /></td>

<td>#content#</td>

<tr>

</table>

</cfoutput>

</div>

Then let the rest be run by the jquery code?

[JR__Bob__Dobbs]

Your project does not have a simple solution. The "simplest" solution to create a slideshow would likely require JavaScript or Flash. I would start by setting the ColdFusion portion aside and figure out how to make a slideshow using JavaScript or Flash, then add the CF backend.

[Jeff Coughlin]

Yup.  You're going to likely have to use a javascript solution or Flash (or something similar).

As Bob suggested, the jQuery Cycle plugin works well for this (I've done some pretty cool slideshows using the cycle plugin over the past couple years) http://jquery.malsup.com/cycle/.

Personally I prefer the jQuery Tools Scrollable plugin (with autoscroll plugin) http://flowplayer.org/tools/scrollable/autoscroll.html.

Either of these solutions can be styled to look pretty much any way you want (you'd be surprised at how flexible the solutions are).  If you're having trouble designing something, ask around for a good css designer.  Same with javascript (if you're new to js and not ready to take the plunge (although admittedly jQuery makes javascript easy)).