Delay the auto fade-in slideshow for a given time

**Cooper** · 09-17-2011, 05:29 PM

1) Script Title:
Ultimate Fade-in slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

I'd like to make a triple automatic slideshow inside a page, without using flash. Now, your script is perfect, but my idea was to have each of the 3 images start the fade effect when the previous one had finished fading. So the duration would be the same cross-image for pause and for effect, but the slideshow would need to start with a delay for the second image and a double delay for the third image. Also, the images would need to appear right away without fade-in, when the page is loaded.

Something like this (flash), just wait a few seconds for the effect to kick in:
http://www.matefisica.it/slf/SlideSLF.swf

I'm a scripting newbie so I have no idea how to do this.

**vwphillips** · 09-18-2011, 02:50 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.slideshow {
  position:relative;width:200px;height:150px;border:solid red 1px;float:left;
}

/*]]>*/
</style></head>

<body>
 <div id="ss1" class="slideshow" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
 </div>
 <div id="ss2" class="slideshow" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
 </div>
 <div id="ss3" class="slideshow" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
 </div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcLinkedSlideShow(o){
 var ary=o.SlideShowArray,z0=0,z0a,obj,img,nimg,pl=[];
 this.ary=[];
 for (;z0<ary.length;z0++){
  obj=document.getElementById(ary[z0][0]);
  if (obj){
   img=obj.getElementsByTagName('IMG')[0];
   if (img){
    nimg=img.cloneNode(false);
    nimg.style.position='absolute';
    nimg.style.visibility='hidden';
    nimg.style.zIndex='2';
    nimg.style.left='0px';
    nimg.style.top='0px';
    obj.appendChild(nimg);
    ary[z0][0]=[nimg,img,3,typeof(ary[z0][1])=='number'?ary[z0][1]:1000,typeof(ary[z0][2])=='number'?ary[z0][2]:1000];
    ary[z0].push(img.src);
    this.ary.push(ary[z0])
    for (z0a=3;z0a<ary[z0].length;z0a++){
     img=new Image();
     img.src=ary[z0][z0a];
     pl.push(img);
    }
   }
  }
 }
 this.cnt=0;
 this.next();
}

zxcLinkedSlideShow.prototype={

 next:function(){
  var ary=this.ary[this.cnt],cnt=ary[0][2]+1;
  cnt=cnt<ary.length?cnt:3;
  ary[0][0].src=ary[cnt];
  this.animate(ary[0],0,100,new Date(),ary[0][3]);
  ary[0][0].style.visibility='visible';
  ary[0][2]=cnt;
 },

 animate:function(ary,f,t,srt,mS){
  var oop=this,obj=ary[0],ms=new Date().getTime()-srt,opc=(t-f)/mS*ms+f;
  if (isFinite(opc)){
   obj.style.filter='alpha(opacity='+opc+')';
   obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
  }
  else {
   ary[0].style.visibility='hidden';
   ary[1].src=ary[0].src;
   this.cnt=++this.cnt%this.ary.length;

   this.hold=setTimeout(function(){ oop.next(); },ary[4]);
  }
 }


}

new zxcLinkedSlideShow({
 SlideShowArray:[
   [
    'ss1',  // the unique ID name of the parent node.        (string)
    1000,   // the fade effect duration in milli seconds.    (number)
    1000,   // the 'hold' duration in milli seconds.         (number)
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',  // the src of the slide show frame. (string)
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg'
   ],
   [
    'ss2',
    1000,
    1000,
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg'
    ],
   [
    'ss3',
    1000,
    2000,
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg'
    ]
   ]
});
/*]]>*/
</script>

</body>

</html>

**Cooper** · 09-18-2011, 11:11 PM

Thanks, this is great, although it has some differences. If I change the durations, for instance, the fade effects are not following each other immediately. Besides, the first picture immediately fades, while the cycle in my flash file starts with fixed pictures which fade after a while. I'll try to figure it out, but this scripting is too advanced for me right now.

**jscheuer1** · 09-19-2011, 03:25 AM

You might want to check out this thread:

http://www.dynamicdrive.com/forums/s...ad.php?t=59923

If you have questions about it, please ask them here though.

**vwphillips** · 09-19-2011, 07:19 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.slideshow {
  position:relative;width:200px;height:150px;border:solid red 1px;float:left;
}

/*]]>*/
</style></head>

<body>
 <div id="ss1" class="slideshow" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
 </div>
 <div id="ss2" class="slideshow" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
 </div>
 <div id="ss3" class="slideshow" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
 </div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcLinkedSlideShow(o){
 var oop=this,ary=o.SlideShowArray,z0=0,z0a,obj,img,nimg,pl=[],dly=o.InitialDelay;
 this.ary=[];
 for (;z0<ary.length;z0++){
  obj=document.getElementById(ary[z0][0]);
  if (obj){
   img=obj.getElementsByTagName('IMG')[0];
   if (img){
    nimg=img.cloneNode(false);
    nimg.style.position='absolute';
    nimg.style.visibility='hidden';
    nimg.style.zIndex='2';
    nimg.style.left='0px';
    nimg.style.top='0px';
    obj.appendChild(nimg);
    ary[z0][0]=[nimg,img,3,typeof(ary[z0][1])=='number'?ary[z0][1]:1000,typeof(ary[z0][2])=='number'?ary[z0][2]:1000];
    ary[z0].push(img.src);
    this.ary.push(ary[z0])
    for (z0a=3;z0a<ary[z0].length;z0a++){
     img=new Image();
     img.src=ary[z0][z0a];
     pl.push(img);
    }
   }
  }
 }
 this.cnt=0;
 setTimeout( function(){ oop.next(); },typeof(dly)=='number'?dly:10);
}

zxcLinkedSlideShow.prototype={

 next:function(){
  var ary=this.ary[this.cnt],cnt=ary[0][2]+1;
  cnt=cnt<ary.length?cnt:3;
  ary[0][0].src=ary[cnt];
  this.animate(ary[0],0,100,new Date(),ary[0][3]);
  ary[0][0].style.visibility='visible';
  ary[0][2]=cnt;
 },

 animate:function(ary,f,t,srt,mS){
  var oop=this,obj=ary[0],ms=new Date().getTime()-srt,opc=(t-f)/mS*ms+f;
  if (isFinite(opc)){
   obj.style.filter='alpha(opacity='+opc+')';
   obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
  }
  else {
   ary[0].style.visibility='hidden';
   ary[1].src=ary[0].src;
   this.cnt=++this.cnt%this.ary.length;

   this.hold=setTimeout(function(){ oop.next(); },ary[4]);
  }
 }


}


new zxcLinkedSlideShow({
 SlideShowArray:[
   [
    'ss1',  // the unique ID name of the parent node.        (string)
    1000,   // the fade effect duration in milli seconds.    (number)
    10,   // the 'hold' duration in milli seconds.         (number)
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',  // the src of the slide show frame. (string)
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg'
   ],
   [
    'ss2',
    1000,
    10,
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg'
    ],
   [
    'ss3',
    1000,
    2000,
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg',
    'http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg'
    ]
   ],
   InitialDelay:2000  // the initial delay in milli seconds.    (number)
});
/*]]>*/
</script>

</body>

</html>

**Cooper** · 09-19-2011, 10:43 PM

Thanks, both of your scripts work perfectly. I ended up using jscheuer1 method because I found the script easier to understand for a newbie and I was able to change some things.

Again, thanks guys.

Thread: Delay the auto fade-in slideshow for a given time

Thread Tools

Search Thread

Delay the auto fade-in slideshow for a given time

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions