PDA

View Full Version : slide show script



tdejarnette
11-09-2004, 04:58 PM
How do I change the background so that the size is fixed. If it is variable the text below on my forum "jumps". I've tried sizing all the pictures the same, but for one person they still apparently change size and cause jumping. I can't figure out why.


<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]=['http://www.xxxxxx.jpg',' ', '<font color="AF4035" size="2" face="Verdana, Arial, Helvetica, sans-serif">Logan<br> (Kelli)</font>']
variableslide[1]=['http://www.xxxxxx.jpg',' ', '<font color="AF4035" size="2" face="Verdana, Arial, Helvetica, sans-serif">Morgan<br> (Sandy)</font>']

variableslide[2]=['http://www.xxxxxxxxx.jpg',' ', '<font color="AF4035" size="2" face="Verdana, Arial, Helvetica, sans-serif"> & Mason<br> (Sandy)</font>']
variableslide[3]=['http://www.xxx.jpg',' ', '<font color="AF4035" size="2" face="Verdana, Arial, Helvetica, sans-serif">Maegan<br> (Sandy)</font>']
variableslide[4]=['http://www.xxxxxxx.jpg',' ', '<font color="AF4035" size="2" face="Verdana, Arial, Helvetica, sans-serif">Chris<br>& Ryan</font>']


//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='130px' //set to width of LARGEST image in your slideshow
var slideheight='120px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#CDAF95'

//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='<center>'
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>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

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>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p