PDA

View Full Version : Table background slideshow



Abyssalwolf
11-19-2012, 12:13 PM
I have got this code and used it to set a background slideshow on a table: http://www.dynamicdrive.com/dynamicindex14/bgslide.htm

This is my website what I have come up with: http://www.darrickwood.bromley.sch.uk/test2.aspx

As you can see it is working fine, but what I would really like to do is make the images fade into each other as they rotate through the slideshow.

Please could someone help make this possible, I am sure its only a line of code or two. (I havent got a clue about javascript.)

Thanks

vwphillips
11-19-2012, 02:07 PM
you can not apply fade to background images only their parent node






<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="shortcut icon" href="http://www.darrickwood.bromley.sch.uk/favicon.ico" />
<title>Darrick Wood School</title>
<link href="http://www.darrickwood.bromley.sch.uk/CSS/styles.css" rel="stylesheet" type="text/css" />
<link href="http://www.darrickwood.bromley.sch.uk/CSS/menu.css" rel="stylesheet" type="text/css" />
<link href="http://www.darrickwood.bromley.sch.uk/CSS/template_layout.css" rel="Stylesheet" type="text/css" />
<link href="http://www.darrickwood.bromley.sch.uk/CSS/template_ofsted_message.css" rel="Stylesheet" type="text/css" />

</head>
<body>
<div align="center" style="position:relative">
<table id="bslide" cellspacing="0px" cellpadding="0px" style="position:relative" >
<tr><td valign="top">

<table width="100%" cellpadding="0px" cellspacing="0px" style="background-image: url('images/brown_transparent_top.png')" height="110px">
<tr><td width="23%"><div id="logocontainerdiv"><div id="logodiv"><img src="http://www.darrickwood.bromley.sch.uk/images/logo.png" alt="" /></div></div></td>
<td width="52%" valign="bottom" align="left" style="padding-bottom: 10px;"><img src="http://www.darrickwood.bromley.sch.uk/Images/title.png" alt="" /></td>
<td width="25%" align="right" valign="bottom" style="padding-right:5px;"><img src="http://www.darrickwood.bromley.sch.uk/images/template/logos/twitter-logo.png" alt="" /></td></tr></table>

<table width="100%" border="0px" cellpadding="0px" cellspacing="0px" height="39px">
<tr><td style="background-image: url('http://www.darrickwood.bromley.sch.uk/images/yellow_bar.png'); padding-left: 190px;">
</td></tr></table>

<table width="100%" border="0px" cellpadding="0px" cellspacing="0px" height="270px">
<tr><td width="28%" style="background-image: url('http://www.darrickwood.bromley.sch.uk/images/brown_transparent_left.png'); background-repeat: repeat;">
<div class="ofsted">
<table>
<tr><td>
<br /><br /><br />
"Darrick Wood is an outstanding school"<br />
"The school provides an inspirational learning environment"<br />
"Achievement and standards are outstanding"<br />
"The excellent pastoral system has resulted in outstanding personal development"<br />
"Students display respectful and exemplary behaviour"<br />
"The school has an outstanding curriculum"<br />
"Teaching and learning are excellent"<br />
</td></tr>
<tr><td style="text-align:right; padding-right: 8px;">Ofsted 2009</td></tr>
</table>
</div>
</td>
<td width="72%" align="right" valign="bottom">

<table><tr>
<td><div style="position: relative; top: 33px; padding-right:5px;"><img src="http://www.darrickwood.bromley.sch.uk/images/ofsted_2009_logo.png" alt="" /></div></td>
<td><div style="position: relative; top: 33px; padding-left: 5px;"><img src="http://www.darrickwood.bromley.sch.uk/images/ofsted_maths_logo.png" alt="" /></div></td>
</tr></table>

</td></tr>
</table>


</td></tr>
</table>
</div>

<script type="text/javascript">
<!--

