PDA

View Full Version : Preloaded Slide Show Script Problem



PhyllisJ
04-13-2009, 07:15 AM
1) Script Title: Preloaded Slide Show Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/preloadslide.htm

3) Describe problem: I've created the page following the steps in the instructions. All of my images are linked correctly, but the images do not show up in the slideshow...there's just a broken image box and the controls.

You can see the issue here: http://www.ajrentertainment.com/pictures.html

Here's the page code:




<html>
<head>
<title>
American Warrior - Slideshow
</title>

<!-- BEGIN MAIN STYLE CSS -->

<Style type="text/css">
b {color: Blue; font-family: Mistral; font-size: 26}
b.title {color: Black; font-family: Comic Sans MS; font-size: 30; margin-left:-30; margin-top:-100}
b.new {color: Purple; font-family: Comic Sans MS; font-size: 20}
img.list {height:20; width:20}
img.topleft {height:20; width:20; margin-top:-100; margin-left:0;}
img.topright {height:20; width:20; margin-top:-100; margin-left:-35}
img.bottomleft {height:20; width:20; margin-left:-20}
img.bottomright {height:20; width:20; margin-left:-35}
img.main {margin-top:0; margin-left:0}
ul {list-style-type: square}
</style>

<!-- END MAIN STYLE CSS -->



<!-- BEGIN MENU SCRIPT -->

<style type="text/css">
a {text-decoration: none; border: 0}
a:visited {text-decoration: none; color: navyblue}
a:hover {img:url(Pictures/Homelink2.jpg)}
img {border: 0;}
p {margin-top:-13; margin-left:-9}
p.up {margin-top:-20}
</style>

<SCRIPT language="JavaScript">
<!--

if (document.images)
{
pic1on= new Image(150,50);
pic1on.src="Pictures/Homelink1.jpg";
pic2on= new Image(150,50);
pic2on.src="Pictures/Piclink1.jpg";
pic3on= new Image(150,50);
pic3on.src="Pictures/Contactlink1.jpg";

pic1off= new Image(150,50);
pic1off.src="Pictures/Homelink.jpg";
pic2off= new Image(150,50);
pic2off.src="Pictures/Piclink.jpg";
pic3off= new Image(150,50);
pic3off.src="Pictures/Contactlink.jpg";
}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}

//-->
</SCRIPT>

<!-- END MENU SCRIPT -->


<!-- BEGIN HEAD SECTION OF SLIDESHOW -->

<script language="JavaScript">

//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('pics/pic1.jpg', 'pics/pic2.jpg', 'pics/pic3.jpg', 'pics/pic4.jpg', 'pics/pic5.jpg', 'pics/pic6.jpg', 'pics/pic7.jpg', 'pics/pic8.jpg', 'pics/pic9.jpg', 'pics/pic10.jpg', 'pics/pic11.jpg', 'pics/pic12.jpg', 'pics/pic13.jpg', 'pics/pic14.jpg', 'pics/pic15.jpg', 'pics/pic16.jpg', 'pics/pic17.jpg', 'pics/pic18.jpg', 'pics/pic19.jpg', 'pics/pic20.jpg', 'pics/pic21.jpg', 'pics/pic22.jpg', 'pics/pic23.jpg', 'pics/pic24.jpg', 'pics/pic25.jpg', 'pics/pic26.jpg', 'pics/pic27.jpg', 'pics/pic28.jpg', 'pics/pic29.jpg', 'pics/pic30.jpg', 'pics/pic31.jpg', 'pics/pic32.jpg', 'pics/pic33.jpg', 'pics/pic34.jpg', 'pics/pic35.jpg', 'pics/pic36.jpg', 'pics/pic37.jpg', 'pics/pic38.jpg', 'pics/pic39.jpg', 'pics/pic40.jpg', 'pics/pic41.jpg', 'pics/pic42.jpg', 'pics/pic43.jpg', 'pics/pic44.jpg', 'pics/pic45.jpg', 'pics/pic46.jpg', 'pics/pic47.jpg', 'pics/pic48.jpg', 'pics/pic49.jpg', 'pics/pic50.jpg', 'pics/pic51.jpg', 'pics/pic52.jpg', 'pics/pic53.jpg', 'pics/pic54.jpg', 'pics/pic55.jpg', 'pics/pic56.jpg', 'pics/pic57.jpg', 'pics/pic58.jpg', 'pics/pic59.jpg', 'pics/pic60.jpg', 'pics/pic61.jpg', 'pics/pic62.jpg', 'pics/pic63.jpg', 'pics/pic64.jpg', 'pics/pic65.jpg', 'pics/pic66.jpg',);

// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}

function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
// THIS WILL DISABLE THE BUTTONS (IE-ONLY)
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}

function Download() {
if (Slides[NextSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
return true;
}

function CacheNextSlide() {
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{ // ONLY CACHES THE IMAGES ONCE
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}

function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>

<!-- END HEAD SECTION OF SLIDESHOW -->


</head>




<body bgcolor="#000099" onLoad="StartSlideShow()">



<!-- BEGIN MAIN TABLE -->


<table bgcolor="FF0000" width="800" cellpadding="0" cellspacing="0" border="0" align="center">

<tr>
<td cellpadding="0" cellspacing="0" colspan=2 align="center" valign="middle">
<img src="Pictures/Logo3.bmp" width="800" height="113" border="0" alt="American Warrior">
</td>
</tr>


<tr>

<td cellpadding="0" cellspacing="0" width="200" align="center" valign="top">

<br />

<P>
<A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')" Target="Home">
<IMG SRC="Pictures/Homelink.jpg" name="pic1" width="150" height="50" border="0" /></A>
</P>
<P class="up">
<A HREF="pictures.html" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')" Target="Home">
<IMG SRC="Pictures/Piclink.jpg" name="pic2" width="150" height="50" border="0" /></A>
</P>
<P class="up">
<A HREF="contact.html" onMouseover="lightup('pic3')" onMouseout="turnoff('pic3')" Target="Home">
<IMG SRC="Pictures/Contactlink.jpg" name="pic3" width="150" height="50" border="0" /></A>
</P>

</td>


<td cellpadding="0" cellspacing="0" width="200" align="center" valign="top">

<! -- BEGIN EDIT HERE -->






<!-- BEGIN BODY SECTION OF SLIDESHOW -->

<form name="SlideShow">
<table>
<tr>
<td colspan=2><img name="Screen" width=550 height=413></td>
</tr>
<tr>
<td><input type="button" name="Previous"
value=" << "
onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next"
value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>

<!-- END BODY SECTION OF SLIDESHOW -->






<!-- END EDIT HERE -->



</td>
</tr>







<tr bgcolor="#000099">
<td cellpadding="0" cellspacing="0" colspan=2 align="right" valign="middle">
<font size=1 color="#FFFFFF">&copy 2009 A-JR Entertainment - Web Design by <a href="http://designs.dreampoet.net"><font size=2 color="#FFFFFF">PDJ Web Design</font></a>
<br />Coding assistance by Donald Spradlin</font>
</td>
</tr>


</table>





<!-- END MAIN TABLE -->































</body>
</html>



Thanks in advance for your help. I just can't seem to find the problem.

jscheuer1
04-13-2009, 07:30 AM
No comma allowed at the end here:


. . . 64.jpg', 'pics/pic65.jpg', 'pics/pic66.jpg',);

There could also be other problems.