View Full Version : Copy Fade Function from one DD script to another

12-15-2010, 10:45 PM
1) Script Title: Fading Scroller & Flexi Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/fadescroll.htm & http://www.dynamicdrive.com/dynamicindex14/flexislide.htm

3) Describe problem: I'm trying to incorporate the fading function that is in the Fading Scroller script into the Flexi Slideshow script so that the images fade the same way the text does. I don't think the code can be taken from one to the other, but there must be a way to script the same function for the Flexi Slideshow.

I love the scrolling test, and the Flexi Slideshow is EASY, but the fade is much classier...

12-16-2010, 12:41 AM
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:


<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
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()

var currentslide=0

function rotateimages(){
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
if (variableslide[currentslide][2]!="")

if (document.layers){
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++

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)

if (ie||dom)
else if (document.layers)


<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.

12-16-2010, 05:53 PM
Thank you so, so, so, so, so much! This is exactly what I need and being that I'm am NOT a programmer or anything close to it - this is gold.