Question

我正在为我的嫂子网站制作一个画廊页面，当我查看网站时，只需打开＆＃39; .html＆＃39; Chrome，Firefox和资源管理器中的文件图像加载完美，但是当我发布网站时它不再有效。我复制了一个临时灯箱的代码，但我找不到我复制它的页面。

这是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

您的网站加载正常。您的图像太大（为300x300像素空间加载900Kb图像效率非常低）但在某些页面上图像无法加载 - 错误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和using Lightbox 2。

为什么这个图像在网上加载时会被破坏，但是当我预览它时很好？

1 个答案: