Failed to load resource when on server?

Hi all

I have an example here to illustrate my problem.

http://www.ttmt.org.uk/forum/k/

It just a line of images, when you click them a bigger image is shown on top.

Code:
<!DOCTYPE html>
<html>
  <head>
  <title>index</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
  
  <style type="text/css">
    ul#gallery {
    	margin:100px 0 0 0;
    	background:#333;
    	float:left;
    	height:550px;
    	margin-right:-20000px;
    }
    ul#gallery li{
      display:inline;
    }
    ul#gallery li img{
      float:left;
      opacity:0.5;
      height:100%;
    }
    #header{
      position:fixed;
      margin:20px 0 0 20px;
    }
    #header img,
    #header ul#info{
      float:left;
    }
    #header ul#info{
      margin:5px 0 0 50px;
    }
    #header ul#info li{
      color:#aaa;
      font:.95em/1.5em Helvetica, sans-serif;
    }
    #header ul#info li a{
      color:#aaa;
      text-decoration:none;
    }
    #header ul#info li a:hover{
      color:#333;
      color:orange;
    }
    #header select{
      margin:20px 0 0 50px;
    }
    #lightbox {
    	position:fixed; 
    	top:0; 
    	left:0; 
    	width:100%; 
    	height:100%; 
    	background:url(overlay.png) repeat; 
    	text-align:center;
    }
    #lightbox p {
    	text-align:right; 
    	color:#fff; 
    	margin-right:20px; 
    	font-size:12px; 
    }
    #lightbox img {
    	box-shadow:0 0 15px #111;
    	-webkit-box-shadow:0 0 15px #111;
    	-moz-box-shadow:0 0 15px #111;
    	max-width:940px;
    }
    #content img{
      height:90%;
      max-width:100%;
    }
    
  </style>

  </head>
  
<body>
        
    <ul id="gallery">
      <li><a href="images/car01.jpg" class="lightbox_trigger"><img src="images/car01.jpg" alt="" /></a></li>
      <li><a href="images/car02.jpg" class="lightbox_trigger"><img src="images/car02.jpg" alt="" /></a></li>
      <li><a href="images/car03.jpg" class="lightbox_trigger"><img src="images/car03.jpg" alt="" /></a></li>
      <li><a href="images/car04.jpg" class="lightbox_trigger"><img src="images/car04.jpg" alt="" /></a></li>
      <li><a href="images/car05.jpg" class="lightbox_trigger"><img src="images/car05.jpg" alt="" /></a></li>
      <li><a href="images/car06.jpg" class="lightbox_trigger"><img src="images/car06.jpg" alt="" /></a></li>
      <li><a href="images/car07.jpg" class="lightbox_trigger"><img src="images/car07.jpg" alt="" /></a></li>
    </ul>
    
<script>

  jQuery(document).ready(function($) {
    
    $('#gallery img').hover(function(){
      $(this).css('opacity',1);
    })
    $('#gallery img').hover(
      function () {
        $(this).css('opacity',1)
      }, 
      function () {
        $(this).css('opacity',.5);
      }
    );
    
    
  	$('.lightbox_trigger').click(function(e) {
  		e.preventDefault();
  		var image_href = $(this).attr("href");
  		if ($('#lightbox').length > 0) {
  			$('#content').html('<img src="' + image_href + '" />');
  			$('#lightbox').fadeIn('1000');
  		}
  		else { 
  			var lightbox = 
  			'<div id="lightbox">' +
  				'<div id="content">' + 
  					'<img src="' + image_href +'" />' +
  				'</div>' +	
  			'</div>';
  			$('body').append(lightbox);
  		}

  	});

  	$('#lightbox').live('click', function() { 
  		$('#lightbox').hide();
  	});
  	

  });
  </script>
</body>

</html>

Everything is working here but I wanted the images to be random.

I have an example here where the images are added randomly from an array using this javascript

Code:
  <script type="text/javascript">
  
    var numImages = 6;
  
    var images_Arr = ['images/car01.jpg','images/car02.jpg','images/car03.jpg','images/car04.jpg','images/car05.jpg',
    'images/car06.jpg','images/car07.jpg','images/car08.jpg','images/car09.jpg','images/car10.jpg']
    
    function firstImg(){
      for(i=1; i<numImages; i++){
        var ranNum = Math.floor(Math.random()*images_Arr.length);
        var img = images_Arr[ranNum];
        document.write("<li><a href=" +img+ " class='lightbox_trigger'><img src=" +img+ "/></a></li>");
        images_Arr.splice(ranNum,1);
      }
    }    
    
  </script>

http://www.ttmt.org.uk/forum/k/index1.html

In this example the images don't load but if you click the blocks the larger image loads.

Locally this works fine.

The Error Console in Safari says - Failed to load resource: the server responded with a status of 404 (Not Found)

Can anyone see why it's working locally but not on a server?

Code:
<!DOCTYPE html>
<html>
  <head>
  <title>index</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
  
  <style type="text/css">
    ul#gallery {
    	margin:100px 0 0 0;
    	background:#333;
    	float:left;
    	height:550px;
    	margin-right:-20000px;
    }
    ul#gallery li{
      display:inline;
    }
    ul#gallery li img{
      float:left;
      opacity:0.5;
      height:100%;
    }
    #header{
      position:fixed;
      margin:20px 0 0 20px;
    }
    #header img,
    #header ul#info{
      float:left;
    }
    #header ul#info{
      margin:5px 0 0 50px;
    }
    #header ul#info li{
      color:#aaa;
      font:.95em/1.5em Helvetica, sans-serif;
    }
    #header ul#info li a{
      color:#aaa;
      text-decoration:none;
    }
    #header ul#info li a:hover{
      color:#333;
      color:orange;
    }
    #header select{
      margin:20px 0 0 50px;
    }
    #lightbox {
    	position:fixed; 
    	top:0; 
    	left:0; 
    	width:100%; 
    	height:100%; 
    	background:url(overlay.png) repeat; 
    	text-align:center;
    }
    #lightbox p {
    	text-align:right; 
    	color:#fff; 
    	margin-right:20px; 
    	font-size:12px; 
    }
    #lightbox img {
    	box-shadow:0 0 15px #111;
    	-webkit-box-shadow:0 0 15px #111;
    	-moz-box-shadow:0 0 15px #111;
    	max-width:940px;
    }
    #content img{
      height:90%;
      max-width:100%;
    }
    
  </style>
  
  
  <script type="text/javascript">
  
    var numImages = 6;
  
    var images_Arr = ['images/car01.jpg','images/car02.jpg','images/car03.jpg','images/car04.jpg','images/car05.jpg',
    'images/car06.jpg','images/car07.jpg','images/car08.jpg','images/car09.jpg','images/car10.jpg']
    
    function firstImg(){
      for(i=1; i<numImages; i++){
        var ranNum = Math.floor(Math.random()*images_Arr.length);
        var img = images_Arr[ranNum];
        document.write("<li><a href=" +img+ " class='lightbox_trigger'><img src=" +img+ "/></a></li>");
        images_Arr.splice(ranNum,1);
      }
    }    
    
  </script>

  </head>
  
<body>
    <div id="header">
      
      
    </div>
        
    <ul id="gallery">
      <script type="text/javascript">
        window.onload = firstImg();
      </script>
    </ul>
    
<script>

  jQuery(document).ready(function($) {
    
    $('#gallery img').hover(function(){
      $(this).css('opacity',1);
    })
    $('#gallery img').hover(
      function () {
        $(this).css('opacity',1)
      }, 
      function () {
        $(this).css('opacity',.5);
      }
    );
    
    
  	$('.lightbox_trigger').click(function(e) {
  		e.preventDefault();
  		var image_href = $(this).attr("href");
  		if ($('#lightbox').length > 0) {
  			$('#content').html('<img src="' + image_href + '" />');
  			$('#lightbox').fadeIn('1000');
  		}
  		else { 
  			var lightbox = 
  			'<div id="lightbox">' +
  				'<p>Click to close</p>' +
  				'<div id="content">' + 
  					'<img src="' + image_href +'" />' +
  				'</div>' +	
  			'</div>';
  			$('body').append(lightbox);
  		}

  	});

  	$('#lightbox').live('click', function() { 
  		$('#lightbox').hide();
  	});
  	

  });
  </script>
</body>

</html>