Took a look at your page and downloaded it to get a closer look. I had no trouble adding captions to the other images. I didn't like the way the page was jumping around so I made some other modifications and added the font and color I think you want. I didn't know what captions you wanted so I put in Blah blah and Yada Yada. I'm going to paste in the changed part. Use a text editor to paste it into a copy of your page. Keep a backup of your page handy! Here it is:
Code:
<STYLE type=text/css>BODY {
BACKGROUND: #cccccc; MARGIN-LEFT: 25px
}
H1 {
FONT-FAMILY: times new roman
}
P {
COLOR: navy; FONT-FAMILY: arial
}
#slidedom {font-family:arial;color:navy;}
#slidensmain {font-family:arial;color:navy;}
</STYLE>
<!--
<body background="snowbkgrnd.gif">
-->
<META content="MSHTML 6.00.2900.2604" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<H1>PHOTOS</H1>
<P><B>Game 4 vs. Mountain Ice</B></P>
<SCRIPT language=JavaScript1.2>
/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var variableslide=new Array()
//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=['g3golletz.jpg', '', 'Yada Yada']
variableslide[1]=['g3golletz2.jpg', '', 'Taking a shot.']
variableslide[2]=['g3buntmann.jpg', '', 'Putting it in the net!!']
variableslide[3]=['g3yorchak.jpg', '', 'Blah blah']
variableslide[4]=['g3mitton.jpg', '', 'Leave me alone!']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='423px' //set to width of LARGEST image in your slideshow
var slideheight='260px' //set to height of LARGEST image in your slideshow, plus any text description
var slidebgcolor='#cccccc'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<table align=center style=border-collapse:collapse;cell-spacing:0;cell-padding:0><tr><td height='+slideheight+' align=center valign=middle>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
if (variableslide[currentslide][2]!="")
contentcontainer+='<tr><td id=slidedom height=1em align=center valign=bottom>'+variableslide[currentslide][2]
contentcontainer+='</td></tr></table>'
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</SCRIPT>
</CENTER><br><!--
<p>Game photos coming soon!</p><br />
You should be able to find the starting and ending points easily enough.
DD Flex-Image Slideshow
Reply With Quote
Bookmarks