在服务器上无法加载资源？

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

它只是图像的一条线，当你点击它们更大的图像则显示在顶部。

<!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>

一切都在这里工作，但我希望图像是随机的。

我这里有一个例子，其中图像随机从阵列使用这个JavaScript

<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

在这个例子中，在没有加载图像，但如果你点击了块大加图像加载。

本地工作正常。

Safari中的错误控制台说 - 无法加载资源：服务器与404状态响应（未找到）

任何人都可以解释为什么它的服务器上本地工作但不？

<!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>

来源

2012-08-14 ttmt

，因为在这条线：

document.write("<li><a href=" +img+ " class='lightbox_trigger'><img src=" +img+ "/></a></li>");

你忘了图像源的正确串端接，使用此：

document.write("<li><a href= '" +img+ "' class='lightbox_trigger'><img src= '" +img+ "' /></a></li>");

来源

2012-08-14 16:07:36 gabtub

感谢，多数民众赞成做了 – ttmt 2012-08-14 16:20:54

我很高兴我能帮助你，但如果你满意的话，可以把这个答案标记为已接受。 – gabtub 2012-08-14 16:28:22

在服务器上无法加载资源？

回答

相关问题