Results 1 to 4 of 4

Thread: Table background slideshow

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Table background slideshow

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    you can not apply fade to background images only their parent node

    Code:
    
    
    <!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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    Code:
    
    
    <!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>
    Last edited by vwphillips; 11-20-2012 at 10:47 AM. Reason: replaced auto resize with window resize
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Stretch table background?
    By liamallan in forum CSS
    Replies: 1
    Last Post: 08-20-2010, 12:44 PM
  2. Replies: 2
    Last Post: 10-07-2009, 10:35 PM
  3. CSS Table TD Background Transparencies
    By digitaldiva in forum CSS
    Replies: 9
    Last Post: 07-13-2007, 08:48 PM
  4. Background Image Slideshow inside a Table
    By Goodin in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-05-2007, 08:18 PM
  5. background image on 100% table
    By shansta in forum JavaScript
    Replies: 2
    Last Post: 06-21-2007, 03:34 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •