PDA

View Full Version : Ultimate Fade in as table background



Richard_User
10-25-2013, 05:02 AM
1) Script Title: :: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I love this script thanks you.

I'd like to set the slideshow as the background to a table. Then I want to insert another table on top so I can add some floating elements (title, drop down menu etc) to sit above the rotating images. I don't need any of the captions or pause on rollover etc, just the slideshow.

Using your code can setup the slideshow however I cant work out how to specify it to sit in the background of a table cell??

Could someone help with the code for this.

Thanks

vwphillips
10-25-2013, 10:33 AM
if you need the fade effect you will need to nest the slide show and the table in a DIV element


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--

.tablediv {
position:relative;width:350px;height:263px;
}

.tablediv TABLE {
position:relative;z-Index:10;width:350px;height:263px;
}

.ss {
position:absolute;left:0px;top:0px;width:350px;height:263px;
}

.ss IMG{
width:350px;height:263px;
}

-->
</style></head>

<body>

<div class="tablediv" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');" >

<div id="i1" class="ss" >
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" ></a>
</div>

<table border="2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

</div>


<script type="text/javascript">
<!--
// Simple Fade Slide Show. (14-August-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcSFSlideShow={

Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
this.rotate(o,o.n+ud);
}
},

GoTo:function(id,n){
var o=this['zxc'+id];
if (o&&o.ary[n]){
this.rotate(o,n);
}
},

Auto:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},

Pause:function(id,ms){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},

init:function(o){
var id=o.ParentID,iary=o.ImageArray,ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
if (p&&iary instanceof Array){
var img=p.getElementsByTagName('IMG')[0],c=document.createElement('IMG'),ms=typeof(ms)=='number'&&ms>0?ms:1000,a,ary=[],z0=0;
if (!img){
img=c.cloneNode(false);
img.src=iary[0][0];
img.width=p.offsetWidth;
img.height=p.offsetHeight;
a=document.createElement('A');
iary[0][1]?a.href=iary[0][1]:null;
iary[0][2]?img.title=iary[0][2]:null;
a.appendChild(img);
p.appendChild(a);
}
c.style.position='absolute';
c.style.zIndex='201';
c.style.left=c.style.top='-3000px';
p.appendChild(c);
for (;z0<iary.length;z0++){
iary[z0][5]=new Image();
iary[z0][5].src=iary[z0][0];
}
o.id=id;
o.img=img;
o.a=p.getElementsByTagName('A')[0];
o.ary=iary;
o.c=[c];
o.ms=ms;
o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
o.n=0;
this['zxc'+id]=o;
typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
}
},


rotate:function(o,auto){
clearTimeout(o.to);
var n=o.n,p=this.pos(o.img),lgth=o.ary.length-1;
o.auto=auto===true;
n=o.auto?n+1:auto;
n=n>lgth?0:n<0?lgth:n;
if (o.ary[n][5].width>40){
typeof(o.OnFade)=='function'?o.OnFade(n):null;
o.c[0].src=o.ary[n][5].src;
o.c[0].style.width=o.img.width+'px';
o.c[0].style.height=o.img.height+'px';
this.animate(o,o.c,0,100,new Date(),o.ms);
o.c[0].style.left=0+'px';
o.c[0].style.top=0+'px';
o.a?o.a.removeAttribute('href'):null;
o.a&&o.ary[n][1]?o.a.href=o.ary[n][1]:null;
o.img.removeAttribute('title');
o.ary[n][2]?o.img.title=o.ary[n][2]:null;
o.n=n;
}
else {
o.ary.splice(n,1);
o.auto?this.Auto(o.id):null;
}
},


animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
n=Math.max(n,0);
oop.opac(a[0],n);
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
o.img.src=a[0].src;
a[0].style.top='-3000px';
typeof(o.OnComplete)=='function'?o.OnComplete(n):null;
o.auto?oop.Auto(o.id,o.hold):null;
}
},

opac:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},

pos:function(o){
var rtn=[0,0];
while(o){
rtn[0]+=o.offsetLeft;
rtn[1]+=o.offsetTop;
o=o.offsetParent;
}
return rtn;
}


}

zxcSFSlideShow.init({
ParentID:'i1', // the unique ID name of the image. (string)
ImageArray:[ // an array of arrays defining the images. (array)
// field 0 = the image scr.
// field 1 = (optional) the image link href.
// field 2 = (optional) the image title.
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Egypt 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Egypt 2'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Egypt 3']
],
FadeDuration:500, //(optional) the fade duration in milli sceconds. (number, default = 1000)
AutoHold:2000, //(optional) the auto rotation hold delay in milli sceconds. (number, default = FadeDuration*4)
AutoStart:1000, //(optional) the auto rotation start delay in milli sceconds. (number, default = FadeDuration*4)
OnFade:function(n){ //(optional) a function to call when starting fade of new image. (function, default = no function)
// n =the current imasge index.
},
OnComplete:function(n){ //(optional) a function to call when fade in is complete. (function, default = no function)
// n =the current imasge index.
}
});

//-->
</script>
</body>

</html>

if you did not need fade you could swap the table background image or possible use CSS3 for the fade in some browsers

Richard_User
10-29-2013, 01:51 AM
Thanks this looks great but it looks like this makes the whole table fade in and out.

I was hoping to just have the background images fade in and out while the table cells remained visible. I want to put a graphic and drop down menu over the images and it would need to stay visible while the images changed? Is this possible?

vwphillips
10-29-2013, 11:13 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--

.tablediv {
position:relative;width:350px;height:263px;
}

.tablediv TABLE {
position:absolute;z-Index:200;left:0px;top:0px;width:350px;height:263px
}

.ss {
position:absolute;left:0px;top:0px;width:350px;height:263px;
}

.ss IMG{
width:350px;height:263px;
}

-->
</style></head>

<body>

<div class="tablediv" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');" >

<div id="i1" class="ss" >
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" ></a>
</div>

<table border="2" >
<tr>
<td style="background-Color:red;" >Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

</div>


<script type="text/javascript">
<!--
// Simple Fade Slide Show. (14-August-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcSFSlideShow={

Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
this.rotate(o,o.n+ud);
}
},

GoTo:function(id,n){
var o=this['zxc'+id];
if (o&&o.ary[n]){
this.rotate(o,n);
}
},

Auto:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},

Pause:function(id,ms){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},

init:function(o){
var id=o.ParentID,iary=o.ImageArray,ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
if (p&&iary instanceof Array){
var img=p.getElementsByTagName('IMG')[0],c=document.createElement('IMG'),ms=typeof(ms)=='number'&&ms>0?ms:1000,a,ary=[],z0=0;
if (!img){
img=c.cloneNode(false);
img.src=iary[0][0];
img.width=p.offsetWidth;
img.height=p.offsetHeight;
a=document.createElement('A');
iary[0][1]?a.href=iary[0][1]:null;
iary[0][2]?img.title=iary[0][2]:null;
a.appendChild(img);
p.appendChild(a);
}
c.style.position='absolute';
c.style.zIndex='1';
c.style.left=c.style.top='-3000px';
p.appendChild(c);
for (;z0<iary.length;z0++){
iary[z0][5]=new Image();
iary[z0][5].src=iary[z0][0];
}
o.id=id;
o.img=img;
o.a=p.getElementsByTagName('A')[0];
o.ary=iary;
o.c=[c];
o.ms=ms;
o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
o.n=0;
this['zxc'+id]=o;
typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
}
},


rotate:function(o,auto){
clearTimeout(o.to);
var n=o.n,p=this.pos(o.img),lgth=o.ary.length-1;
o.auto=auto===true;
n=o.auto?n+1:auto;
n=n>lgth?0:n<0?lgth:n;
if (o.ary[n][5].width>40){
typeof(o.OnFade)=='function'?o.OnFade(n):null;
o.c[0].src=o.ary[n][5].src;
o.c[0].style.width=o.img.width+'px';
o.c[0].style.height=o.img.height+'px';
this.animate(o,o.c,0,100,new Date(),o.ms);
o.c[0].style.left=0+'px';
o.c[0].style.top=0+'px';
o.a?o.a.removeAttribute('href'):null;
o.a&&o.ary[n][1]?o.a.href=o.ary[n][1]:null;
o.img.removeAttribute('title');
o.ary[n][2]?o.img.title=o.ary[n][2]:null;
o.n=n;
}
else {
o.ary.splice(n,1);
o.auto?this.Auto(o.id):null;
}
},


animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
n=Math.max(n,0);
oop.opac(a[0],n);
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
o.img.src=a[0].src;
a[0].style.top='-3000px';
typeof(o.OnComplete)=='function'?o.OnComplete(n):null;
o.auto?oop.Auto(o.id,o.hold):null;
}
},

opac:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},

pos:function(o){
var rtn=[0,0];
while(o){
rtn[0]+=o.offsetLeft;
rtn[1]+=o.offsetTop;
o=o.offsetParent;
}
return rtn;
}


}

zxcSFSlideShow.init({
ParentID:'i1', // the unique ID name of the image. (string)
ImageArray:[ // an array of arrays defining the images. (array)
// field 0 = the image scr.
// field 1 = (optional) the image link href.
// field 2 = (optional) the image title.
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/','Egypt 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/','Egypt 2'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','http://www.vicsjavascripts.org.uk/','Egypt 3']
],
FadeDuration:500, //(optional) the fade duration in milli sceconds. (number, default = 1000)
AutoHold:2000, //(optional) the auto rotation hold delay in milli sceconds. (number, default = FadeDuration*4)
AutoStart:1000, //(optional) the auto rotation start delay in milli sceconds. (number, default = FadeDuration*4)
OnFade:function(n){ //(optional) a function to call when starting fade of new image. (function, default = no function)
// n =the current imasge index.
},
OnComplete:function(n){ //(optional) a function to call when fade in is complete. (function, default = no function)
// n =the current imasge index.
}
});

//-->
</script>
</body>

</html>

Richard_User
10-29-2013, 11:28 PM
Thank you soooo much that is fantastic.