Help with Ultimate Fade In Slideshow

**ColleenS** · 01-06-2008, 03:44 AM

I am hoping for some guidance installing the Ultimate Fade in Slideshow.
I am using Yahoo Site Builder which indicated that i can insert Javascript from the tutorials.
The instructions seem very straightforward and I inserted my images from appropriate folders into the code and the script has yet to work. Anyone out there with any suggestions or experience with Yahoo Site Builder that can give me some insight? I load the site and it does nothing. I have tried this on both Firefox and IE7

**jscheuer1** · 01-06-2008, 04:37 AM

The best tool for adding Dynamic Drive scripts to a page is a text-only editor like NotePad. It may be possible to use Yahoo Site Builder, but I've no experience with it. Can you actually edit the source code of the page as plain text?

**ColleenS** · 01-06-2008, 04:52 AM

I dont believe I can. It is a uniform box that pops up that allows insertion of code to head and body. I just cut and paste.

**jscheuer1** · 01-06-2008, 05:21 AM

As long as the code that goes in is exactly as you write/paste it, and it isn't converted to HTML, that may be good enough. How do you upload images? To help out, I would need to see your page though:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**ColleenS** · 01-06-2008, 06:29 AM

<html>
<head>
<title>script</title>
<meta name="generator" content="Yahoo! SiteBuilder/2.5/1.5.0_02">



<style type="text/css"></style>

<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]=["images/birthday.gif", "", ""] //plain image syntax
fadeimages[1]=["images/evan3.jpg", "", ""] //image with link syntax
fadeimages[2]=["images/evan3.jpg", "", ""] //image with link and target syntax
fadeimages[3]=["images/Kaitlin4.gif", "", ""] //image with link and target syntax
fadeimages[4]=["button.gif", "", ""] //image with link syntax
fadeimages[5]=["images/boysfinal.jpg", "", ""] //image with link and target syntax

var fadebgcolor="#C9EBF1"

////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

rogid

XImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:1 0;-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

rogid

XImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:1 0;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 bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" topmargin="0" leftmargin="0" <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes),optionalRandomOrder)
new fadeshow(fadeimages, 350, 250, 0, 3000, 1)
</script>
>
</body>
</html>
<script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/geov2_000.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1199600790" alt="setstats" border="0" width="1" height="1"></noscript>

I created a blank page using only the script...

**ColleenS** · 01-06-2008, 06:34 AM

to follow on my above post..
Yahoo Site builder does seem to make some syntax changes to the code once i submit but I have no way to go in and manually change it.

I am putting this javascript in a basic box that pops up that lets you insert your own HTML code in the header, inside, and after body tags. It claims this is where you can insert Javascripts.

I am VERY new at this so please forgive my lack on\f knowledge on this topic. I am learning!

**jscheuer1** · 01-06-2008, 02:33 PM

The part you put in the head looks about right. It looks like you made two attempts to put the part that goes in the body into the page, and neither of them worked out well.

I think you want to use the HTML After Body box for that. But first, get rid of the two failed attempts, or start over.

**ColleenS** · 01-06-2008, 09:21 PM

Thank YOU THANK YOU!!! I can't believe that simple change fixed the problem!! It works just perfectly!!!

Thread: Help with Ultimate Fade In Slideshow

Thread Tools

Search Thread

Help with Ultimate Fade In Slideshow

Bookmarks

Bookmarks

Posting Permissions