/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
/*******************************
The code above shows how to invoke two separate fade in slideshows, each with varying parameters. Here's an explanation of how to invoke function "fadeshow()":
new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause, optionalRandomOrder)
IMAGES_ARRAY_NAME: The name of the image array (inside script of Step 1) containing the images to display for this slideshow (ie: "fadeimages".
slideshow_width: The width of the slideshow container (implied in px). Set it to accommodate the largest image within the slideshow.
slideshow_height: The height of the slideshow container (implied in px). Set it to accommodate the largest image within the slideshow.
borderwidth: The width of the border, such as 0, 1 etc.
delay: Delay between image change, in milliseconds (ie: 3000 = 3 seconds).
pause: Specify whether slideshow should pause (not rotate) while the mouse is over it. 1=yes, 0=no.
optionalRandomOrder: An optional parameter specifying whether to "randomize" the display order of the images. Set it to "R" to randomize, or remove this parameter (unset) to not.
As mentioned, you can invoke "fadeshow()" multiple times on the same page to display multiple fade in slideshows. Fade away we say!
Finally, some people have asked "How do I center the slideshow? Since IE and Firefox/Opera behaves differently when it comes to positioning a relatively positioned element, you'll need to use some Frankenstein CSS:
CODE OF STEP 2 HERE
As you can see, to center a particular slideshow, wrap the code of Step 2 for that slideshow in a special DIV. Do this for each slideshow that you wish centered. The stylesheet obviously should go in the HEAD section of your page.
********************************/
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/header/header-slide01_760x150.jpg", "", ""] //plain image syntax
fadeimages[1]=["images/header/header-slide02_760x150.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/header/header-slide03_760x150.jpg", "", ""] //plain image syntax
fadeimages[3]=["images/header/header-slide04_760x150.jpg", "", ""] //plain image syntax
fadeimages[4]=["images/header/header-slide05_760x150.jpg", "", ""] //plain image syntax
fadeimages[5]=["images/header/header-slide06_760x150.jpg", "", ""] //plain image syntax
fadeimages[6]=["images/header/header-slide07_760x150.jpg", "", ""] //plain image syntax
fadeimages[7]=["images/header/header-slide08_760x150.jpg", "", ""] //plain image syntax
fadeimages[8]=["images/header/header-slide09_760x150.jpg", "", ""] //plain image syntax
fadeimages[9]=["images/header/header-slide10_760x150.jpg", "", ""] //plain image syntax
fadeimages[10]=["images/header/header-slide11_760x150.jpg", "", ""] //plain image syntax
fadeimages[11]=["images/header/header-slide12_760x150.jpg", "", ""] //plain image syntax
fadeimages[12]=["images/header/header-slide13_760x150.jpg", "", ""] //plain image syntax
fadeimages[13]=["images/header/header-slide14_760x150.jpg", "", ""] //plain image syntax
fadeimages[14]=["images/header/header-slide15_760x150.jpg", "", ""] //plain image 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"
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')
else
document.write('')
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'
slideHTML+='
'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+=''
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