javascript

New to javascript

[Atilla]

Hi, I admit I new to javascript, but found what I thought was a neat bit of code for a picture gallery. After designing all the pages setting the external javascript files I found it would only show four images, and nothing I seem to be able to do will make it go beyond four.

This is the code

<!-- Paste this code into an external JavaScript file named: nextPrevious.js -->

/* This script and many more are available free online at
The JavaScript Source :: [javascript.internet.com...]
Created by: Solomon, the Sleuth :: [freewebs.com...] */

// List image names without extension
var myImg= new Array(3)
myImg[0]= "pix1";
myImg[1]= "pix2";
myImg[2]= "pix3";
myImg[3]= "pix4";

// Tell browser where to find the image
myImgSrc = "/img";

// Tell browser the type of file
myImgEnd = ".jpg"

var i = 0;

// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Create link function to switch image forward
function next(){
if(i>2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Load function after page loads
window.onload=loadImg;

<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->

<script type="text/javascript" src="nextPrevious.js"></script>

<!-- Paste this code into the BODY section of your HTML document -->

<div style="width:400px; height:300px; margin: auto;">
<img name="imgSrc" id="imgSrc">
</div>
<!-- Controller -->
<table width="400" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onClick="prev();"> «</a></td>
<td align="center"><a href="#" onClick="next();"> » </a></td>
</tr>
</table>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

If I add an additional image say

myImg[4]= "pix5";

It won't show,

I have tried changing
var myImg= new Array(3) to var myImg= new Array(4)

which is the only thing I can see that mentions any number it has no effect. Now I know it is my lack of knowledge but I'm puzzled.

Being developed on a Mac, Leopard and tested in Safari, Firefox and Opera.

Many thanks

[piatkow]

I am no js expert but I would have done exactly the same.

It could be that the old .js file had been cached and you simply weren't executing the changes.

[Atilla]

Thanks, tried three browsers, cleared all caches etc., no avail.
I will try replacing all the images in case something odd going on there.

[daveVk]

// Create link function to switch image forward
function next(){
if(i>2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

The red number needs to be 1 less than last index used here

myImg[3]= "pix4";

UG

[piatkow]

Which shows how important it is to comment your code.

[Atilla]

Thank you all very much, it works now.