Fade-In Image Slideshow help

[shayta]

The code that's given on the Dynamic Drive web site is to be inserted directly into the body of the main html file it's to be run from. I'm trying to keep my html file small, so I've got a separate .js file where I store all my Javascript functions. I load my javascript functions from my main page (<script language="Javascript" src="javascript.js"></script>) and then where I want the slideshow to appear on my web page I have:

<script language="Javascript">slideshow()</script>

and in my javascript.js file I have the same code on the Dynamic Drive web site, except I took out the:

<script language="JavaScript1.2" type="text/javascript"> (at the start)

and

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p> (at the end)

and then surround the code with

function slideshow() {

...
code
...

}

When I load the page, it appears to faintly show the first image, but do nothing else. Am I doing this right? How do I make this work?

Here's my site: http://www.aplusresorts.com/

[jscheuer1]

Well obviously, not quite right. This could be a bit more complicated depending upon the other scripts/functions stored in your javascript.js file but, if none of them are in conflict with the fade-in slide show. This is how to do it -

If it isn't there already (as you haven't made that clear) this goes in the head of the page you want the slide show on:

<script language="Javascript" src="javascript.js"></script>

If the javascript.js file isn't in the same directory as this display page, there will be other problems but, from what you've said, it probably is there. In javascript.js remove the surrounding:

function slideshow() {

}

and, remove from the script, these lines:

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

and place them, along with the credit (this credit part is to fulfill the Dynamic Drive usage terms) inside script tags in the body of your html file at the place where you want the slide show to appear. It will look like this:

<script type="text/javascript">

/***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

</script>

Works here . . .

[shayta]

Great that did it! Thanks!

[jscheuer1]

Still not quite right, I forgot that you will probably be using your javascript.js file on other pages without the slideshow. If so, it will cause an error. If you also move these lines from javascript.js to the end of the script block in the body of the page using the slideshow, the error will stop on other pages:

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)