View Full Version : Help with simple slideshow

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";
// 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>

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>

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

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

<script type= "text/javascript">

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


function backward(){
if (which>0){
which-- ;

function forward(){
if (which<photos.length-1){
which++ ;
else window.status='End of gallery';


<input type="button" value="&lt;&lt; Back" name="B2" onClick="backward()"> &nbsp &nbsp <input type="button" value="Next &gt;&gt;" 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>

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.

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

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

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.