Ultimate Fade-in slideshow (v1.51) - External JS File Assistance

**AdinE** · 09-29-2007, 01:40 AM

1) Script Title: Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
- I am using the above mentioned script but am having an issue with using it from an external JS file. I have read the other post entitled: Storing the Ultimate Fading Slideshow in a separate file which was posted in: Dynamic Drive Forums > DD Scripts > Dynamic Drive scripts help > Reload this Page Storing the Ultimate Fading Slideshow in a separate file; with the same (not working results).

Where I am getting confused, and need some help with, is clarification on the HEAD tag and the BODY tag. By this I mean, what link do I place in the HEAD to the external JS file, and what exactly do I put in the BODY where I want the script to be run.

This is my source code:

<head>
...

<link href="../JavaScript/SlideShow.js" type="text/javascript">
(andI have tried

**jscheuer1** · 09-29-2007, 04:30 AM

Sounds to me that the path to the images is getting lost in the shuffle, there could be other problems. Try using the absolute path to the images. Here is my primer on external script files. The concept is really rather simple, certain details must be paid attention to:

Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

HTML Code:

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

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

HTML Code:

<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:

Code:

<script>
<!--

and

Code:

//-->
</script>

and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:

Code:

http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:

HTML Code:

<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters, without which the script won't function.

**AdinE** · 09-29-2007, 05:42 PM

I have tried the indicated steps with no results. It seems for some reason when the script is placed in an external file (where ever it is stored) that it does not render at all.

I have only had success in getting it to work when the entire script is pasted into the HEAD portion of the page.

Am I missing a link reference or anything like that?

I will keep testing / experimenting and let you know any further updates.

Thanks again for all the help.

**jscheuer1** · 09-29-2007, 06:13 PM

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

**AdinE** · 09-29-2007, 06:44 PM

Thanks for the help.

The link that shows the page, and how it is supposed to appear is here:
http://www.fired-up.ca/NEW/
- At this site, the 3 images at the top right will be 3 different slideshows using your script.

The site that has the pages / external files, etc is here:
http://adin.luci.ca/www.Fired-Up.ca/index.html

Thanks again for taking a look. I can not figure out why it will not work properly. If I can get the one working, then I am sure the other 2 will be easy to mimic (unless you know of an issue have 3 separate slideshows on one page?).

Look forward to your post.

**AdinE** · 09-30-2007, 01:06 AM

Wonderful news!

I have successfully been able to use the script from an external JS file.

The code that worked for me is as follows:

Code:

<HEAD>
...
<script type="text/javascript" src="JavaScript/SlideShow.js"></script>
...
</HEAD>
<BODY>
...
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause, optionalRandomOrder)
new fadeshow(fadeimages1, 172, 128, 1, 3000, 1, "R") 
</script>
...
</BODY>

The one issue that I was having was because I wanted multiple (but separate ) slideshows it was causing an issue with 3 separate JS files. This was so because even though the files were named differently, and the arrays were named differently, the actual array of image references were conflicting.

Example:
fadeimages[0]=["ImagePath", "", ""]

Resolution:
var fadeimages1=new Array()
fadeimages1[0]=["ImagePath", "", ""]

var fadeimages2=new Array()
fadeimages2[0]=["ImagePath", "", ""]

var fadeimages3=new Array()
fadeimages3[0]=["ImagePath", "", ""]

NOTE: Note the numeration for the image references

To get a better idea, this is what the external JS file looks like (in part):

Code:

        var fadeimages1=new Array()
	//SET IMAGE PATHS. Extend or contract array as needed
	fadeimages1[0]=["Images/Header Pictures/Section1/HeaderPictureSection1Image01.png", "", ""] //plain image syntax
	fadeimages1[1]=["Images/Header Pictures/Section1/HeaderPictureSection1Image02.png", "", ""]
	fadeimages1[2]=["Images/Header Pictures/Section1/HeaderPictureSection1Image03.png", "", ""]
	fadeimages1[3]=["Images/Header Pictures/Section1/HeaderPictureSection1Image04.png", "", ""]
	fadeimages1[4]=["Images/Header Pictures/Section1/HeaderPictureSection1Image05.png", "", ""]
	fadeimages1[5]=["Images/Header Pictures/Section1/HeaderPictureSection1Image06.png", "", ""]
	 
	var fadeimages2=new Array()
	//SET IMAGE PATHS. Extend or contract array as needed
	fadeimages2[0]=["Images/Header Pictures/Section2/HeaderPictureSection2Image01.png", "", ""] //plain image syntax
	fadeimages2[1]=["Images/Header Pictures/Section2/HeaderPictureSection2Image02.png", "", ""]
	fadeimages2[2]=["Images/Header Pictures/Section2/HeaderPictureSection2Image03.png", "", ""]
	fadeimages2[3]=["Images/Header Pictures/Section2/HeaderPictureSection2Image04.png", "", ""]
	fadeimages2[4]=["Images/Header Pictures/Section2/HeaderPictureSection2Image05.png", "", ""]
	fadeimages2[5]=["Images/Header Pictures/Section2/HeaderPictureSection2Image06.png", "", ""]
	fadeimages2[6]=["Images/Header Pictures/Section2/HeaderPictureSection2Image07.png", "", ""]
	fadeimages2[7]=["Images/Header Pictures/Section2/HeaderPictureSection2Image08.png", "", ""]
	fadeimages2[8]=["Images/Header Pictures/Section2/HeaderPictureSection2Image09.png", "", ""]
	
	var fadeimages3=new Array()
	//SET IMAGE PATHS. Extend or contract array as needed
	fadeimages3[0]=["Images/Header Pictures/Section3/HeaderPictureSection3Image01.png", "", ""] //plain image syntax
	fadeimages3[1]=["Images/Header Pictures/Section3/HeaderPictureSection3Image02.png", "", ""]
	fadeimages3[2]=["Images/Header Pictures/Section3/HeaderPictureSection3Image03.png", "", ""]
	fadeimages3[3]=["Images/Header Pictures/Section3/HeaderPictureSection3Image04.png", "", ""]
	fadeimages3[4]=["Images/Header Pictures/Section3/HeaderPictureSection3Image05.png", "", ""]

This then allowed me to have 1 JS file for the slideshows, but then to separate each of them.

You can see the final outcome at the following link: http://www.fired-up.ca/NEW/

Thanks again for all your help and support. Also, the scripts are amazing, I will defiantly recommend your site to all.

**jscheuer1** · 09-30-2007, 01:17 AM

Don't you just love it when that happens?

Working for me here in IE 7, FF 2, Safari 3, and Opera 9.

All under Win XP Media Edition.

Thread: Ultimate Fade-in slideshow (v1.51) - External JS File Assistance

Thread Tools

Search Thread

Ultimate Fade-in slideshow (v1.51) - External JS File Assistance

Website Links

External File Success

Bookmarks

Bookmarks

Posting Permissions