Question

使用Fancybox jQuery插件。

我已经能够让它显示图像。而且我已经能够显示内联内容，例如带有一些段落的div。通过fancybox显示内容时，您可以将浏览器窗口更改为不同的大小，而fancybox内容框也可以很好地重新调整大小。

现在我的问题。我不需要只显示图像，而是需要在图像正下方显示3-4个文本句子的图像。

为了尝试这样做，我使用了内联内容方法。我的内联内容是这样的：

<div style="display: none">
    <div id="content-div">
        <img src="images/product1.jpg" alt="" />
        <p>My several lines of text would go here.</p>
    </div>
</div>

当fancybox显示此内容时，它总是有点奇怪。例如，文本将被截断，并出现滚动条。它永远不会做我想要的，即将图像和文本视为一个单元，并动态调整图像和文本的大小，就像你只显示和图像，或只显示HTML文本一样。

我见过一些示例，您可以在fancybox中显示具有预设宽度和高度的内嵌内容，但我希望它根据用户浏览器的窗口大小来更改大小。

可以这样做吗？我有什么选择吗？

Answer 1

fancyBox在显示之前读取宽度/高度，它不会预加载图像。由于图像可能会在以后加载，因此可以展开父级并导致滚动条出现。最简单的解决方案是设置内嵌图像的尺寸，如<img src=".." width="200" height="100" />

使用Fancybox jQuery插件显示在显示时动态调整大小的内嵌内容（图像和文本）

1 个答案: