PDA

View Full Version : Help with Fade-In Slideshow



Go For Your Dream
01-21-2008, 01:20 AM
Hi All,

I am new to this forum and have learned to build my website through a program called SBI! I do not upload my own html so the Fade-In Slideshow code I use with Dynamic Drive works

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

but when I check the page in IE it loads, but Done ! with errors. In FireFox it seems fine. The page does not seem to have any problems.

Also, because I am unable to place the code in the "head" I have to place it within the "body", therefore, I am unable to put it on my homepage.

Would someone please look at the page I put the code on and let me know if the code can be modified to fit into the program I use so I can enter the entire code into the body and be able to place it on all my pages including my homepage?

The page the Fade-In Slideshow code is on can be viewed here: http://www.go-for-your-dream.com/achievement.html

I hope someone can help me. I really like this site and the Fade-In Slideshow is perfect for what I want to accomplish with my products.

Gratefully,
Go For Your Dream

jscheuer1
01-21-2008, 03:38 AM
Get rid of the second call (red):


<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")
new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)

</script>

That's what is causing the error, in FF too. FF just isn't as obvious about reporting it.

You only have one slide show on the page, so should only have one call. The second call is looking for the fadeimages2 array, which you don't have (or need for just one slide show).

Go For Your Dream
01-21-2008, 03:52 AM
Hi John,

Thanks for the help, it worked.

Is there any reason why I am unable to use this code on my homepage? :confused:

jscheuer1
01-21-2008, 04:04 AM
Well the script can go in the body of the page, just as long as it is before the call to it. Like you have it on your achievement.html page.

I'm not sure what you mean when you say 'my program' or SBI though.

As long as it allows you to enter raw code, you should be fine.

However, if you were to use this script on several pages, it probably would be a good idea to make the main portion of it external. But, I think that might be asking for more than you are ready for at this point. It can be placed on each page, as long as you can figure out how. If I knew the actual name of the program you are using, or had a link to its site, I might be able to be of more help in figuring out the best way to add scripts with it.

Go For Your Dream
01-21-2008, 04:40 AM
Hi John,

What do you mean by 'before the call to it"?

The program I use is Site Build It! You can view the homepage here:

http://www.sitesell.com/Kimberly24.html

At the top of the page you can click on company for the corporate info or view the site map.


I think if I understand what you mean by 'before the call for it', it may help me. The homepage is built differently than the tier two pages like achievement.html, but it does allow coding on the homepage.

When I place the code where I want it to be (currently where the calendar and sweatshirts currently are at the top right of the page) it is blank - does not display.

Would you like me to place the Fade-In Slide show code in where I think it should be and you can view source it to perhaps see the problem? Let me know once you have seen the current homepage and if you would like me to place the code and I will.

jscheuer1
01-21-2008, 01:15 PM
That doesn't look like a program as much as like an infomercial. I was thinking about instructions on using an editor, not a business plan.

Also, you pages' source code doesn't look all that special, it looks like they were made with Dreamweaver or another Adobe program, most (if not all) of which will allow scripts in the head.

In any case, go ahead and put the code where you want it. I can probably troubleshoot it.

Go For Your Dream
01-21-2008, 04:21 PM
Hi John,

I could see how it looks like an infomerical to you, nonetheless, it allows me to build a site with no experience.

I took the code and your "before the call for it' to the forums at SBI! and found an SBI! tech person that I am hoping can help me.

I appreciate your help, believe it or not you gave me a lot of info on this subject that I can and will use to share about this site. Should I need further help on this matter I will get back with you.

Kindest regards,
Kimberly

jscheuer1
01-21-2008, 04:48 PM
Oh, sorry - I just meant that the link didn't seem to lead to any information on how to use the editor you are using or even what it is exactly.

I also forgot to answer your question about the call. I'm using the word call here in a non-technical sense, the 'call' is:


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

That must come after the main script.

If you have all of that worked out - it's how you have it on the page where the script is working, so how hard can it be - if there are still problems, it is probably due to style and/or layout obscuring the slide show somehow. It could also be that the paths to the images are wrong in the script in relation to the page that is using it. And, as I said before, I would be happy to look at what you are doing to see if I can troubleshoot it. I have at least a 99% success rate in doing just that with javascript.

I know that when you are just starting out with javascript it can seem quite daunting, and to actually code in it is. But with a ready made and fairly well written script like this one, there really isn't all that much that can go wrong. All you need to do is install it.

Go For Your Dream
01-21-2008, 09:21 PM
No problem, and I appreciate your help.

I have placed the Fade-In Slideshow script on my homepage for you to view. It does not show up and when the page loads it is '! Done, but with errors on page'. I put the exact same script on my homepage as I have done on the other pages with this script.

Home page: http://www.go-for-your-dream.com

Other pages: http://www.go-for-your-dream.com/work-from-home.html
http://www.go-for-your-dream.com/achievement.html
http://www.go-for-your-dream.com/build-a-website.html

If my intention is to place this script on all pages in my site, how do I make the main portion of it external? And, how do I make the 'call' for it on my page?

jscheuer1
01-21-2008, 10:05 PM
You have:

<P>

inside the main script in 5 places. If you get rid of those, it will work.

To make the script external, put the code minus the opening and closing script tags (middle section removed for brevity):


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

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["http://www.go-for-your-dream.com/images/gfydwhitehoodie.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[1]=["http://www.go-for-your-dream.com/images/gfydlargemugmiragepink.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[2]=["http://www.go-for-your- . . .

. . . secheck==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()
}

In a plain text file (use NotePad) and save it as:

