Putting SlideShow in a table

**kenrogers** · 09-05-2013, 04:46 PM

1) Script Title: Continuous Reel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lslideshow.htm

3) Describe problem: I'm trying to replace the picture on the website
http://banderalibrary.org
with a slideshow of pictures.

The picture is embedded in a table. When I replace the static picture with
<div id="myreel"></div>
in the table it fouls up the page by putting the slide show ahead of the other items
that should be to the left and right as it was for the original picture. Other than
this placement foul-up the SS works fine.

Please help.

Ken Rogers

**jscheuer1** · 09-05-2013, 06:18 PM

Try replacing:

Code:

      <p align="center"><img style="width: 337px; height: 306px;" 
        src="/pics/Cindy Painting.JPG" alt="child picture" width="481" height="457" />
      </p>

with:

Code:

<p align="center">
<div id="myreel" style="text-align: left; width: 337px; height: 306px; margin: 0 auto;"></div>
</p>

This assumes that the images you want to show are that width and height. The width and/or height might need to be increased to allow for the slideshow's border and controls. The width and height should be at least as large as used in the dimensions: property of the on page call to the script.

Also, the page is in quirks mode, so things might get a little screwy with the slideshow in some browsers. The script assumes a standards mode web page, but might work out on a quirks mode one. Converting it to a standards mode page might need to be done and would mean having to change other things on the page to get them to render as desired cross browser.

Once you have it setup, if there are problems, give us a link to it so we can try to fix them. If you don't want it to be the main page until it's all fixed up, set it up as a copy of that - say index_new.htm, and put it in the same folder.

**vwphillips** · 09-06-2013, 10:32 AM

this overlays the image over the original and need no changes to the HTML

Code:

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

<html>

<head>
  <title></title>
</head>

<body>


<table border="1">
  <tr>
    <td>
     <input type="button" name="" value="Next" onmouseup="zxcSFSlideShow.Next('i1',1);">
     <input type="button" name="" value="Back" onmouseup="zxcSFSlideShow.Next('i1',-1);"><br>
     <input type="button" name="" value="Auto" onmouseup="zxcSFSlideShow.Auto('i1');">
     <input type="button" name="" value="Pause" onmouseup="zxcSFSlideShow.Pause('i1');">
    </td>
    <td>
     <a href="" >
      <img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');">
     </a>
    </td>
    <td>
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSFSlideShow.GoTo('i1',0);">
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSFSlideShow.GoTo('i1',1);"><br>
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSFSlideShow.GoTo('i1',2);">
    </td>
  </tr>
</table>

<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.ImageID,ary=o.ImageArray,ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,img=document.getElementById(id);
  if (img&&ary instanceof Array){
   var a=img.parentNode,c=document.createElement('IMG'),ms=typeof(ms)=='number'&&ms>0?ms:1000,z0=0;
   c.style.position='absolute';
   c.style.zIndex='201';
   c.style.left=c.style.top='-3000px';
   document.body.appendChild(c);
   for (;z0<ary.length;z0++){
    ary[z0][5]=new Image();
    ary[z0][5].src=ary[z0][0];
   }
   o.id=id;
   o.img=img;
   o.a=a.nodeName.toUpperCase()=='A'?a:null;
   o.ary=ary;
   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=p[0]+'px';
   o.c[0].style.top=p[1]+'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({
 ImageID:'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.
//  zxcSFSlideShow.GoTo('i2',n);
//  zxcSFSlideShow.GoTo('i3',n);
 },
 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>

**vwphillips** · 09-06-2013, 12:15 PM

for a slider

Code:

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

<html>

<head>
  <title></title>
</head>

<body>


<table border="1">
  <tr>
    <td>
     <input type="button" name="" value="Next" onmouseup="zxcSFSlideShow.Next('i1',1);">
     <input type="button" name="" value="Back" onmouseup="zxcSFSlideShow.Next('i1',-1);"><br>
     <input type="button" name="" value="Auto" onmouseup="zxcSFSlideShow.Auto('i1');">
     <input type="button" name="" value="Pause" onmouseup="zxcSFSlideShow.Pause('i1');">
    </td>
    <td>
     <a href="" >
      <img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');">
     </a>
    </td>
    <td>
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSFSlideShow.GoTo('i2',0);">
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSFSlideShow.GoTo('i2',1);"><br>
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSFSlideShow.GoTo('i2',2);">
    </td>
  </tr>
  <tr>
    <td>
     <input type="button" name="" value="Next" onmouseup="zxcSFSlideShow.Next('i2',1);">
     <input type="button" name="" value="Back" onmouseup="zxcSFSlideShow.Next('i2',-1);"><br>
     <input type="button" name="" value="Auto" onmouseup="zxcSFSlideShow.Auto('i2');">
     <input type="button" name="" value="Pause" onmouseup="zxcSFSlideShow.Pause('i2');">
    </td>
    <td>
     <a href="" >
      <img id="i2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i2');" onmouseout="zxcSFSlideShow.Auto('i2');">
     </a>
    </td>
    <td>
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSFSlideShow.GoTo('i3',0);">
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSFSlideShow.GoTo('i3',1);"><br>
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSFSlideShow.GoTo('i3',2);">
    </td>
  </tr>
  <tr>
    <td>
     <input type="button" name="" value="Next" onmouseup="zxcSFSlideShow.Next('i3',1);">
     <input type="button" name="" value="Back" onmouseup="zxcSFSlideShow.Next('i3',-1);"><br>
     <input type="button" name="" value="Auto" onmouseup="zxcSFSlideShow.Auto('i3');">
     <input type="button" name="" value="Pause" onmouseup="zxcSFSlideShow.Pause('i3');">
    </td>
    <td>
     <a href="" >
      <img id="i3" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="image" border="0" onmouseover="zxcSFSlideShow.Pause('i3');" onmouseout="zxcSFSlideShow.Auto('i3');">
     </a>
    </td>
    <td>
     <input type="button" name="" value="GoTo 0" onmouseup="zxcSFSlideShow.GoTo('i3',0);">
     <input type="button" name="" value="GoTo 1" onmouseup="zxcSFSlideShow.GoTo('i3',1);"><br>
     <input type="button" name="" value="GoTo 2" onmouseup="zxcSFSlideShow.GoTo('i3',2);">
    </td>
  </tr>
