Placement of Script (Fade in Slideshow)

**tmcewan259** · 12-21-2005, 01:50 AM

Fade in slideshow
http://dynamicdrive.com/dynamicindex...nslideshow.htm

Is it possible to place this script on a page twice to have it show up in two different locations? I tried it and it made the first sequence freeze up. I don't have nay experience in scripting. Any help would be appreicated.

**guttyguppy** · 12-21-2005, 02:00 AM

Yeah, notice the fadeimages1, fadeimages2 in the code in step 2? --where it says new new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
everytime you create a new fadeimages array, you are creating a new slideshow.

**jscheuer1** · 12-21-2005, 05:22 AM

guttyguppy is right, the only things that you might be missing are - that each call for:

Code:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
</script>

can be in a separate spot on your page and more importantly, each one must use its own unique array of images (fadeimages is the array name in the above call, the fadeimages array is defined at the beginning of the large script). So, you can have one like the above in one spot in the body of your page and another like so:

Code:

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 200, 255, 0, 3000, 1)
</script>

In another spot. The array fadeimages2 must also be defined at the beginning of the main script (as it is in the demo). Other arrays may be defined there and then used in the body also, if you like.

If you need more help:

PLEASE: Include the URL to your problematic webpage that you want help with.

**tmcewan259** · 12-21-2005, 10:07 PM

I am sure that I am missing this somewhere - I "think" I did what you mentioned, but it still locks up. So when you look at the page you will only see the locked up version. There are two html boxes on the screen that should be displaying. You can barely see the outline of a snowflake in the first one.

The page can be viewed at -

www.fenwicksoccer.com/test.htm

I appreciate the help.

**tmcewan259** · 12-21-2005, 10:20 PM

I went back in an placed a frame around the two locations where I placed the script on the test page. One is blue and one is black.

**jscheuer1** · 12-21-2005, 10:47 PM

Oh dear! For one thing, the main script can be used only once and goes in the head. Next, in no particular order, wreath2.gif is missing. You have no fadeimages2[5], this breaks that array. When it comes time to place the individual shows in the body, you have placed both of them at both locations. Other than finding the missing wreath2.gif for you, this rewrite of your test page should give you the idea:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="Antenna 2.6">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="antenna.css" id="sitestyles">
<script type="text/javascript">
/***********************************************
* 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.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["wreath2.gif"]
fadeimages[1]=["snow3.gif"]
fadeimages[2]=["xmasgreet.gif"]

 
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]=["lazer.gif"]
fadeimages2[1]=["b.gif"]
fadeimages2[2]=["a.gif"]
fadeimages2[3]=["d.gif"]
fadeimages2[4]=["e.gif"]
fadeimages2[5]=["f.gif"]
fadeimages2[6]=["g.gif"]
fadeimages2[7]=["h.gif"]
fadeimages2[8]=["i.gif"]
fadeimages2[9]=["j.gif"]
fadeimages2[10]=["k.gif"]
fadeimages2[11]=["l.gif"]
fadeimages2[12]=["m.gif"]
fadeimages2[13]=["n.gif"]
fadeimages2[14]=["o.gif"]
fadeimages2[15]=["p.gif"]
fadeimages2[16]=["q.gif"]
 
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<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>')
 
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 class="global">

<div id="N387064382LKP28">
<div class="default-style" id="W387077077GOQ42" style="position:absolute;
top:130; left:390; width:200; height:115; border-style:solid; border-color:#3333DD;">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 260, 240, 0, 3000, 1, "R")
 
</script>
</div>

<div class="default-style" id="Q387077206JVI43" style="position:absolute;
top:50; left:80; width:200; height:115; border-style:solid;">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 260, 240, 0, 3000, 0)
 
</script>
</div>

</div>
</body></html>

**tmcewan259** · 12-21-2005, 11:56 PM

John,

"Oh dear!" - that is perhaps one of the politest ways I have heard someone say - "you're an idiot!"...LOL

I am a complete novice at this and stumble through every step. I did however find the wreath. Help like this on a forum is the best thing since sliced bread. Your willingness to lend a hand is much appreciated. I tried your work and it was flawless....thank you, thank you.

**jscheuer1** · 12-22-2005, 03:54 AM

You're welcome, I missed something though. Or rather forgot to include it. In your arrays, if you are not going to use links and targets, you still need to use placeholder empty entries:

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["wreath2.gif", "", ""]
fadeimages[1]=["snow3.gif", "", ""]
fadeimages[2]=["xmasgreet.gif", "", ""]

 
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]=["lazer.gif", "", ""]
fadeimages2[1]=["b.gif", "", ""]
fadeimages2[2]=["a.gif", "", ""]
fadeimages2[3]=["d.gif", "", ""]
fadeimages2[4]=["e.gif", "", ""]
fadeimages2[5]=["f.gif", "", ""]
fadeimages2[6]=["g.gif", "", ""]
fadeimages2[7]=["h.gif", "", ""]
fadeimages2[8]=["i.gif", "", ""]
fadeimages2[9]=["j.gif", "", ""]
fadeimages2[10]=["k.gif", "", ""]
fadeimages2[11]=["l.gif", "", ""]
fadeimages2[12]=["m.gif", "", ""]
fadeimages2[13]=["n.gif", "", ""]
fadeimages2[14]=["o.gif", "", ""]
fadeimages2[15]=["p.gif", "", ""]
fadeimages2[16]=["q.gif", "", ""]

Not doing this will result in the images having links, invalid ones at that.

Thread: Placement of Script (Fade in Slideshow)

Thread Tools

Search Thread

Placement of Script (Fade in Slideshow)

Bookmarks

Bookmarks

Posting Permissions