Creating an image flipchart using cfloop on recordset 1

[buddyholly]

I am trying to set up a cfm page which will display images (one at a time - first, then second superimposed on the first etc..) which have been created by looping through a record set. There would be a defined time between the display of each image. My code is below

Problem

Can not manage to have only one image at a time displayed on the page. I get all the images, dispayed one below the other - appearing one after the other with the delay interval between them.

Perhaps I am tyring to do the impossible ?




<!--- start of delaycomponent--->
<cfset thread= CreateObject(&quot;java&quot;, &quot;java.lang.Thread&quot>

<!--- start of loop --->
<cfloop query=&quot;recordset1&quot;>

<!--- output --->
<table width=&quot;922&quot; border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;2&quot;>
<!--DWLayoutTable-->
<tr>
<td width=&quot;70&quot; height=&quot;382&quot;> </td>
<td width=&quot;570&quot; valign=&quot;top&quot;><img src=&quot;<cfoutput>#Recordset1.normal_image#</cfoutput>&quot;></td>
<td width=&quot;258&quot;> </td>
</tr>
<tr>
<td height=&quot;54&quot;> </td>
<td> </td>
<td> </td>
</tr>
</table>

<!---delay component --->

<cfset delay = 500>
<cfflush>
<cfset thread.sleep(#DELAY#)>

<!---end of loop --->

</cfloop>

 

[csteinhilber]

Yes... the result you're getting is expected.
Think about it... with each CFFLUSH, your code is writing another table (without deleting the one before). So you'd end up with HTML that looked like:

<table>
   :
</table>

<table>
   :
</table>

<table>
   :
</table>

What you'd need to do is use some javascript to switch out the images... something like:

<JAVASCRIPT>
    var currentImage = 0;
    var myTimerID = null
    myImageArray = new Array(
<cfoutput query=&quot;recordset1&quot;>&quot;#Recordset1.normal_image#&quot;,</cfoutput>
    );

    function switchImage() {
       document.myImageDisplay.src = myImageArray[currentImage];
       currentImage++;
    }
</JAVASCRIPT>
    :

<table width=&quot;922&quot; border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;2&quot;>
  <!--DWLayoutTable-->
  <tr> 
    <td width=&quot;70&quot; height=&quot;382&quot;> </td>
    <td width=&quot;570&quot; valign=&quot;top&quot;><img name=&quot;myImageDisplay&quot; src=&quot;blank.gif&quot;></td>
    <td width=&quot;258&quot;> </td>
  </tr>
  <tr>
    <td height=&quot;54&quot;> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
     :

<JAVASCRIPT>
   myTimerID=setTimeout('switchImage()',5000);
</JAVASCRIPT>

or something like that.
Hope it helps,
-Carl

 

[buddyholly]

Many thanks Carl - thats got me on the right track

james