</table>

<script type="text/javascript">
<!--
// Simple Slide Show. (06-September-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){
   o.ud=ud;
   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.ImageID,ary=o.ImageArray,m=o.Mode,ud=o.Direction,ms=o.AnimateDuration,hold=o.AutoHold,srt=o.AutoStart,img=document.getElementById(id);
  if (img&&ary instanceof Array){
   var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'F',m=m=='H'?['left','top','width']:m=='V'?['top','left','height']:[''],a=img.parentNode,ms=typeof(ms)=='number'&&ms>0?ms:1000,c=document.createElement('IMG'),d=document.createElement('DIV'),z0=0;
   d.style.position=c.style.position='absolute';
   d.style.zIndex='201';
   d.style.overflow='hidden';
   d.style.left=d.style.top=c.style.left=c.style.top='-3000px'
   d.appendChild(c);
   document.body.appendChild(m[1]?d:c);
   for (;z0<ary.length;z0++){
    ary[z0][5]=new Image();
    ary[z0][5].src=ary[z0][0];
   }
   o.id=id;
   o.img=img;
   o.a=a.nodeName.toUpperCase()=='A'?a:null;
   o.ary=ary;
   o.m=m;
   o.c=[c,m[0]];
   o.d=d;
   o.ud=typeof(ud)=='number'&&ud<0?-1:1;
   o.ms=ms;
   o.s=o.OnAnimate;
   o.f=o.OnComplete;
   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+o.ud:auto;
  n=n>lgth?0:n<0?lgth:n;
  if (o.ary[n][5].width>40){
   typeof(o.s)=='function'?o.s(n):null;
   o.c[0].src=o.ary[n][5].src;
   o.d.style.width=o.c[0].style.width=o.img.width+'px';
   o.d.style.height=o.c[0].style.height=o.img.height+'px';
   if (o.m[0]){
    o.c[0].style[o.m[0]]=o.img[o.m[2]]*o.ud+'px';
    o.c[0].style[o.m[1]]='0px';
   }
   this.animate(o,o.c,o.m[0]?o.img[o.m[2]]*o.ud:0,o.m[0]?0:100,new Date(),o.ms);
   if (!o.m[0]){
    o.c[0].style.left=p[0]+'px';
    o.c[0].style.top=p[1]+'px';
   }
   o.d.style.left=p[0]+'px';
   o.d.style.top=p[1]+'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.floor(n);
   a[1]?a[0].style[a[1]]=n+'px':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[1]?o.d:a[0]).style.top='-3000px';
   typeof(o.f)=='function'?o.f(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({
 ImageID:'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']
 ],
 Mode:'Fade',         //(optional) the mode, 'Fade', 'Horizontal' or 'Vertical'.                  (string, default = 'Fade')
 AnimateDuration:500, //(optional) the animation duration in milli sceconds.                      (number, default = 1000)
 Direction:-1,        //(optional) the initial auto rotation direction, >0 = forward, < o = back. (number, default = 1 = forward)
 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)
 OnAnimate:function(n){  //(optional) a function to call when starting fade of new image.         (function, default = no function)
  // n =the current imasge index.
//  zxcSFSlideShow.GoTo('i2',n);
//  zxcSFSlideShow.GoTo('i3',n);
 },
 OnComplete:function(n){ //(optional) a function to call when fade in is complete.                (function, default = no function)
  // n =the current imasge index.
 }
});

zxcSFSlideShow.init({
 ImageID:'i2',
 ImageArray:[
  // 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']
 ],
 Mode:'Horizontal',
 AutoStart:1000
});

zxcSFSlideShow.init({
 ImageID:'i3',
 ImageArray:[
  // 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']
 ],
 Mode:'Vertical',
 AutoStart:1000
});

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

</html>

**kenrogers** · 09-06-2013, 02:44 PM

Inserting as you suggest fixes it!!!! Now just have to juggle the sizes and make it
look nice and it's all done.

THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU!

What a great site!

Best Ken Rogers

**kenrogers** · 09-06-2013, 02:59 PM

Thanks very much for your suggestions. I've copied them to my computer
and will try them. It looks like the suggestion of John Scheuer solves my problem
for now.

Thank you again for your time and attention.

Best, Ken Rogers

**kenrogers** · 09-06-2013, 03:39 PM

Hi John:

An oops; error window with this message:

Error: DIV with ID "myreel" not found on page

This came up when I loaded the index with your changes. They
had worked fine on my home computer in my editor (PsPad) and
on being activated in IE9 and FF23 so I thought it was done.

The link to the changed index is:

http://banderalibrary.org/index_ss.htm

**jscheuer1** · 09-06-2013, 03:54 PM

The "changed" index (index_ss.htm) hasn't been changed. It's still showing:

Code:

      <p align="center"><img style="width: 337px; height: 306px;" 
        src="/pics/Cindy Painting.JPG" alt="child picture" width="481" height="457" />
      </p>