I am a newbie to javascript. I am looking for a simple (non-jquery) image slideshow that has pause-on-hover (or similar), fading, plus on-demand loading of the images (there will be too many images to preload the lot).
I have searched this forum and lots of other places without success.
Lots of good scripts there. Unfortunately they are all far more complex than what I want and none do what I need. It is aimed mainly at doing all sorts of fancy fades etc. I just want a small one with those three basic features.
You say you have too many images to preload the lot. That is bound to result in a poor user experience. You should preload a few images and then continue preloading the others as the viewing proceeds.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Thanks for that link. The script there combines fading and pausing, but unfortunately preloads the images, which is not what I want. I have already found quite a few scripts like that. eg. http://www.menucool.com/javascript-image-slider (The fading on the menucool one is much better than in the link above.)
The writeup on the non-preloading script I included above says that it loads the next image while the current image is being displayed. If that is true (most of the time) then the user experience should be ok.
The problem with preloading large collections is that the user experience is non-existent. That is to say most users will get sick of waiting and leave the page before the slideshow even starts.
With a large photo collection there is not enough room for the bigger buttons, even when I changed them to just said 0, 1, 2.... Also it allows you to see where you are up to in the sequence.
I would have tried to hack it myself but unfortunately his main script is obfuscated.
I don't want the fancy fades etc. I think most people find them distracting and annoying. Just the little round circles - which are clickable.
<!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">
var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]=["rotate1.jpg", "", ""] //plain image syntax fadeimages[1]=["rotate2.jpg", "javascript:void(window.open('rotate2.jpg','','width=1000, height=800'));", ""] //image with link syntax fadeimages[2]=["rotate3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed. //SET IMAGE PATHS. Extend or contract array as needed fadeimages2[0]=["rotate1.jpg", "", ""] //plain image syntax fadeimages2[1]=["rotate2.jpg", "http://www.cssdrive.com", ""] //image with link syntax fadeimages2[2]=["rotate3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){ this.pausecheck=pause this.mouseovercheck=0 this.delay=delay this.degree=10 //initial opacity degree (10%) this.curimageindex=0 this.nextimageindex=1 fadearray[fadearray.length]=this this.slideshowid=fadearray.length-1 this.canvasbase="canvas"+this.slideshowid this.curcanvas=this.canvasbase+"_0" this.theimages=theimages if (typeof displayorder!="undefined") this.theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :) this.imageborder=parseInt(borderwidth) this.postimages=new Array() //preload images for (p=0;p<theimages.length;p++){ this.postimages[p]=new Image() this.postimages[p].src=this.theimages[p][0] }
var fadewidth=fadewidth+this.imageborder*2 var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox) document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>') else document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox this.startit() else{ this.curimageindex++ setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay) } }
function fadepic(obj){ if (obj.degree<100){ obj.degree+=10 if (obj.tempobj.filters&&obj.tempobj.filters[0]){ if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+ obj.tempobj.filters[0].opacity=obj.degree else //else if IE5.5- obj.tempobj.style.filter="alpha(opacity="+obj.degree+")" } else if (obj.tempobj.style.MozOpacity) obj.tempobj.style.MozOpacity=obj.degree/101 else if (obj.tempobj.style.KhtmlOpacity) obj.tempobj.style.KhtmlOpacity=obj.degree/100 else if (obj.tempobj.style.opacity&&!obj.tempobj.filters) obj.tempobj.style.opacity=obj.degree/101 } else{ clearInterval(fadeclear[obj.slideshowid]) obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1" obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas) obj.populateslide(obj.tempobj, obj.nextimageindex) obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0 setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay) } }
fadeshow.prototype.populateslide=function(picobj, picindex){ var slideHTML="" slideHTML+='<table style="height:100%;background-image:url('+this.postimages[picindex].src+');">' slideHTML+='<tr><td style="vertical-align:middle;color:hotpink;font-weight:bold;font-size:110%;">Here is a long bit of text that I want to have see what happens to it when this script runs</td></tr>' slideHTML+='</table>' picobj.innerHTML=slideHTML }
fadeshow.prototype.rotateimage=function(){ if (this.pausecheck==1) //if pause onMouseover enabled, cache object var cacheobj=this if (this.mouseovercheck==1) setTimeout(function(){cacheobj.rotateimage()}, 100) else if (iebrowser&&dom||dom){ this.resetit() var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) crossobj.style.zIndex++ fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var ns4imgobj=document.images['defaultslide'+this.slideshowid] ns4imgobj.src=this.postimages[this.curimageindex].src } this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0 }
fadeshow.prototype.resetit=function(){ this.degree=10 var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) if (crossobj.filters&&crossobj.filters[0]){ if (typeof crossobj.filters[0].opacity=="number") //if IE6+ crossobj.filters(0).opacity=this.degree else //else if IE5.5- crossobj.style.filter="alpha(opacity="+this.degree+")" } else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=this.degree/101 else if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity=this.degree/100 else if (crossobj.style.opacity&&!crossobj.filters) crossobj.style.opacity=this.degree/101 }
fadeshow.prototype.startit=function(){ var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) this.populateslide(crossobj, this.curimageindex) if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER var cacheobj=this var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid) crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1} crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0} } this.rotateimage() }
When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. It should be blindingly obvious why this is necessary. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Thank you very much once again Vic. Almost exactly what I was after. I did make one small change to your code however to fit exactly with what I wanted, namely the little icons instead of the red and green squares.
I changed the "paginate" CSS definition in the header to the following:
I then created two bullets as per the attached. I also renamed the array from "tst" to "images" and also removed the second slideshow. More than one is too confusing. The complete code for the benefit of others is as below (plus the icons need to be in the same folder.)
Oops, just noticed one slight problem with the original (and mine). The first image just flashes up for a very short time, then it goes to image 2.
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[*/
#paginate {
}
#paginate DIV{
width:11px;height:11px;background-image:url('bulletoff.png');float:left;margin-Left:5px;margin-top:20px;
}
#paginate .active {
background-image:url('bulleton.png');
}
/*]]>*/
</style></head>
<body>
<br />
<br />
<div>
<a href="URL1.htm"><img id="images" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="200" height="150" border="0"
onmouseover="zxcFade.Pause('images');"
onmouseout="zxcFade.Auto('images');"
/></a>
<div id="paginate" >
<div class="active" onmouseup="zxcFade.GoTo('images',0);" ></div>
<div onmouseup="zxcFade.GoTo('images',1);" ></div>
<div onmouseup="zxcFade.GoTo('images',2);" ></div>
<div onmouseup="zxcFade.GoTo('images',3);" ></div>
</div>
</div>
<br /><br />
<script type="text/javascript">
/*<![CDATA[*/
// Simple Fade Slide Show with image load on demand and pagination (08-August-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcFade={
init:function(o){
var oop=this,id=o.ImageID,img=document.getElementById(id),pag=document.getElementById(o.PaginateID),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?
ms:1000,ld=o.LoadDuration,clone=document.createElement('IMG'),src,z0=0;
for (;z0<ary.length;z0++){
ary[z0][2]=new Image();
}
clone.style.position='absolute';
clone.style.zIndex='1001';
clone.style.left='-3000px';
clone.style.top='-3000px';
document.body.appendChild(clone);
this['zxc'+id]={
id:id,
ary:o.ImageArray,
clone:clone,
img:img,
a:img.parentNode,
pag:pag?pag.getElementsByTagName('*'):[],
lst:0,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*4,
ld:typeof(ld)=='number'?ld*1000:5000,
cnt:0
}
clone.onmouseover=function(){ oop.Pause(id); }
clone.onmouseout=function(){ oop.Auto(id); }
this.Auto(id,o.hold);
},
Auto:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.to=setTimeout(function(){
o.cnt=++o.cnt%o.ary.length;
o.auto=true;
oop.rotate(o);
},ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
},
GoTo:function(id,nu){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
if (o.ary[nu]&&nu!=o.cnt){
o.cnt=nu;
this.rotate(o,false);
}
}
},
rotate:function(o){
if (o.ary[o.cnt][2].width<40){
o.ary[o.cnt][2].src=o.ary[o.cnt][0];
this.load(o,new Date());
return;
}
this.ready(o);
},
ready:function(o){
var oop=this,xy=this.pos(o.img);
clearTimeout(o.dly);
if (o.pag[o.lst]){
o.pag[o.lst].className='';
}
if (o.pag[o.cnt]){
o.pag[o.cnt].className='active';
}
o.lst=o.cnt;
this.animate(o,0,100,new Date(),o.ms);
o.clone.src=o.ary[o.cnt][0];
o.clone.style.left=xy[0]+'px';
o.clone.style.top=xy[1]+'px';
o.clone.style.width=o.img.width+'px';
o.clone.style.height=o.img.height+'px';
o.a.removeAttribute('href');
if (o.ary[o.cnt][1]){
o.a.href=o.ary[o.cnt][1];
}
},
load:function(o,d){
var oop=this;
if (o.ary[o.cnt][2].width<40&&new Date()-d<o.ld){
o.to=setTimeout(function(){ oop.load(o,d); },100);
return;
}
if (o.ary[o.cnt][2].width<40){
o.ary.splice(o.cnt,1);
o.cnt=o.ary[o.cnt]?o.cnt:0;
}
this.rotate(o);
},
animate:function(o,f,t,srt,mS){
var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
}
else {
o.img.src=obj.src;
obj.style.left='-3000px';
if (o.auto){
this.Auto(o.id,o.hold);
}
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
}
zxcFade.init({
ImageID:'images', // the unique ID name of the image. (string)
ImageArray:[ // an array defining the slide show images and link hrefs. (array)
// field 0 = the image src. (string)
// field 1 = (optional) the image link href. (string,default = no link href)
['http://www.vicsjavascripts.org.uk/StdImages/One.gif','URL1.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','URL2.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','URL3.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Four.gif','URL4.htm']
],
PaginateID:'paginate', //(optional) the unique ID name of the parinate elements parent Node. (string), default = no pagination)
LoadDuration:5, //(optional) the time allowed to load the images seconds. (number), default = 5)
FadeDuration:500, //(optional) the fade duration im illi seconds. (number), default = 1000)
HoldDuration:2000 //(optional) the auto rotate hold duration im illi seconds. (number), default = 1000)
});
/*]]>*/
</script>
</body>
</html>
Before you post, read our: 
