/***********************************************
* 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 this script and 100s more.
***********************************************/
/*
*/
/*
API: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
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)
1. IMAGES_ARRAY_NAME: The name of the image array (inside script of Step 1) containing the images to display for this slideshow (ie: "fadeimages".
2. slideshow_width: The width of the slideshow container (implied in px). Set it to accommodate the largest image within the slideshow.
3. slideshow_height: The height of the slideshow container (implied in px). Set it to accommodate the largest image within the slideshow.
4. borderwidth: The width of the border, such as 0, 1 etc.
5. delay: Delay between image change, in milliseconds (ie: 3000 = 3 seconds).
6. pause: Specify whether slideshow should pause (not rotate) while the mouse is over it. 1=yes, 0=no.
7. 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.
Recent Change Log
* Dec 6th, 05'. Updated to v1.5, with ability to pause slideshow onMouseover, greater efficiency in IE, and compatibility in IE5.5, IE5, and IE4.
* Nov 30th, 05'. Script rewritten for various enhancements, such as multiple slideshows per page. Now called Ultimade fade-in slideshow v1.0
* April 21st, 05'. Added link and link target ability for individual images.
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]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
*/
var fadebgcolor="black"
////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=0 //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{
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