PDA

View Full Version : Updown slideshow imagescroller help



lynnkeen
10-25-2005, 01:43 PM
-------------

Script: Up-down Image Slideshow Script
http://www.dynamicdrive.com/dynamicindex14/updownslide.htm

I have been working on a problem for many days that I can't seem to determine the source of the error. We have an image slideshow scroller which has the employee's photo with their name as a hyperlink under the image. The javascript used to create this is the dynamic drive up-down image slideshow script with a minor cold fusion output query which grabs the newest (within 30 days) employees and shows only those.

The scroller worked up until a day or so ago. There were no updates to the server with respect to IE, or SP packets. After a review of the script I see that the process calls for a scrollstart function.

<script language="JavaScript">
<!--
function startscroll(){ return true}
//-->
</script>

I made sure this was in my main page as the code indicates that it looks to the main page to launch.

The include for the page is:

<CFINCLUDE TEMPLATE="/Common/nocache.cfm">

<CFPARAM Name="Counter" Default=0>
<!---get new emp list--->

<CFQUERY NAME="Start_list" DATASOURCE="#CALWebDataSource#">
SELECT EMP_NO, LAST_NAME, FIRST_NAME, NICK_NAME, START_DT, DIRECTORATE, CATEGORY, Location, EMPPHOTO
FROM Employ
WHERE (STATUS = 'Active') AND (START_DT > DATEADD(MM, -1, GETDATE()))
ORDER BY START_DT DESC
</CFQUERY>


<TABLE WIDTH="130" Height="130" BGCOLOR="#AEC3E9" BORDER="0" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#AEC3E9" onLoad="startscroll();">
<TR BGCOLOR="#AEC3E9" HEIGHT="100"><TD VALIGN="Top" ALIGN="Center" TD="#AEC3E9">
<br><FONT SIZE="1" FACE="verdana">
<CFIF Start_list.RecordCount GT 1>
<script language="JavaScript1.2">

/*
Up down slideshow Script- Updated: 99/05/15
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth=130
var scrollerheight=140
var scrollerbgcolor='#AEC3E9'
var pausebetweenimages=3000

//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
<CFOUTPUT QUERY="Start_list">
//check to see if the photo for the emp exists by calling it outfile
<CFSET Outfile="#ServerRootPath#\images\employee\#Emp_No#.jpg">
slideimages[#Counter#]='<a href="/EmployeeInfo/Emp_detail.cfm?emp_no=#emp_no#"><IMG SRC="/images/employee/<CFIF FileExists(outfile) IS "Yes">#Emp_No#.jpg<CFELSE>no_photo.jpg</CFIF>" WIDTH=75 HEIGHT=102 BORDER=0 ALT="Photo of #Nick_name# #Last_name#"><br>#Nick_Name# #Last_name#</A><BR>'
<CFSET Counter=Counter+1>
</CFOUTPUT>

//Since we need at least 3 images always rotating, if the query returns less than 3 records we need to recycle the pics again or the script won't work
<CFIF Start_list.RecordCount LT 3>
<CFOUTPUT QUERY="Start_list">
<CFSET Outfile="#ServerRootPath#\images\employee\#Emp_No#.jpg">
slideimages[#Counter#]="<a href='/EmployeeInfo/Emp_detail.cfm?emp_no=#emp_no#'><IMG SRC='/images/employee/<CFIF FileExists(outfile) IS 'Yes'>#emp_no#.jpg<CFELSE>no_photo.jpg</CFIF>' WIDTH=75 HEIGHT=102 BORDER=0 ALT='Photo of #Nick_name# #Last_name#'><br>#Nick_Name# #Last_name#</A><BR>"
<CFSET Counter=Counter+1>
</CFOUTPUT>
</CFIF>


///////Do not edit pass this line///////////////////////


if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}
}
//This is now loaded in the body tag on main.cfm onLoad="startscroll();"
//window.onload=startscroll

</script>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>
<CFELSEIF Start_list.RecordCount EQ 1>
<!--- This is a dummy startscroll function because it is called everytime main.cfm loads --->
<script language="text/javascript"></script> <BR>
<CFOUTPUT QUERY="Start_list">
<a href="/EmployeeInfo/Emp_detail.cfm?emp_no=#emp_no#"><IMG SRC="/images/employee/#Emp_No#.jpg" WIDTH=75 HEIGHT=102 BORDER=0 ALT="Photo of #Nick_name# #Last_name#"><br>#Nick_Name# #Last_name#</A><BR>
</CFOUTPUT>
<CFELSE>
<!--- This is a dummy startscroll function because it is called everytime main.cfm loads --->
<script language="text/javascript"></script> <BR>
No new CALIBRE employees in last 30 days.
<BR>
</CFIF>
<BR>
</FONT>
</TD>
</TR>
</TABLE>

PROBLEM: When I change the code so that the quote marks are appropriately placed within the CFIF statement (Shown below), the names are all piled on top of each other and don't scroll.

slideimages[#Counter#]="<a href='/EmployeeInfo/Emp_detail.cfm?emp_no=#emp_no#'><IMG SRC='/images/employee/<CFIF FileExists(outfile) IS 'Yes'>#emp_no#.jpg<CFELSE>no_photo.jpg</CFIF>' WIDTH=75 HEIGHT=102 BORDER=0 ALT='Photo of #Nick_name# #Last_name#'><br>#Nick_Name# #Last_name#</A><BR>"

ANY IDEAS?
PLEASE!?! I'm getting desperate!
Lynn

ddadmin
10-26-2005, 06:55 AM
Hi:
Please don't create a new thread for the same question, and simply add to this one, which I've requested additional info: http://www.dynamicdrive.com/forums/showthread.php?t=5351