This version will start the slideshows onclick of the initial image, cycle once then restart if clicked again. I made it up custom for another person posting in these forums. It no longer has the mouse over pause and is not exactly what you asked for but, perhaps you can learn what you need from it:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Click to Start, Cycle Once Fade-In Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}
.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>
<script type="text/javascript">
/***********************************************
* Click to Start, Cycle Once Fade-In Slideshow based on:
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for the original script and 100s more.
* Modified here by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/
var fadeimages=new Array() //Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg"]
fadeimages[1]=["photo2.jpg"]
fadeimages[2]=["photo3.jpg"]
fadeimages[3]=["photo4.jpg"]
fadeimages[4]=["photo5.jpg"]
fadeimages[5]=["photo6.jpg"]
fadeimages[6]=["photo7.jpg"]
var fadeimages2=new Array() //Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg"]
fadeimages2[1]=["photo2.jpg"]
fadeimages2[2]=["photo3.jpg"]
fadeimages2[3]=["photo4.jpg"]
fadeimages2[4]=["photo5.jpg"]
fadeimages2[5]=["photo6.jpg"]
fadeimages2[6]=["photo7.jpg"]
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){
var tempimage=theimages[0]
for (var i_tem = 0; i_tem < theimages.length-1; i_tem++)
theimages[i_tem]=theimages[i_tem+1]
theimages[theimages.length-1]=tempimage
this.flag=1
this.mouseclickcheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=theimages.length-1
this.nextimageindex=0
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
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=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=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"><img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[this.postimages.length-1].src+'" border="'+this.imageborder+'px"></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=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;background-color:'+fadebgcolor+'"><img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[this.postimages.length-1].src+'" border="'+this.imageborder+'px"></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.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)
if(obj.flag){
obj.mouseclickcheck=1
obj.flag=0
}
if(obj.nextimageindex==obj.postimages.length-1)
obj.flag=1
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=""
if (picindex==this.theimages.length-1)
slideHTML+='<img style="cursor:pointer;" title="Click to Start" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
else
slideHTML+='<img title="" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
var cacheobj=this
if (this.mouseclickcheck==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/101
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)
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onclick=function(){cacheobj.mouseclickcheck=0}
this.rotateimage()
}
</script>
</head>
<body>
<div class="centerdiv">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay)
new fadeshow(fadeimages, 140, 225, 0, 3000)
new fadeshow(fadeimages2, 140, 225, 0, 3000)
</script>
</div>
</body>
</html>
Ultimate Fade-in slideshow -- How to start on command?
Reply With Quote
Bookmarks