PDA

View Full Version : 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
<!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
#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