为什么这个图像是坏的，当加载在线，但当我预览它是好的？

Question

我正在为我的嫂子网站做一个画廊页面，当我通过打开Chrome、Firefox和Explorer中的“.html”文件来查看该网站时，图像加载得非常完美，但当我发布该网站时，它就不再工作了。我复制了临时灯箱的代码，但是我找不到复制它的页面。

以下是html代码：

<!--Lightboxes-->
    <div id="outdoors1" class="outdoor1_content">
        <img src="images/gallery/outdoor/1.jpg" width="600" height="450"/>
        <a href="outdoor.html" onclick ="document.getElementById('outdoors1').style.display='none';document.getElementById('fade').style.display='none'" style="color:#333333"><div id="closetext"><img src="images/gallery/closebutton.png" width="40" height="40"/></a></div></a>
    </div>
<div id="fade" class="black_overlay"></div>
    <div class="outdoor_container">
        <div class="outdoor_container2">
            <div id="outdoor1">
                <img src="images/gallery/outdoor/outdoor1.jpg" width="170" height="170" onmouseover="" style="cursor: pointer;" onclick="document.getElementById('outdoors1').style.display='block';document.getElementById('fade').style.display='block';"/>
            </div>

我只包含了其中一个图像的代码，因为每个图库页面只重复多次。

下面是CSS：

    /*Lightbox content placement*/
    .black_overlay{
        display:none;
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        height:1530px;
        background-color:black;
        z-index:1001;
        -moz-opacity:0.8;
        opacity:.80;
        filter:alpha(opacity=80);
    }
    #closetext{
        position:relative;
        float:left; 
    }

#outdoor1{
    position: relative;
    float: left;
    left: 190px;
    top: 50px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

Answer 1

你的网站加载的很好。您的图像太大了(为300x300px空间加载一个900 to的映像非常低效)，但是在某些页面上图像不会加载错误404，因此您需要检查您的链接是CasE SensiTiVe。

您所拥有的是一些缩略图被定义为工作和存在的images/gallery/outdoor3.jpg，它的大小是1500x1500，所以足够大，但是您的Lightbox全尺寸映像正在寻找不存在的images/gallery/outdoor/3.jpg。你需要重新检查你的链接地址！！

从你的代码：

<!-- Lightbox -->
        <img src="images/gallery/outdoor/1.jpg" width="600" height="450"/>

 ...

<!-- thumbnail -->
    <img src="images/gallery/outdoor/outdoor1.jpg" width="170" height="170" />

您的地址是不同的，它们可能应该是相同的，上面的缩略图是使用1500x1500图像，并显示它的170x170大小，当图像足够大，足以成为照明箱的目标。

此外，我强烈建议取消所有混乱的内联javascript和使用Lightbox 2。