Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Slideshow image fade in/out...

Status
Not open for further replies.

Snapa02

Programmer
Mar 25, 2007
9
US
I was wondering - does anyone know how to make the images in my slideshow fade from one to another? I have the slideshow working nicely - all but that and I am not sure how to write that part in.

Here is the code:

<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (* This notice must stay intact for use
* Visit 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]=['Images/iStock_000003869564Medium.jpg', ' '']
variableslide[1]=['Images/iStock_000019966425Medium.jpg', ' '']
variableslide[2]=['Images/iStock_000009162126Medium.jpg', ' '']
variableslide[3]=['Images/iStock_000020292796Medium.jpg', ' '']
variableslide[4]=['Images/iStock_000018681953Medium.jpg', ' '']

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

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

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=8000

////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[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>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top