Failed to load resource when on server?
<p>I have an example here to illustrate my problem.</p>

<p><a href="http://www.ttmt.org.uk/forum/k/" rel="nofollow">http://www.ttmt.org.uk/forum/k/</a></p>

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

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;index&lt;/title&gt;

      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;

      &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"&gt;

      &lt;style type="text/css"&gt;
        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%;
        }

      &lt;/style&gt;

      &lt;/head&gt;

    &lt;body&gt;

        &lt;ul id="gallery"&gt;
          &lt;li&gt;&lt;a href="images/car01.jpg" class="lightbox_trigger"&gt;&lt;img src="images/car01.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/car02.jpg" class="lightbox_trigger"&gt;&lt;img src="images/car02.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/car03.jpg" class="lightbox_trigger"&gt;&lt;img src="images/car03.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/car04.jpg" class="lightbox_trigger"&gt;&lt;img src="images/car04.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/car05.jpg" class="lightbox_trigger"&gt;&lt;img src="images/car05.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/car06.jpg" class="lightbox_trigger"&gt;&lt;img src="images/car06.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/car07.jpg" class="lightbox_trigger"&gt;&lt;img src="images/car07.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

    &lt;script&gt;

      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 &gt; 0) {
                $('#content').html('&lt;img src="' + image_href + '" /&gt;');
                $('#lightbox').fadeIn('1000');
            }
            else { 
                var lightbox = 
                '&lt;div id="lightbox"&gt;' +
                    '&lt;div id="content"&gt;' + 
                        '&lt;img src="' + image_href +'" /&gt;' +
                    '&lt;/div&gt;' +  
                '&lt;/div&gt;';
                $('body').append(lightbox);
            }

        });

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


      });
      &lt;/script&gt;
    &lt;/body&gt;

    &lt;/html&gt;
</code></pre>

<p>Everything is working here but I wanted the images to be random.</p>

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

<pre><code>    &lt;script type="text/javascript"&gt;

      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&lt;numImages; i++){
          var ranNum = Math.floor(Math.random()*images_Arr.length);
          var img = images_Arr[ranNum];
          document.write("&lt;li&gt;&lt;a href=" +img+ " class='lightbox_trigger'&gt;&lt;img src=" +img+ "/&gt;&lt;/a&gt;&lt;/li&gt;");
          images_Arr.splice(ranNum,1);
        }
      }    

    &lt;/script&gt;
</code></pre>

<p><a href="http://www.ttmt.org.uk/forum/k/index1.html" rel="nofollow">http://www.ttmt.org.uk/forum/k/index1.html</a></p>

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

<p>Locally this works fine.</p>

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

<p>Can anyone explain why it's working locally but not on a server?</p>

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;index&lt;/title&gt;

      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;

      &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"&gt;

      &lt;style type="text/css"&gt;
        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%;
        }

      &lt;/style&gt;


      &lt;script type="text/javascript"&gt;

        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&lt;numImages; i++){
            var ranNum = Math.floor(Math.random()*images_Arr.length);
            var img = images_Arr[ranNum];
            document.write("&lt;li&gt;&lt;a href=" +img+ " class='lightbox_trigger'&gt;&lt;img src=" +img+ "/&gt;&lt;/a&gt;&lt;/li&gt;");
            images_Arr.splice(ranNum,1);
          }
        }    

      &lt;/script&gt;

      &lt;/head&gt;

    &lt;body&gt;
        &lt;div id="header"&gt;


        &lt;/div&gt;

        &lt;ul id="gallery"&gt;
          &lt;script type="text/javascript"&gt;
            window.onload = firstImg();
          &lt;/script&gt;
        &lt;/ul&gt;

    &lt;script&gt;

      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 &gt; 0) {
                $('#content').html('&lt;img src="' + image_href + '" /&gt;');
                $('#lightbox').fadeIn('1000');
            }
            else { 
                var lightbox = 
                '&lt;div id="lightbox"&gt;' +
                    '&lt;p&gt;Click to close&lt;/p&gt;' +
                    '&lt;div id="content"&gt;' + 
                        '&lt;img src="' + image_href +'" /&gt;' +
                    '&lt;/div&gt;' +  
                '&lt;/div&gt;';
                $('body').append(lightbox);
            }

        });

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


      });
      &lt;/script&gt;
    &lt;/body&gt;

    &lt;/html&gt;
</code></pre>