slideshow.js

upload that file to the same folder where your pages are. Then in place of where you have the main part of the script, in the same place, put:


<script src="slideshow.js" type="text/javascript">

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

</script>

The 'call' can remain the same and in the same spot.

Go For Your Dream
01-21-2008, 10:42 PM
Let's tackle step one first.

I found and removed 4 (P) from the main area.

I cannot find the fifth one. :o

jscheuer1
01-22-2008, 03:23 AM
Use a text only editor and search for:

<P>

I'd tell you the one you missed, but you either haven't updated the live page yet, or something has caused all of the <P> tags to be in there again. Maybe this will help (all the <P> tags are highlighted red):


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

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
<P>fadeimages[0]=["http://www.go-for-your-dream.com/images/gfydwhitehoodie.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[1]=["http://www.go-for-your-dream.com/images/gfydlargemugmiragepink.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[2]=["http://www.go-for-your-dream.com/images/gfydmousepadmiragebabyblue.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[3]=["http://www.go-for-your-dream.com/images/gfydclocktextile.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[4]=["http://www.go-for-your-dream.com/images/gfydcapkhaki.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[5]=["http://www.go-for-your-dream.com/images/gfydfittedtee.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[6]=["http://www.go-for-your-dream.com/images/tinlhat.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[7]=["http://www.go-for-your-dream.com/images/tinlclockgreen.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[8]=["http://www.go-for-your-dream.com/images/tinlhoodiewhite.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[9]=["http://www.go-for-your-dream.com/images/tinlmousepadscoolblue.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
fadeimages[10]=["http://www.go-for-your-dream.com/images/tinl2008calendarprint.jpg", "http://www.cafepress.com/mygfydstore", "_new"]
<P>var fadebgcolor="white"
<P>////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);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;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);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;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)
}
}
<P>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<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=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


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

Go For Your Dream
01-22-2008, 04:15 AM
OMG... I feel like such a newbie!

I'm not even going to tell you what I thought you meant, or what I did, but when I saw your post I realized that the (P) you were talking about was in the main of the script. I never looked there. :o It works, thanks so much!

Javascript for dummies here!

Are you sure you want to walk me through making the external part of the script in Notepad and uploading it to my folders?

I'm going to take a stab at it tomorrow, and don't get nervous but... I'll be back. ;)

Go For Your Dream
01-22-2008, 06:01 PM
Hi John,

You will be happy to know that all is working. :D

I followed your instructions to the letter, just a couple of changes that I figured out thanks to you, and I was able to place the main part of the script in a file and upload it to my folders for my site.

Then I placed the code you sent me (with one minor change - where my actual folder was) and the call script exactly as it is with no changes below it and VIOLA! Check it out:

http://www.go-for-your-dream.com

Now I will put it on all my pages and I have begun the changes to My GFYD Store. This page will include several different Fade-In Slideshows thanks to this site and your help.

http://www.go-for-your-dream.com/my-gfyd-store.html

Thanks so much for hanging with me on this, John, you really helped me out tremendously! ;)

Gratefully, your newbie friend in javascript,
Kimberly

jscheuer1
01-22-2008, 06:17 PM
Great! You still have the <P> issue on the home page (not on the achievement page):


<script src="http://go-for-your-dream.com/support-files/fadeout.js" type="text/javascript">
<P>/***********************************************
* 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.
***********************************************/
<P></script>

This will probably not cause any problems, but could in a slightly non-compliant browser. If a script tag has a src attribute, the browser is supposed to ignore the text inside the tag.

Also, and now this is a fine point, I notice that when the page first loads, if the images aren't already cached, in some browsers there are broken image tokens while the page is loading. You could cut down on that by removing (red) in the call:


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

And by moving the external script tag up as high in the body as possible, preferably to just after the opening <body> tag.

Go For Your Dream
01-22-2008, 10:00 PM
Hi John,

I think the (P) issue with the homepage is actually something that happens when I build or re-build this page through SBI! The homepage is built differently than the other pages. This is why I did not see the (P) originally on my homepage, because it is not there when I build it.

However, after I build it and it goes live, when I view source my page I see that it is there.

I have removed them and I see they are now gone. I will have to watch that when I make any changes to the homepage. Thanks.

I have removed the (red) in the call as suggested. Should I do this on all pages or just the homepage?

BTW, what does 'cache' mean :o and when you say move the 'external' to the top are you talking about only the part with the copyrights in it or both the copyrights and the call? Should this take place on all pages?

jscheuer1
01-22-2008, 11:22 PM
Caching is what happens to virtually all web content (images, scripts, video, text, etc.) on the user end. This allows the browser to display it, or use it for whatever without having to retrieve it each time it is needed.

The:

, "R"

makes the images random in order at each page load.

So, if you don't randomize the images, the rule of first in first out will apply when switching pages, and only the the very first images (which by now should already be cached) will be required at first, giving the browser time to cache the others before they are needed.

Yes, the external script tag is the tag that links to the external script file and that has the credit/copyright notice in it and, yes it should be moved up on all pages because you never know which page on your site a user my arrive at first. It is the code which begins the caching process for the images (also known as preloading in this case) so that they will be available to the script 'call' (which needs to stay where it is for layout purposes) when it asks for them.

This, incidentally is why, on the demo page, the main script is directed to be in head of the page. When possible, this would give it even more of a jump at preloading the images. In your situation, the external script tag could go (with equal good effect) in the head of each page, if you could place it there.

Go For Your Dream
01-22-2008, 11:32 PM
I understand. Thanks once again, John.

Kimberly