Question

我有一个Fancybox图库，它使用以下html从一个图像链接一个图库，其中包含4个图像：

<div id="gallery">
    <a class="fancybox1" href="exampleimages/a1b.jpg"><img src="exampleimages/a1s.jpg" alt=""/></a>

    <div class="hidden">
    <a class="fancybox1" href="exampleimages/a2b.jpg"><img src="exampleimages/a2s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a3b.jpg"><img src="exampleimages/a3s.jpg" alt=""/></a>
    <a class="fancybox1" href="exampleimages/a4b.jpg"><img src="exampleimages/a4s.jpg" alt=""/></a>
    </div>
</div>

href图像是显示的大图像，src图像是缩略图。我知道如何在用于调用fancybox的javascript中设置缩略图图像大小：

$(document).ready(function() {
$(".fancybox1")
    .attr('rel', 'gallery')
    .fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
                       },
            thumbs  : {
                width   : 75,
                height  : 75
                        }
                    },

        padding : 0
    });//endfancy1

但是我不知道如何更改显示图像的大小。这样做更好吗

按照缩略图在javascript中使用1 /。

CSS中的

2 /（如果是这样，我如何链接到这个特定的图像？）

3 /只需将实际图像文件设置为正确的大小，然后再进入网页，这样网页就可以不加修改地显示它。

以上这些方法，一般来说是最佳做法，而不仅仅是Fancybox？我从来没有真正理解网页中的图像大小 - 但我认为如果CSS或javascript要调整图像大小，则必须加载整个（有时非常大）文件大小然后调整大小，而如果图像小于从它开始将是一个更小，更快的下载。正确??

Answer 1

第3个是要走的路，假设你没有做一些疯狂的服务器端预处理来实现它。如果您知道图像为75x75，请将它们保存为75x75图像。

如果以上内容不适用，我个人更喜欢CSS：在设置大小之前，您不必等待DOM对象准备就绪，并且客户端调试会更容易一些。< / p>

.gallery .fancybox1 img
{
    width: 75px;
    height: 75px;
}

您对图像尺寸的所有假设都是绝对正确的。您还将处理跨浏览器的图像缩放不一致性。理想的解决方案是只显示与原始图像完全相同的尺寸。当然，这并不总是可行/现实（流畅的布局设计等）。

但是，此时此刻。让它工作，把一切都搞定，然后再进行优化。除非您正在使用healthcare.gov，否则这根本不是正确的方法;）

设置Fancybox图像大小

1 个答案: