External Javascript file and slow disolve rate

**mjp** · 03-06-2008, 08:59 PM

1) Script Title: Ultimate Fade-In Slideshow

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

3) Describe problem:

I am using this script to rotate images on a website with mutliple pages - the top pane of the pages has the images as well as nav bar and block title for the page.

Two questions - first, I am not experienced with JavaScript and if this question should go to another area of the forum, please advise. I would like to have the javascript code that is located in the head element moved to an external file. I created a new file, moved the contents and created a link to this file - named 'slideshow.js' I replaced the javascript in the head element with this link: <script language="JavaScript" type="text/javascript" src="home/cgi-bin/slideshow.js"> When I load the webpage, the images do not appear and the error I find is 'fadeshow is not defined' - which is probably caused by the script in the body element where the images are supposed to appear. What do I need to do to correct this?

My second question is regarding an adjustment to the disolve rate for the transition / fade between images. I would like to slow it down a little - the present transtion is quick and choppy. I like the transition / fade that is in the 'Blending Image Slideshow Script at: http://www.dynamicdrive.com/dynamicindex14/image4.htm, however this one did not work for me in Firefox 2.

Thanks for your help
Mike

**thetestingsite** · 03-06-2008, 09:06 PM

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

A few things off the top of my head, make sure you removed the opening and closing <script> tags in the external file and also any  in there as well. Other than that, if it still isn't working, please post a link to the problem page so that we can help resolve the issue.

**mjp** · 03-07-2008, 02:39 PM

Thanks for your reply - it is not possible to post a link to the page as it is on a my computer internal drive - I have a portion of my drive setup to run as a webserver for development. The images loaded into the page when the javascript was in the <head>. I removed it an external file as mentioned in yesterdays post. Here is the link info that I have in the <head> element.

<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">

<title>Welcome to Northeast Delta Dental</title>
<link rel="stylesheet" type="text/css" href="home/CSS/core.css">

<script language="JavaScript" type="text/javascript" src="home/cgi-bin/slideshow.js">
/***********************************************
* 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>
</head>

In the body, I have this - which I did not change.

<div id="headergraphic">

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

</div>

The error that appears is 'fadeshow is not defined'

Thanks

**thetestingsite** · 03-07-2008, 03:18 PM

Make sure that slideshow.js is in the following location in relation to the page your posted above:

Code:

./home/cgi-bin/slideshow.js

Hope this helps.

**mjp** · 03-07-2008, 03:48 PM

Greetings;

I added the './' to the url for the script as you indicated. The script still did not run. I then opened the script file and moved all the code back to the <head> element and then the script ran. I moved it back to the external script file and nothing worked. Is the small javascript file in the body (where the images are to appear) not able to function because it can't find the javascript in the <head>? I know the url path is correct as the styleshee that controls the colors and appearance of the page is in an external file using the same url, except it is in a folder labeled CSS.

Thanks

**thetestingsite** · 03-07-2008, 03:57 PM

So you are saying that the slideshow.js file is in the folder cgi-bin/ under the folder /home/?
If not, you need to correct the path to point to the correct location.

Hope this helps.

**mjp** · 03-07-2008, 04:56 PM

Yes, the slideshow.js file is in here: ./home/cgi-bin/slideshow.js

I have a small javascript file that I use for the 'date' at the top of the page, this script is in the cgi-bin folder, thus I know the link to the folder is working as the date appears on the page. This link is ./home/cgi-bin/date.js

Thanks

**mjp** · 03-10-2008, 01:21 PM

Hi;

Is there any hope of running this as an external javascript file or should I abandon this slideshow and look for another one? Running it as an external javascript file will save 185 lines of code for each page, of which I have 15 pages right now.

Thanks

**mikeysweet** · 03-13-2008, 05:30 AM

I was racking my brain on how to get the external file to work. My issue was that the page had the code:
<base href="http://www.mysitehere.com/folder/" />
This would make the .js link I was referencing invalid because it would append this to the beginning of it.
Once I cleared that out, I was able to get the external file to work.

As for slowing down the speed of the transition, you can control this by changing one number in the following part of the code:

function fadepic(obj){

if (obj.degree<100){

obj.degree+=10

Change the 10 to a smaller number and it fades slower, a higher number and its quicker. I set mine to 2 and it achieved the effect I was after. Play around with the number and see what does it for you.

Hope this helps!
-Mike

**mjp** · 03-13-2008, 06:02 PM

Thanks for pointing out the section of the code for slowing the transition rate - I adjusted it and it works.

I now have the external js working, however, the js has urls to the images in the slide show. I am having issues with the links working on the different pages of the site. If I adjust the image urls for the home / index page, none of the sub level pages work. If I adjust the image urls for the sub level pages, the home / index page does not work. Any ideas on how to get this to work for all page levels? I also only need to preload the first couple of images (if the entire set of 35 preloads, the dial-up user will be hanging around awhile waiting on the site to load).

The slide show rotates 35 pictures through - one picture ever 20 seconds. This mini slide show is part of the top banner on the site pages. All pages have the same general layout with different color themes for the divisions.

One file of js, images, etc. instead of 16 sets.

Thanks