Flexi Slideshow is an old script, so you might be better off using something like Featured Content Slider instead, which does everything the former does, but with the fade effect as well. Having said that, it's relatively simple to add a fade effect to Flexi Slideshow using jQuery. Just use the below version of the script:
Code:
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<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]=['ball.gif', '', '']
variableslide[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
variableslide[2]=['cake.gif', '', '']
//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='#F3F3F3'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
var fadedelay=200
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
slidedelay+=fadedelay
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)
jQuery(crossrotateobj).hide().html(contentcontainer).fadeIn(fadedelay, function(){
if (document.all && this.style && this.style.removeAttribute)
this.style.removeAttribute('filter') //fix IE clearType problem
})
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>
You can customize the "fadedelay" variable to dictate the duration of the fade.
Copy Fade Function from one DD script to another
Reply With Quote
Bookmarks