PDA

View Full Version : Need help with slideshow



CasualCoder
Jan 9th, 2014, 10:34 AM
I'm not a coder. I'm putting a website together and have learnt a few basics to help.

I wanted to put in a slideshow of personal pictures on a bio' page, so looked around and came up with this: http://www.javascriptkit.com/howto/show2.shtml

Very easy to use. If only everything were this straight forward.

Anyway, I used 3 pictures as the guide teaches and it all went well, but then I tried to up that number to 8 and it only shows the first 3!

Looking at the code, I saw that the number 3 appears further down:

if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++

So I changed this 3 to an 8.

But then slideshow froze on the 3rd pic!

I went and changed the number back and the slideshow worked again... so my question is: can I only use 3 pictures or do I need a different code to get a slideshow to work with more photos?

vwphillips
Jan 9th, 2014, 02:45 PM
that script is very old and should not be used

try


<!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[*/


.buttons {
width:200px;height:30px;border:solid red 1px;
}

.buttons IMG {
width:14px;height:14px;float:left;margin-Left:9px;margin-Top:5px;cursor:pointer;
}

/*]]>*/
</style></head>

<body>
<a><img id="ss" src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" /></a>
<div class="buttons" >
<img src="http://www.vicsjavascripts.org/StdImages/left.gif" alt="forward" onmouseup="zxcSlideShow.Next('ss',1);" />
<img src="http://www.vicsjavascripts.org/StdImages/right.gif" alt="back" onmouseup="zxcSlideShow.Next('ss',-1);"/>
<img src="http://www.vicsjavascripts.org/StdImages/pause1.gif" alt="pause" onmouseup="zxcSlideShow.Pause('ss');" />
<img src="http://www.vicsjavascripts.org/StdImages/autoright.gif" alt="auto " onmouseup="zxcSlideShow.Auto('ss');" />
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" alt="GoTo 0" onmouseup="zxcSlideShow.GoTo('ss',0);" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" alt="GoTo 1" onmouseup="zxcSlideShow.GoTo('ss',1);" />
<img src="http://www.vicsjavascripts.org/StdImages/3.gif" alt="GoTo 2" onmouseup="zxcSlideShow.GoTo('ss',2);" />
<img src="http://www.vicsjavascripts.org/StdImages/4.gif" alt="GoTo 3" onmouseup="zxcSlideShow.GoTo('ss',3);" />
</div>


<script type="text/javascript">
/*<![CDATA[*/
//Fade Slide Show (09-December-2013)
// by Vic Phillips - http://www.vicsjavascripts.org/index.htm

var zxcSlideShow={

GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(o);
if (o.ni[n]&&n!=o.n){
o.ud=n>o.n?1:-1;
this.rotate(o,n);
}
}
},

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);
}
},

Auto:function(id,ms){
var oop=this,o=oop['zxc'+id];
o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200):null;
},

Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},

init:function(o){
var id=o.ImageID,a=o.ImageArray,ms=o.Animate,h=o.AutoHold,s=o.AutoStart,i=document.getElementById(id);
if (i&&a instanceof Array){
var ni,z0=0;
o.ni=[];
for (;z0<a.length;z0++){
if (a[z0]&&a[z0][0]){
ni=new Image();
ni.src=a[z0][0];
o.ni.push([ni,a[z0][1]]);
}
}
o.id=id;
o.a=[i,i.parentNode,100];
o.lgth=o.ni.length-1;
o.ud=1;
o.n=0;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
this['zxc'+id]=o;
typeof(s)=='number'&&s>0?this.Auto(id,s):null;
}
},

rotate:function(o,a){
this.Pause(o.id);
var n=o.n;
o.auto=a===true;
n=o.auto?n+o.ud:a;
n=n<0?o.lgth:n>o.lgth?0:n;
if (o.ni[n][0].width>40){
o.a[1].removeAttribute('href');
this.animate(o,o.a,o.a[2],0,new Date(),1000);
o.n=n;
}
else if (o.auto){
this.Auto(o.id,200);
}
},

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)){
a[2]=Math.max(0,n);
this.opc(a[0],a[2]);
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=t;
this.opc(a[0],a[2]);
if (t==0){
a[0].src=o.ni[o.n][0].src;
o.ni[o.n][1]?o.a[1].href=o.ni[o.n][1]:null;
this.animate(o,o.a,o.a[2],100,new Date(),1000);
}
o.auto&&t==100?oop.Auto(o.id,o.h):null;
}
},

opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},

addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}

}

zxcSlideShow.init({
ImageID:'ss', // the unique ID name of the main images parent DIV. (string)
ImageArray:[ // an array defining the image SRCs and Link HREFs. (array)
// field 0 = the image SRC.
// field 1 = the image link HREF.
['http://www.vicsjavascripts.org/StdImages/Egypt5.jpg'],
['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg'],
['http://www.vicsjavascripts.org/StdImages/Egypt7.jpg'],
['http://www.vicsjavascripts.org/StdImages/Egypt8.jpg']
],
Animate:1000, //(optional) the fade duration in millisec. (number, default = 1000)
AutoHold:2000, //(optional) the auto rotate 'hold' delay in millisec. (number, default = Animate*4)
AutoStart:2000 //(optional) the auto rotate 'start' delay in millisec. (number, default = no auto start)
})


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

</html>