Hey

Here's a two parter that'd i'd love to get some help with.

PART 1 - The site is a wall of photos which display in a random order ever time the page is refreshed.
This is done by a lookup of .jpgs in an /image folder.
My problem is that I've just made a video, and I'm not sure how to include .mp4's.

I've tried adding
HTML Code:
, '.mp4'
to
HTML Code:
picPaths[i] = imgFolder+'pic'+(i+1)+'.jpg';
but it doesnt work

PART 2 I'd love to have each image open on its own separate page when clicked - any ideas?

Any help would be much appreciated.

Here's the link to live site www.rowancorr.com

Regards

James

p.s here's the code of the site...

HTML Code:
<!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" />

<style type="text/css">
.wallPics {
margin: 0px;
padding: 0px;
}
</style> 

<script type="text/javascript">
var totalPics = 5; //total number of pics in the folder
var numRandPics = 3; // number of random pics
var imgFolder = './'; //path to images folder

//load the paths to the pics
var picPaths = new Array();
for(var i=0; i < totalPics; i=i+1) {
picPaths[i] = imgFolder+'pic'+(i+1)+'.jpg';
}

//display the random images
var randNums = new Array();
window.onload=function() {
var randNum;
var picO = new Array(); //store the preloaded images
//generate unique random numbers and display their pics
for(var i=0; i < numRandPics; i=i+1) {
do {
randNum = Math.floor(Math.random()*picPaths.length)
} while(is_in_array(randNum)); //this number already used - so generate another.
randNums.push(randNum); //store the random numbers used so far
//preload the random image
picO[i] = new Image();
picO[i].src = picPaths[randNum];
//create the <img> for this pic
imgElem = document.createElement("img");
imgElem.setAttribute("src", picO[i].src);
imgElem.setAttribute("alt", '');
imgElem.setAttribute("class", 'wallPics');
document.getElementById("container").appendChild(imgElem);
}
}
//------------------------------------
//helper function
function is_in_array(num) {
var isNumInArray = false;
for(var i=0; i < randNums.length; i=i+1) {
if(num == randNums[i]) {
isNumInArray = true;
i = randNums.length;
}
}
return isNumInArray;
}

</script>
</head> 
<body>
<div>
<table width="100%" border="0" cellpadding="0" align="center">
<tr>
<td width="50%">Website</td>
<td><img src="arrow.png" width="40" height="40"/></td>
</tr>
</table>

</div><div id="container"> 

</div> 
</body> 
</html>