MultiFrame Image Slideshow Stop-Start

**Paulus** · 01-27-2011, 09:32 PM

Hello there,

I've installed the very hand MultiFrame Image Slideshow in my site.
I just need to add 'Stop' 'Start' buttons or even on mouseover-out controls.
I looked for previous threads and posts but coouldn't find what I needed.
Can anyone point me to past solution or workaround?

Many thanks,

Paul Nonnis, Melbourne, Australia.

**vwphillips** · 01-28-2011, 10:26 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#slideshow {

}

#slideshow IMG {
 width:100px;height:75px;margin-Left:10px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Multiple Image Slide Show. (28-January-2011)

// A slide show displaying a specified number of images.
// The image file names and optional link HREFs are defined in an array.
// Options allow each image scr to be changed sequentially or randomly at a specified speed.
// The image opacity may be used to identify when an image src has been changed.
// When all images have been changed the srcs can be held for a specified period.

function zxcMultiImageSlideShow(o){
 var obj=document.getElementById(o.ID),ary=o.ImageArray,a,z0=0,nu,z1=0;
 while (obj.firstChild){
  obj.removeChild(obj.firstChild);
 }
 this.srcary=typeof(ary)=='object'&&ary.constructor==Array?ary:[];
 this.nu=typeof(o.Images)=='number'?o.Images:this.srcary.length;
 this.imgnus=[];
 for (;z0<this.nu;z0++){
  this.imgnus[z0]=z0;
 }
 this.random=typeof(o.RandomFrames)=='boolean'?o.RandomFrames:false;
 if (this.random){
  this.shuffle(this.imgnus);
 }
 if (typeof(o.RandomImages)=='boolean'&&o.RandomImages){
  this.shuffle(this.srcary);
 }
 this.opac=typeof(o.Opacity)=='number'?o.Opacity:100;
 this.imgs=[];
 for (;z1<this.nu;z1++){
  a=document.createElement('A');
  if (this.srcary[z1][1]){
   a.href=this.srcary[z1][1];
  }
  nu=this.imgnus[z1];
  this.imgs[nu]=document.createElement('IMG');
  this.imgs[nu].src=this.srcary[z1][0];
  a.appendChild(this.imgs[nu]);
  obj.appendChild(a);
 }
 this.imgcnt=this.nu-1;
 this.preload();
 this.framecnt=0;
 this.ms=o.Speed||1000;
 this.hold=o.Hold||this.ms;
 this.nextset();
}

zxcMultiImageSlideShow.prototype={

  Pause:function(){
   clearTimeout(this.to);
  },

  Auto:function(){
   this.rotate();
  },

 rotate:function(){
  clearTimeout(this.to);
  var oop=this,nu=this.imgnus[this.framecnt];
  if (this.framecnt==this.nu){
   this.preload();
   this.to=setTimeout(function(){ oop.nextset(); },this.hold);
  }
  else {
   if (this.srcary[this.imgcnt][2].width>40){
    this.imgs[nu].src=this.srcary[this.imgcnt][2].src;
    if (this.srcary[this.imgcnt][1]){
     this.imgs[nu].parentNode.href=this.srcary[this.imgcnt][1];
    }
    this.opacity(this.imgs[nu],100);
   }
   this.imgcnt=++this.imgcnt%this.srcary.length;
   this.framecnt++;
   this.to=setTimeout(function(){ oop.rotate(); },this.ms);
  }
 },

 nextset:function(){
  var oop=this;
  this.framecnt=0;
  if (this.random){
   this.shuffle(this.imgnus);
  }
  for (var z0=0;z0<this.imgs.length;z0++){
   this.imgs[z0].parentNode.removeAttribute('href');
   this.opacity(this.imgs[z0],this.opac);
  }
  this.to=setTimeout(function(){ oop.rotate(); },this.ms);
 },

 preload:function(){
  for (var nu,z0=this.imgcnt;z0<this.imgcnt+this.nu;z0++){
   nu=z0%this.srcary.length;
   if (this.srcary[nu]&&!this.srcary[nu][2]){
    this.srcary[nu][2]=new Image();
    this.srcary[nu][2].src=this.srcary[nu][0];
   }
  }
 },

 shuffle:function(ary){
  var lst=ary[0],r,t,z0;
  while (ary[0]==lst){
   for (z0=0;z0<ary.length;z0++){
    r=Math.floor(Math.random()*ary.length);
    t=ary[z0];
    ary[z0]=ary[r];
    ary[r]=t;
   }
  }
 },

 opacity:function(obj,opc){
  if (opc<0||opc>100) return;
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }


}



/*]]>*/
</script></head>

<body>
<div id="slideshow" onmouseover="S.Pause();"  onmouseout="S.Auto();"> tom
</div>

<input type="button" name="" value="Stop" onmouseup="S.Pause();" />
<input type="button" name="" value="Start" onmouseup="S.Auto();" />

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var S=new zxcMultiImageSlideShow({
 ID:'slideshow',                                          // the unique ID name of the parent node.                           (string)
 ImageArray:[                                             // an array defining the file names and link HREF of the images.    (array)
// field 0 = the image file name. (string)
// field 1 = (optional) the image link HREF. (string, default = no link)
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','#'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg']
 ],
 Images:3,                                                //(optional) the number of images to display.                                 (digits, default = all images)
 Speed:500,                                               //(optional) the speed of changing the images in milliseconds.      (digits, default = 1000)
 Hold:2000,                                               //(optional) the duration a set of images are held in milliseconds. (digits, default = Speed)
 RandomImages:true,                                       //(optional) the image array is shuffled.                           (boolean, default = false)
 RandomFrames:true,                                       //(optional) the sequence the image changes is shuffled.            (boolean, default = false)
 Opacity:50                                               //(optional) the minimum opacity of the images.                     (digits, default = 100 = no opacity)
});

/*]]>*/
</script></body>

</html>

**Paulus** · 01-29-2011, 10:45 AM

Hi Vic,
Thank you for profferings one of your scripts.
Your script is fine but for the image link HREF '#' which creates a blue border around the slideshow images.
I tried variour things for an hour but cannot remove the link.
Any tips?
Many thanks,
Paul.

**vwphillips** · 01-30-2011, 09:40 AM

Code:

#slideshow IMG {
 width:100px;height:75px;margin-Left:10px;border-Width:0px;
}

**SheilaMMS** · 07-17-2011, 05:57 PM

I too, enjoy the Multiframe Image Slide Show. But I receive an two errors that I do not know how to correct. I've searched for additional slideshow options, but really like this slideshow best. Does anyone have a solution for the errors I am receiving?

< found between tags. Consider using the equivalent entity (&amp = '&', &lt = '<', &gt = '>', &quot = quotation mark). [XHTML 1.0 Transitional]

referring to this line of code: document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)

AND

< found between tags. Consider using the equivalent entity (&amp = '&', &lt = '<', &gt = '>', &quot = quotation mark). [XHTML 1.0 Transitional]

at: imghtml+='</a>'

Thank you in advance for any assistance you can/will provide.

**vwphillips** · 07-18-2011, 08:09 AM

post a link to your page

Thread: MultiFrame Image Slideshow Stop-Start

Thread Tools

Search Thread

MultiFrame Image Slideshow Stop-Start

Bookmarks

Bookmarks

Posting Permissions