var zxcSS={

init:function(o){
var id=o.ID,obj=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.hold,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold:ms*4,div =document.createElement('DIV'),img=document.createElement('IMG'),z0=0;
obj.style.zIndex='1';
div.style.position='absolute';
div.style.zIndex='0';
div.style.left=obj.offsetLeft+'px';
div.style.top=obj.offsetTop+'px';
div.style.width=obj.offsetWidth+'px';
div.style.height=obj.offsetHeight+'px';
obj.parentNode.appendChild(div);
img.style.position='absolute';
img.style.left='0px';
img.style.top='0px';
img.style.width='100%';
img.style.height='100%';
for (;z0<ary.length;z0++){
img=img.cloneNode(false);
img.src=ary[z0];
this.opac(img,z0>0?0:100);
img.style.zIndex=z0>0?'0':'1';
div.appendChild(img);
ary[z0]=img;
}
o=zxcSS['zxc'+id]={
obj:obj,
div:div,
ary:ary,
ms:ms,
hold:hold,
cnt:0
}
this.auto(o,hold);
},

auto:function(o,hold){
var oop=this;
o.div.style.left=o.obj.offsetLeft+'px';
o.div.style.top=o.obj.offsetTop+'px';
o.to=setTimeout(
function(){
o.ary[o.cnt].style.zIndex='0';
o.cnt=++o.cnt%o.ary.length;
o.ary[o.cnt].style.zIndex='1';
oop.fade(o,o.ary[o.cnt],0,100,new Date(),o.ms);
}
,hold);
},

fade:function(o,obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
oop.opac(obj,now);
}
if (ms<mS){
o.to=setTimeout(function(){ oop.fade(o,obj,f,t,srt,mS); },10);
}
else {
oop.opac(obj,t);
oop.auto(o,o.hold);
}
},

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


}

zxcSS.init({
ID:'bslide', // the unique ID name of the table. (string)
ImageArray:[ // the SRCs of the images. (array)
"http://www.darrickwood.bromley.sch.uk/images/photo1.jpg",
"http://www.darrickwood.bromley.sch.uk/images/photo2.jpg",
"http://www.darrickwood.bromley.sch.uk/images/photo3.jpg"
],
FadeDuration:1000, //(optional) fade duration in milli seconds. (number, default = 1000)
Hold:2000 //(optional) 'hold' duration in milli seconds. (number, default = FadeDuration*4)
});
//-->
</script>
</body>
</html>



menu removed to allow posting

Abyssalwolf
11-20-2012, 08:55 AM
thanks so much for this very helpful :)

One thing though, when it plays through for the second time, when it suppost to fade into image2 it briefly shows image3 then back quickly to image2. Hard to explain but if you watch closely when its on the second time round you will see what i mean. Is this an easy fix?

One more thing that is really just a question, do i just add another line of code like "Images/photo4.jpg" to add more images, or do I also have to change something else to enable more images?

vwphillips
11-20-2012, 11:40 AM
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="shortcut icon" href="http://www.darrickwood.bromley.sch.uk/favicon.ico" />
<title>Darrick Wood School</title>
<link href="http://www.darrickwood.bromley.sch.uk/CSS/styles.css" rel="stylesheet" type="text/css" />
<link href="http://www.darrickwood.bromley.sch.uk/CSS/menu.css" rel="stylesheet" type="text/css" />
<link href="http://www.darrickwood.bromley.sch.uk/CSS/template_layout.css" rel="Stylesheet" type="text/css" />
<link href="http://www.darrickwood.bromley.sch.uk/CSS/template_ofsted_message.css" rel="Stylesheet" type="text/css" />

</head>
<body>
<div align="center" style="position:relative">
<table id="bslide" cellspacing="0px" cellpadding="0px" style="position:relative" >
<tr><td valign="top">

<table width="100%" cellpadding="0px" cellspacing="0px" style="background-image: url('images/brown_transparent_top.png')" height="110px">
<tr><td width="23%"><div id="logocontainerdiv"><div id="logodiv"><img src="http://www.darrickwood.bromley.sch.uk/images/logo.png" alt="" /></div></div></td>
<td width="52%" valign="bottom" align="left" style="padding-bottom: 10px;"><img src="http://www.darrickwood.bromley.sch.uk/Images/title.png" alt="" /></td>
<td width="25%" align="right" valign="bottom" style="padding-right:5px;"><img src="http://www.darrickwood.bromley.sch.uk/images/template/logos/twitter-logo.png" alt="" /></td></tr></table>

<table width="100%" border="0px" cellpadding="0px" cellspacing="0px" height="39px">
<tr><td style="background-image: url('http://www.darrickwood.bromley.sch.uk/images/yellow_bar.png'); padding-left: 190px;">
</td></tr></table>

