0

我这里有一个例子来说明我的问题。

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

1 回答 1

4

因为在这一行：

 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-14T16:07:36.263 回答