Ultimate Fade-in Slideshow - Starts on Command & Start Delay!

[Brad]

Ultimate Fade-in Slideshow (v1.5)
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

-----(SEE POST #3 FOR AN UPDATED VERSION)-----

After reading some JavaScript tutorials and doing a lot of searches on Google, this is what I came up with to start the Ultimate Fade-in slideshow on command. It may not be the best way to do this but it works for me. (I am still learning about JavaScript.) Anyone is welcome to improve upon it or point out any errors or problems. I cannot post the entire code because it is too big for the size limit so I will just show what I changed.

THIS VERSION INCLUDES:
• Ability to start the slideshow by calling the function "startslideshow()"
• Optional "startdelay" for each slideshow. Set to "0" to disable.
• Note: More than 10 slideshows will require additional modification.

The first "IMAGES_ARRAY_NAME" must be "fadeimages" and continue with "fadeimages2" through "fadeimages10" in that order. Do not skip a number. Also do not use "fadeimages1"

Now you can decide how and when to start the slideshow
onload, onclick of something, etc.

REPLACE:

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
WITH:

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, startdelay, displayorder){
________________________________________

REPLACE:

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
WITH:

if (this.theimages==fadeimages) //assigns each instance of "this" it's own global variable for use with "setTimeout"
theinstance=this
else if (this.theimages==fadeimages2)
theinstance2=this
else if (this.theimages==fadeimages3)
theinstance3=this
else if (this.theimages==fadeimages4)
theinstance4=this
else if (this.theimages==fadeimages5)
theinstance5=this
else if (this.theimages==fadeimages6)
theinstance6=this
else if (this.theimages==fadeimages7)
theinstance7=this
else if (this.theimages==fadeimages8)
theinstance8=this
else if (this.theimages==fadeimages9)
theinstance9=this
else if (this.theimages==fadeimages10)
theinstance10=this
else { //nothing
}

this.startdelay=startdelay
startsignal=null
this.waitforsignal()
}

function startslideshow(){ //CALL THIS FUNCTION TO START THE SLIDESHOW
startsignal=1 //changes value of "startsignal" global variable
}

