SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Apr 5, 2007, 08:02 #1
- Join Date
- Nov 2006
- Posts
- 62
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
HELP!Need a genius's help adding text to my slideshow
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>
Last edited by shaggysc96; Apr 6, 2007 at 12:32.
-
Apr 6, 2007, 06:03 #2
- Join Date
- Oct 2004
- Location
- Troy, Mi
- Posts
- 231
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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_galleriesvar me = null;
Bookmarks