HELP!Need a genius's help adding text to my slideshow

**shaggysc96** · Apr 5, 2007, 08:02

I have come across a slideshow I want to use on my site. I am using coldfusion to write the site, but know very little javascript. I cannot figure out how to get the text to show up and change with each slide. I am posting all of my code. I think I may have to use the same functions to change the text as the pics?, but not sure.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>
<body>
<table>
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
<!-- Begin

//3-way slideshow- by Suzanne Arnold (http://jandr.com/, suzanne@mail.jandr.com)
//Script featured on JavaScript Kit (http://javascriptkit.com)
//Credit must stay intact

var Onerotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
Onecurrent = 0;
var OneLinks = new Array(3);
OneLinks[0] = "#";
OneLinks[1] = "#";
OneLinks[2] = "#";

function Onenext() {
if (document.Oneslideform.Oneslide[Onecurrent+1]) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent+1].value;
document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent;
   }
else Onefirst();
}
function Oneprevious() {
if (Onecurrent-1 >= 0) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent-1].value;
document.Oneslideform.Oneslide.selectedIndex = --Onecurrent;
   }
else Onelast();
}
function Onefirst() {
Onecurrent = 0;
document.images.Oneshow.src = document.Oneslideform.Oneslide[0].value;
document.Oneslideform.Oneslide.selectedIndex = 0;
}
function Onelast() {
Onecurrent = document.Oneslideform.Oneslide.length-1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
}
function Oneap(text) {
document.Oneslideform.Oneslidebutton.value = (text == "Stop Slides") ? "Start Slides" : "Stop Slides";
Onerotate();
}
function Onechange() {
Onecurrent = document.Oneslideform.Oneslide.selectedIndex;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
}
function Onerotate() {
if (document.Oneslideform.Oneslidebutton.value == "Stop Slides") {
Onecurrent = (Onecurrent == document.Oneslideform.Oneslide.length-1) ? 0 : Onecurrent+1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
window.setTimeout("Onerotate()", Onerotate_delay);
}
}
function Onetransport(){
window.location=OneLinks[Onecurrent]
}
//  End -->

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

<CFQUERY DATASOURCE="#DSN#" NAME="getcats">
	SELECT * from category
	ORDER BY category
</CFQUERY>

<Cfoutput query="getcats">

<CFQUERY DATASOURCE="#DSN#" NAME="getsub">
	SELECT * from subcategory
	where catid = '#catid#'
</CFQUERY>

<CFQUERY DATASOURCE="#DSN#" NAME="showitems">
	SELECT * from catproducts1
	where category  = '#category#'
</CFQUERY>

<CFQUERY DATASOURCE="#DSN#" NAME="descrip">
	SELECT * from catproducts1
	where description  = description
</CFQUERY>

<cfif getsub.recordcount gt 0>
<cfif showitems.recordcount gt 0>
<a href="photogallery2.cfm?catid=#catid#&showall=&catname=#urlencodedformat(getsub.catname)#<cfif getsub.recordcount gt 0>&showsub=</cfif>"><font face="Verdana" size="1">#category#</font></a> | 
</cfif>

<Cfelse>
<cfif showitems.recordcount gt 0>
<a href="photogallery2.cfm?category=#trim(urlencodedformat(category))#&showitem="><font face="Verdana" size="1">#category#</font></a> | 
</cfif>
</cfif>

</CFOUTPUT>

</td>
</tr>

<tr>
<td>

<Cfif parameterexists(showall)>
<CFQUERY NAME="GetList" DATASOURCE="#DSN#">	
SELECT * From catproducts1
<cfif parameterexists(url.category)>where catgory = '#url.category#'</cfif>
Order by Sort_order
</CFQUERY>
<CFQUERY DATASOURCE="#DSN#" NAME="descrip">
	SELECT * from catproducts1
	where description  = description
</CFQUERY>

