Ultimate Fade-In Slideshow as External .js

**Snax** · 10-18-2006, 01:55 PM

1) Script: Ultimate Fade-In Slideshow (v1.5)
2) http://www.dynamicdrive.com/dynamici...nslideshow.htm
3) Problem:

Hello all,

I am trying to save the <HEAD> script in an external js file (fadeimages.js) which is in the same directory as all my other HTML pages, and I have an images folder off that directory. As far as I know the js file has the correct path to the images. The slideshow works perfectly when everything is left in the one HTML but I am battling when using an external js.

I have had a good look around for an hour or two, and have worked through jscheuer's suggestions here: http://www.dynamicdrive.com/forums/s...ad.php?t=10065 as well as several others elsewhere. I have no  hiding tags in the external file and am confident my paths are all sweet.

Initially I had the "'fadeshow' is undefined" error, which disappeared after I put " src="fadeimages.js" " with the script call in the BODY where the fadeshow() function is called. Well enough chit chat, here is some code

:

External fadeimages.js

Code:

<script language="javascript" type="text/javascript">
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/night1.jpg", "", ""]
fadeimages[1]=["images/night2.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/dining.jpg", "", ""]
fadeimages[3]=["images/dining2.jpg", "", ""]
fadeimages[4]=["images/living.jpg", "", ""]
fadeimages[5]=["images/bedroom.jpg", "", ""]
fadeimages[6]=["images/day1.jpg", "", ""]

var fadebgcolor="white"
 
//// nothing edited beyond here, honest /////////////
 
...
 
</script>

BODY of index.html in question

Code:

 <td width="600" height="240" valign="top">
	
	  <script src="fadeimages.js" type="text/javascript">  
	  
              /***********************************************
             * Ultimate Fade-In Slideshow (v1.5): &#169; 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.
             ***********************************************/
	  
		//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay)
		new fadeshow(fadeimages, 600, 240, 0, 3000, 0, "R") 
	  </script>
</td>

I wasn't sure if the credit lines were needed to actually get the thing to run, so have put them in a couple of spots. When I run thet page in IE everything looks fine... but no slideshow gets displayed. Also, currently I get a little "Syntax error" on Line 2, character 1 of my HTML page. Here is the HEAD of my index.html page (give or take):

HEAD of index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="a collection of words that will hopefully give my site props with Google" />
<meta http-equiv="imagetoolbar" content="no">

<title>My Website</title>

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

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

              /***********************************************
             * Ultimate Fade-In Slideshow (v1.5): &#169; 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>

<!--This is a little script to disable right-clicking on images and a message pops up -->

<script language="javascript" type="text/javascript">
<!--
var message="Please contact us for images.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</script>

<!-- some style code that DW8 put in when I made my footer text smaller than the rest of the page as described in stylesheet.css -->

<style type="text/css">
<!--
.style5 {font-size: 9px}
-->
</style>
</head>

Many thanks, and I look forward to responses from anyone who has a little time to assist. I am all ears (and a lot of nose unfortunately).

Kind regards,
Snax

**ddadmin** · 10-18-2006, 10:51 PM

Hi:
Did you make sure that your fadeimages.js doesn't actually contain the <script> tags? So it should look like:

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/night1.jpg", "", ""]
fadeimages[1]=["images/night2.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/dining.jpg", "", ""]
fadeimages[3]=["images/dining2.jpg", "", ""]
fadeimages[4]=["images/living.jpg", "", ""]
fadeimages[5]=["images/bedroom.jpg", "", ""]
fadeimages[6]=["images/day1.jpg", "", ""]

var fadebgcolor="white"
 
//// nothing edited beyond here, honest /////////////
 
...

Other than that, everything looks right.

**Snax** · 10-19-2006, 10:19 AM

Hi there,

That worked! Thanks for your prompt and accurate response. I am obviously new to Javascript, and didn't realise the script tags weren't needed for an external js file.

I now have that locked in for the future. Thinking about it now, it makes perfect sense with the script tag and "src" declared in the head of the html page already.

The only other change I had to make for it to work was to remove the 'src="fadeimages.js"' code from the script call in the BODY but leave it in the head as I had it.

Many thanks,
Snax

**corydalus** · 03-05-2007, 08:29 PM

Kindly Experts,

OK, this is embarassing, but I seem to have the SAME problem with the very nifty Fadeshow; it works with the script in my header, but not as an external file. From what I see here, it SHOULD work.... Hair is being torn.

This is what I have in my file named fadeimages.js:

/***********************************************
* 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]=["get1.jpg", "http://www.XXX.XXX.edu/", ""] //image with link syntax

fadeimages[1]=["get2.jpg", "http://www.XXX.XXX.edu/trans1/main.html", ""]

fadeimages[2]=["get3.jpg", "http://www.XXX.XXX.edu/", "_new"] //image with link and target syntax

var fadebgcolor="transparent"

////NO need to edit beyond here/////////////

(and I didn't!)

And this is what I have in my HTML:

<div id="picturebox-2" style="position:absolute; left:285px; top:150px; width:300px;height:355px">

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

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 318, 318, 0, 20000, 1, "R")
</script>
</div>

The images, the .js file and the HTML file are all in the same folder as the HTML file. I am messing up, but how??

For the record, my expertise level is nonexistant. Thanks for any advice!

cory

**corydalus** · 03-06-2007, 07:03 PM

All,

OK, I was making a basic amateur's error, but since other rank amateurs may see this...

I had missed the info that you need some code in both the head and body. This is what worked for me:

In The Head:
<script src="fadeimages.js"></script>

In the body (for me, within the division where I want the slideshow to appear):
<script>
//newfadeshow(images_etc etc...fadeimages etc etc"R")
</script>

NOTE: NO ATTRIBUTES IN THE BODY SCRIPT TAG

Many thanks to my company IT guy for figuring this out for me!

cory

**jscheuer1** · 03-06-2007, 07:32 PM

Just a note on what corydalus discovered. You should have the type attribute on the script tag in the body:

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, 318, 318, 0, 20000, 1, "R")
</script>

In fact, virtually all script tags should have the type attribute. This is so that they can be valid, and be compatible with earlier and later browsers.

What trips you up is if you have both a src attribute and then code enclosed in the tag. Only one will be executed, usually I believe, the code of the src attribute, with the code enclosed by the tag being ignored.

**corydalus** · 03-06-2007, 09:30 PM

All,

John is spot on about the type attribute, as I discovered when I ran the page through the W3C HTML validator. In fact, their lack was causing an odd behavior in IE (a pretty recent version) in that when I tried to view the page, I got a message that IE was blocking scripts and/or ActiveX, and did I want to unblock these things. Choosing yes did allow me to see the fadeshow. After I corrected the code as instructed by the Validatrix, this IE behavior stopped happening.

cory

**johnwboyd** · 02-21-2008, 11:07 PM

Thanks in advance. Can someone please look at my code and tell me why I am getting an error:
51 91 object expected: ')'
which when I remove the line in question most of my page seems to disappear?

Here is the link to my page: http://johnwboyd.info/drop_down/ and here's the code in the fadeimages.js.

I only removed the credit stuff:

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["http://johnwboyd.info/philippines/images/home_0.jpg", "print4.htm", "Illustration"]
fadeimages[1]=["http://johnwboyd.info/philippines/images/home_1.jpg", "print.htm", "Business Print Collateral"] 
fadeimages[2]=["http://johnwboyd.info/philippines/images/home_2.jpg", "web.htm", "Website"] 
fadeimages[3]=["http://johnwboyd.info/philippines/images/home_3.jpg", "print2.htm", "Book Cover Illustration"] 
fadeimages[4]=["http://johnwboyd.info/philippines/images/home_4.jpg", "web2.htm", "Email Ads"] 
fadeimages[5]=["http://johnwboyd.info/philippines/images/home_5.jpg", "print4.htm", ""] 
fadeimages[6]=["http://johnwboyd.info/philippines/images/home_6.jpg", "web.htm", ""] 


 
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);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%5b0%5d.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 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%5bpicindex%5d.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()
}

**jscheuer1** · 02-22-2008, 02:43 AM

Here:

Code:

document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages%5b0%5d.src+'"></div>')

and elsewhere in your external script, the URI component entities for certain characters have somehow crept into the code. For example, in the above, %5b should be a [, and %5d should be a ].

I would suggest starting over, using only a plain text editor, and uploading the file via FTP in binary mode, rather than via a WYSIWYG editor like FP or DW. However, since I cannot with certainty guess how you uploaded it or how the substitution occurred, I can only say for sure that it must be corrected in the file that is on the server.

**johnwboyd** · 02-22-2008, 06:05 PM

Ok I got the error out and both scripts are working now! The problem now is that the drop down is going behind the slide images. Can anyone help with this?

See here: http://johnwboyd.info/drop_down

Thanks!