Help with simple slideshow

wakuwuaku

01-26-2009, 12:46 PM

Hi I have to use a simple javascript slideshow for a section of my coursework creating a website.

The site is contained in a folder called assignment1 with all of the websites pages and the javascript, there is also a folder in here called images.

my javascript is as follows.

var index=1;

function moveToNextSlide()
{
var img = document.getElementById("img1");
var slideName="Images/img" + index++ + ".jpg";
img.src=slideName;
}
moveToNextSlide();
// JavaScript Document

Then the following code is within my html

in my header is

<script type="text/javascript" src="………………."></script>

Then the follwoing is placed where i would like the slideshow to appear.

<p><img id="img1" src="" width="400" height="325"></p>
<p><a href="javascript:moveToNextSlide()">Next</a></p>
<script>
moveToNextSlide();
</script>

All the images are called img1.jpg, img2.jpg and so on. The slideshow is showing up but no images are appearing.

Does anyone see my problem?

Thanks oliver

Philip M

01-26-2009, 01:00 PM

Try this, or adapt:-

<p align="center">
<table border="0" cellpadding="0" align="center">
<caption><font size="3" face="Arial"><b>My Images</b></caption>

<tr>
<td align="center" width="100%"><img src="img1.jpg" name="photoslider"></td>
</tr>

<tr>
<td width="100%">
<div align="center">

<script type= "text/javascript">

var photos=new Array();
var which=0;

photos[0]="img1.jpg"
photos[1]="img2.jpg"
photos[2]="img3.jpg"
photos[3]="img4.jpg"
photos[4]="img5.jpg"
photos[5]="img6.jpg"

function backward(){
if (which>0){
window.status='';
which-- ;
document.photoslider.src=photos[which];
}
}

function forward(){
if (which<photos.length-1){
which++ ;
document.photoslider.src=photos[which];
}
else window.status='End of gallery';
}

</script>

<br>
<input type="button" value="<< Back" name="B2" onClick="backward()"> &nbsp &nbsp <input type="button" value="Next >>" name="B1" onClick="forward()"><br><br>

<a href="#" onClick="which=1;backward();return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go back to the start</b></small></a></p>
</center></div>

i raed a wlihe ago taht as lnog as the frsit and lsat lttesrs in a wrod are in the cerroct pcale msot of us wulod siltl be albe to raed bceause our barnis jsut looks at the frsit and lsat lttesrs.

wakuwuaku

01-26-2009, 03:51 PM

Thanks for that.

I am actually more interested in fixing my own code, if it comes down to it I may have to use other code.

Any other ideas people?

Thanks again

freedom_razor

01-26-2009, 06:35 PM

That should work:

<!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=utf-8"/>
<title></title>
<script type="text/javascript">
//- <![CDATA[
var index=2;
function moveToNextSlide()
{
var img = document.getElementById("img1");
var slideName="Images/img" + index++ + ".jpg";
img.src=slideName;
}
//- ]]>
</script>
</head>
<body>
<p><img id="img1" src="Images/img1.jpg" width="400" height="325"></p>
<p><a href="javascript:moveToNextSlide()">Next</a></p>
</body>
</html>

I've put index value at 2, and picked img1.jpg as first image that will show when loading the page. Of course if you don't want it this way, just make index=1 and remove image src from IMG tag, like it was in your original code.