Javascript Image Slider - help?

AnnabelM · May 16th, 2009, 01:39 PM

Hi there,
Hoping someone can offer a bit of help here.

I have one thumbnail that when clicked changes the main image. As it cycles through the images in the gallery things go fine, it gets to the last image and stops. How do I get it to go back to the first image instead of stopping?

(javascript for functions and main image)

<table border="0" cellpadding="0">

<tr>
<td width="100%"><img src="images/Brilliance1.png" width="344" height="502" name="photoslider" /></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0
/*Change the below variables to reference your own photos. You may have as many photos in the slider as you wish*/
photos[0]="images/Brilliance1.png"
photos[1]="images/Brilliance2.png"
photos[2]="images/Brilliance3.png"
photos[3]="images/Brilliance4.png"
photos[4]="images/Brilliance5.png"

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='backward()'
}
</script></p>
</center></div>
</form>
</td>
</tr>
</table>

(and here is the thumbnail button)

<input type="image" src="images/BrillThumb.png" width="88px" height="128px" name="B1" alt="Next Screenshot"
onClick="forward()">

Dubbs · May 18th, 2009, 04:26 PM

You will need an if statement qthat will determine what image number the user is on if the image is the last, then it resets the number back to 1.

You can try replacing:

Code:

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}

With

Code:

function forward(){

//Getting the number of photos in the array
TotalPhotos = count (photos);

if (which<photos.length-1){

//Rotating back to the first image if the user advances on the last image.
  if (which == TotalPhotos){
    which = 0  
   }else{
    which++
  }
   document.images.photoslider.src=photos[which]
}

Something that you may want to do is put your JavaScript in your code's header, instead of in the body of the code. You can use's JavaScripts onClick event to advance or go back in the slide show.