<center>
          <form name="Oneslideform"> <table border="0" cellspacing="0" cellpadding="0" align="center">
  <table>         
					
							    <TR>
    <TD>
            
       
              </TD>
            </TR>
			
	 <cfoutput query="descrip" maxrows=1>
			<TR>
              <TD>
             #description#
              </TD>
            </TR></cfoutput>
			
			
            <TR>
              <TD>
                <DIV align="center"><A href="javascript:Onetransport()"><cfoutput query="GetList" maxrows=1>  <IMG src="backend/admin/catproducts1images/#GetList.photo#" name="Oneshow" border="0"></cfoutput></A></DIV>
              </TD>
            </TR>
           <TR>
                                            <TD>
																						<br> 
                                              <DIV align="center">
                  <INPUT type=button onClick="Oneprevious();" value="<< Back" title="Previous">
                  <INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start Slides" title="Start Slides">
                  <INPUT type=button onClick="Onenext();" value="Next >>" title="Next">
                                              </DIV><br>
              <DIV align="center"><B><FONT color="##FFFFFF">
	   <SELECT name="Oneslide" onChange="Onechange();">
	   <cfoutput query="GetList">                    
					<option value="backend/admin/catproducts1images/#GetList.photo#">#GetList.Title#</option>
					</cfoutput>
				
                                       </SELECT>
                                                </FONT></B></DIV><br>
			  </TD>
            </TR>
          </TABLE>
		   </center>
      </form>


<cfelseif  parameterexists(showitem)>




<CFQUERY DATASOURCE="#DSN#" NAME="GetList">
	SELECT * from catproducts1
		where category  = '#url.category#'
</CFQUERY>
<CFQUERY DATASOURCE="#DSN#" NAME="descrip">
	SELECT * from catproducts1
	
</CFQUERY>



<center>
          <form name="Oneslideform"> <table border="0" cellspacing="0" cellpadding="0" align="center">
  <table>         
					
							    <TR>
    <TD>
            
       
              </TD>
            </TR>
			 <cfoutput query="descrip" maxrows=1>
			<TR>
              <TD>
             #description#
              </TD>
            </TR></cfoutput>
            
			<TR>
              <TD>
                <DIV align="center"><A href="javascript:Onetransport()"><cfoutput query="GetList" maxrows=1>  <IMG src="backend/admin/catproducts1images/#GetList.photo#" name="Oneshow" border="0"></cfoutput></A></DIV>
              </TD>
            </TR>
           <TR>
                                            <TD>
																						<br> 
                                              <DIV align="center">
                  <INPUT type=button onClick="Oneprevious();" value="<< Back" title="Previous">
                  <INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start Slides" title="Start Slides">
                  <INPUT type=button onClick="Onenext();" value="Next >>" title="Next">
                                              </DIV><br>
              <DIV align="center"><B><FONT color="##FFFFFF">
	   <SELECT name="Oneslide" onChange="Onechange();">
	   <cfoutput query="GetList">                    
					<option value="backend/admin/catproducts1images/#GetList.photo#">#GetList.Title#</option>
					</cfoutput>
					
                                       </SELECT>
                                                </FONT></B></DIV><br>
			  </TD>
            </TR>
          </TABLE>
		   </center>
      </form>

	  
	  </CFIF>


</td>

</tr>
</table>
</body></html>

**jtrelfa** · Apr 6, 2007, 06:03

My suggestions:

Start with valid markup - you're using deprecated HTML and a mixture of upper and lowercase and..well...a lot of things aren't right
Make sure your document has a doctype - force the browser into standards compliance mode
give yourself a 'barebones' start - only put the code in there you absolutely need
follow the code you've borrowed and try to figure out what it's doing. Javascript isn't a mystery. It's just another programming language.
Yes...you will need to figure out a way to pass a text parameter to have it display under the image.

There are better image galleries out there (that use valid markup). Take a look a jquery - it's a powerful library to help make your javascripting easier - plus there are image gallery plugins built just for it:

http://docs.jquery.com/Plugins#Image_galleries

The SitePoint Forums have moved.

User Tag List

Thread: HELP!Need a genius's help adding text to my slideshow

Thread Tools

Display

HELP!Need a genius's help adding text to my slideshow

Bookmarks

Bookmarks

Posting Permissions