fadeshow.prototype.waitforsignal=function(){ //function loops every 0.25 seconds until "startsignal" equals "1"
if (this.theimages==fadeimages){
if (startsignal==1)
setTimeout(function(){theinstance.beginslideshow()}, theinstance.startdelay)
else
setTimeout(function(){theinstance.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages2){
if (startsignal==1)
setTimeout(function(){theinstance2.beginslideshow()}, theinstance2.startdelay)
else
setTimeout(function(){theinstance2.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages3){
if (startsignal==1)
setTimeout(function(){theinstance3.beginslideshow()}, theinstance3.startdelay)
else
setTimeout(function(){theinstance3.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages4){
if (startsignal==1)
setTimeout(function(){theinstance4.beginslideshow()}, theinstance4.startdelay)
else
setTimeout(function(){theinstance4.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages5){
if (startsignal==1)
setTimeout(function(){theinstance5.beginslideshow()}, theinstance5.startdelay)
else
setTimeout(function(){theinstance5.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages6){
if (startsignal==1)
setTimeout(function(){theinstance6.beginslideshow()}, theinstance6.startdelay)
else
setTimeout(function(){theinstance6.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages7){
if (startsignal==1)
setTimeout(function(){theinstance7.beginslideshow()}, theinstance7.startdelay)
else
setTimeout(function(){theinstance7.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages8){
if (startsignal==1)
setTimeout(function(){theinstance8.beginslideshow()}, theinstance8.startdelay)
else
setTimeout(function(){theinstance8.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages9){
if (startsignal==1)
setTimeout(function(){theinstance9.beginslideshow()}, theinstance9.startdelay)
else
setTimeout(function(){theinstance9.waitforsignal()}, 250)
}
else if (this.theimages==fadeimages10){
if (startsignal==1)
setTimeout(function(){theinstance10.beginslideshow()}, theinstance10.startdelay)
else
setTimeout(function(){theinstance10.waitforsignal()}, 250)
}
else { //nothing
}
}

fadeshow.prototype.beginslideshow=function(){
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
________________________________________

GOES IN THE BODY:

<script type="text/javascript">
/*
!!!IMPORTANT!!!
The first "IMAGES_ARRAY_NAME" must be "fadeimages"
and continue with "fadeimages2" through "fadeimages10"
in that order. Do not skip a number. Also do not use "fadeimages1"
Added optional "startdelay" for each slideshow. Set to "0" to disable.
Note: More than 10 slideshows will require additional modification.
*/
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause, startdelay, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 1, 3000, 1, 0, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000, 0, 1000)

</script>

<script type="text/javascript">
startslideshow() //STARTS THE SLIDESHOW
/*
Now you can decide how and when to start the slideshow
onload, onclick of something, etc.
*/
</script>

[jscheuer1]

I've done some work on this that is a bit more compact and modular, feel free to search the archives.*

Keep on coding and having fun with javascript :)



*Using Google works best for this sometimes, enter:

site:www.dynamicdrive.com/forums/archive search terms

Into the Google search box, example:

site:www.dynamicdrive.com/forums/archive Ultimate jscheuer1

[Brad]

I was able to make some more modifications to make the code smaller and more flexible. This version can have an unlimited number of slideshows. Now the “IMAGES_ARRAY_NAME” can be whatever you want for each slideshow.

The problem I had before was that “this” would not work with “setTimeout” so I had to assign each instance of “this” it’s own global variable. I went ahead and allowed for 10 instances. This made the code larger and less flexible. Then I noticed how “this” was used with “setInterval” in the original code. I tried it with “setTimeout” and it worked!

In modern browsers, no image is displayed until you call the function “startslideshow()”. In older browsers the first image is displayed until you call “startslideshow()”.


<html>

<head>
<script type="text/javascript">
/***********************************************
* A MODIFIED VERSION OF:
* 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.
*
* Modified by Brad Blair - http://www.dynamicdrive.com/forums/member.php?u=9179
*
* THIS VERSION INCLUDES:
* Ability to start the slideshow by calling the function "startslideshow()"
* Optional "startdelay" for each slideshow. Set to "0" to disable.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["http://www.dynamicdrive.com/dynamicindex14/photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://www.dynamicdrive.com/dynamicindex14/photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["http://www.dynamicdrive.com/dynamicindex14/photo3.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]=["http://www.dynamicdrive.com/dynamicindex14/photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["http://www.dynamicdrive.com/dynamicindex14/photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["http://www.dynamicdrive.com/dynamicindex14/photo3.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, startdelay, 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<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=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);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

this.startdelay=startdelay
startsignal=null
this.waitforsignal()
}

function startslideshow(){ //CALL THIS FUNCTION TO START THE SLIDESHOW
startsignal=1 //changes value of "startsignal" global variable
}

fadeshow.prototype.waitforsignal=function(){ //function loops every 0.25 seconds until "startsignal" equals "1"
if (startsignal==1)
setTimeout("fadearray["+this.slideshowid+"].beginslideshow()", this.startdelay)
else
setTimeout("fadearray["+this.slideshowid+"].waitforsignal()", 250)
}

fadeshow.prototype.beginslideshow=function(){
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<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
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=obj.degree/100
}


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()
}

</script>
</head>

<body>

<script type="text/javascript">
//Added optional "startdelay" for each slideshow. Set to "0" to disable.
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), startdelay, optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, 0, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0, 1800)

</script>

<script type="text/javascript">
startslideshow() //STARTS THE SLIDESHOW
/*
Now you can decide how and when to start the slideshow
onload, onclick of something, etc.
*/
</script>

</body>

</html>

[jscheuer1]

That's what I'm talking about. You might be interested in this little function if you decide you want to add more options/properties to a show:


function addprops(){
var args=arguments
if(args.length%2>0)
return;
for (var i_tem = 0; i_tem < args.length; i_tem+=2)
fadearray[fadearray.length-1][args[i_tem]]=args[i_tem+1]
}


This is optionally run immediately after each:


new fadeshow(fadeimages, 140, . . .

call to add or change properties (objects) to that fadeshhow, these can/will be utilized in all prototype functions run after your startslideshow() is run.

This is just a way to cut down on the length of the initial new fadeshow() call. For example, your startdelay could be added this way instead of needing to be included in the new fadeshow() call, making it truly optional:


new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
//Usage: addprops('propertyname', value, 'propertyname', value . . . )
addprops('startdelay',1800)

This eliminates the need to use:

this.startdelay=startdelay

or any other added objects not needed to set up the generated HTML for the slideshow(s) in the fadeshow function or call.