PDA

View Full Version : 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/dynamicindex14/fadeinslideshow.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
<!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/showthread.php?t=59923

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

vwphillips
09-19-2011, 07:19 AM
<!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.