<table width="100%" border="0px" cellpadding="0px" cellspacing="0px" height="270px">
<tr><td width="28%" style="background-image: url('http://www.darrickwood.bromley.sch.uk/images/brown_transparent_left.png'); background-repeat: repeat;">
<div class="ofsted">
<table>
<tr><td>
<br /><br /><br />
"Darrick Wood is an outstanding school"<br />
"The school provides an inspirational learning environment"<br />
"Achievement and standards are outstanding"<br />
"The excellent pastoral system has resulted in outstanding personal development"<br />
"Students display respectful and exemplary behaviour"<br />
"The school has an outstanding curriculum"<br />
"Teaching and learning are excellent"<br />
</td></tr>
<tr><td style="text-align:right; padding-right: 8px;">Ofsted 2009</td></tr>
</table>
</div>
</td>
<td width="72%" align="right" valign="bottom">

<table><tr>
<td><div style="position: relative; top: 33px; padding-right:5px;"><img src="http://www.darrickwood.bromley.sch.uk/images/ofsted_2009_logo.png" alt="" /></div></td>
<td><div style="position: relative; top: 33px; padding-left: 5px;"><img src="http://www.darrickwood.bromley.sch.uk/images/ofsted_maths_logo.png" alt="" /></div></td>
</tr></table>

</td></tr>
</table>


</td></tr>
</table>
</div>

<script type="text/javascript">
<!--

var zxcSS={

init:function(o){
var id=o.ID,obj=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.hold,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold:ms*4,div =document.createElement('DIV'),img=document.createElement('IMG'),z0=0;
obj.style.zIndex='1';
div.style.position='absolute';
div.style.zIndex='0';
div.style.overflow='hidden';
div.style.left=obj.offsetLeft+'px';
div.style.top=obj.offsetTop+'px';
div.style.width=obj.offsetWidth+'px';
div.style.height=obj.offsetHeight+'px';
obj.parentNode.appendChild(div);
img.style.position='absolute';
img.style.left='0px';
img.style.top='0px';
img.style.width='100%';
img.style.height='100%';
for (;z0<ary.length;z0++){
img=img.cloneNode(false);
img.src=ary[z0];
this.opac(img,z0>0?0:100);
img.style.left=(z0>0?-3000:0)+'px';
img.style.zIndex=z0>0?'0':'1';
div.appendChild(img);
ary[z0]=img;
}
o=zxcSS['zxc'+id]={
obj:obj,
div:div,
ary:ary,
ms:ms,
hold:hold,
cnt:0
}
this.addevt(window,'resize','resize',o);
this.auto(o,hold);
},

auto:function(o,hold){
var oop=this;
o.to=setTimeout(
function(){
o.lst=o.ary[o.cnt];
o.ary[o.cnt].style.zIndex='0';
o.cnt=++o.cnt%o.ary.length;
o.ary[o.cnt].style.zIndex='1';
o.ary[o.cnt].style.left='0px';
oop.fade(o,o.ary[o.cnt],0,100,new Date(),o.ms);
}
,hold);
},

fade:function(o,obj,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
oop.opac(obj,now);
}
if (ms<mS){
o.to=setTimeout(function(){ oop.fade(o,obj,f,t,srt,mS); },10);
}
else {
oop.opac(obj,t);
oop.opac(o.lst,0);
o.lst.style.left='-3000px';
oop.auto(o,o.hold);
}
},

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


resize:function(e,o){
o.div.style.left=o.obj.offsetLeft+'px';
o.div.style.top=o.obj.offsetTop+'px';
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}

}

zxcSS.init({
ID:'bslide', // the unique ID name of the table. (string)
ImageArray:[ // the SRCs of the images. (array)
"http://www.darrickwood.bromley.sch.uk/images/photo1.jpg",
"http://www.darrickwood.bromley.sch.uk/images/photo2.jpg",
"http://www.darrickwood.bromley.sch.uk/images/photo3.jpg"
],
FadeDuration:1000, //(optional) fade duration in milli seconds. (number, default = 1000)
Hold:2000 //(optional) 'hold' duration in milli seconds. (number, default = FadeDuration*4)
});
//-->
</script>
</body>
</html>