Create your own image gallery using Javascript

So the aim of this script is to change the main image by clicking on the thumbnails. In the JavaScript section there is:
An Array called imgSelect - this contains the names of the main images. (The thumbnails you code them in using html)
The function called slideshow takes 2 parameters imgRef and increaseBy
imgRef is used to identify if a person click on a specific image, this would by 0
1 is for if a they want to go to the next or previous image.
You call this function in the HTML using an onclick event, which will be shown.
If you look through the code there are comments explaining what each bit does.

/*******************JavaScript Below****************************/
var picPos = 0; //We use this varible to access the image we want from the array
var imgSelect = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg"); //this is the array which holds the reference to the main image.
var imgNum = imgSelect.length; //We find out what the array length is, so how many images.
function slideShow(imgRef, increaseBy){ //The function takes 2 parameters
var findImage = document.getElementById("ph_slider"); //this refers to the images id - so make sure you give your image an id.
if(imgRef == 1){ //looks at the first parameter "imgRef" is it equal to 1
  	picPos = picPos + parseFloat(increaseBy); //this takes the current picPos and adds the second parameter which will be 1 or -1. So Next or Previou. "parseFloat();" is explained in notes below.
  	if (picPos > imgNum){ //these two if statements loops through the images, so prevents entering minus figures and not exceeding the maximum number of images.
  		picPos = 0;
	}
    if(picPos < 0){
        picPos = imgNum;
    }
}else{ //if the "imgRef" = 0 this if for someone clicking on a thumbnail and makes picPos equal to "inceaseBy", which is the position of the image in the array.
	picPos = increaseBy;
}
	findImage.src= imgSelect[picPos]; //changes source of image. So you have the "findImage" varible dot src (which refers to source) that equal the array "imgSelect[picPos]". Then you got square brackets to access array and you use the value of picPos to select an image from it.
}
/*******************End of JavaScript****************************/

/*******************HTML CODE Below****************************/
<!--This is the main image, with the id in place-->
<img src="assets/photoG/img1.jpg" id="ph_slider" alt="Large image" />
<!--these two line are for the next and previous links. They have the onclick event in them with the function written inside the quotation mark. Notice the 1 is used in the "imgRef" parameter. Also you will notice the "return false" this prevents the page from reloading and jumping to the top.-->
<a href="#" onclick="slideShow(1,-1);return false;">Previous</a>
<a href="#" onclick="slideShow(1,1);return false;">Next</a>
<!--this is an thumbnail link, with the onclick event and the "imgReg" parameter set to 0 so you jump straight to he corresponding image in the array.-->
<a href="#" onclick="slideShow(0,3);return false;"><img src="#" alt="Icon - click to enlarge" /></a>
/*******************End OF HTML CODE**************************/

Notes

* Remember with Arrays the count starts from 0 so it 0, 1, 2, 3 four items but to access the last item in the array you would use 3.
* When you use the "length" method (imgSelect.length) to find the length of the array - in this case it would return 4. So what you must remember is that this method returns the number of items and not the value of the last array index.
* parseFloat() makes sure the value is a number and not a string, because when you pass a number from the event in html it is in string format. Another way to make sure the value is in number format is to create a varible and assign the parameter to it, as javascript will convert it into number format.