If I've read your requirements correctly, this should fit the bill. Sorry, no fading in Opera but, it is rumored that the next major Opera release will support the type of fading this script uses. All other browsers that support some type of partial opacity should fade in. Configuration is similar too but simpler (many options that made no sense for this type of slideshow have been removed) than DD's Ultimate Fade-In Slideshow (v1.5) from which this script was adapted with additions to make it Safari friendly as well. I also have included the style and markup for DD's recommended centering method, it can be removed if not required:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Click to Start, Cycle Once Fade-In Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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
* 7/5/12 - update to select opacity 1st for IE 9+
***********************************************/
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 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.style.opacity&&typeof addEventListener !== 'undefined')
obj.tempobj.style.opacity=obj.degree/101
else 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{
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.style.opacity&&typeof addEventListener !== 'undefined')
crossobj.style.opacity=this.degree/101
else 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
}
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)
</script>
</div>
</body>
</html>
New Comer (less than 5 posts)
Script with OnClick slideshow?
Posting Permissions
Reply With Quote
Bookmarks