Advanced Search

Results 1 to 5 of 5

Thread: Ultimate Fade in as table background

  1. #1
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Ultimate Fade in as table background

    1) Script Title: :: Ultimate Fade-in slideshow (v2.4)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    if you need the fade effect you will need to nest the slide show and the table in a DIV element

    Code:
    <!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
    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
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
    <!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>
    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/

  5. #5
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you soooo much that is fantastic.

Similar Threads

  1. Ultimate Fade-in slide show image background to the description table?
    By tsimpouri in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 08-03-2010, 06:48 AM
  2. Ultimate Fade-in slideshow (v2.1) background
    By xhanna in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-17-2010, 01:03 AM
  3. Ultimate Fade-in slide show as background image of table cell?
    By jomoweb in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 09-26-2009, 02:14 AM
  4. Ultimate Fade in Slideshow as Background of Div
    By amberturner in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-01-2008, 05:08 AM
  5. JavaScript - Fade Images in Table background
    By conrads in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 04-02-2007, 10: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
  •