使用 Fancybox jQuery 插件显示内联内容（图像和文本），显示时动态调整大小
使用 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 中显示具有预设宽度和高度的内联内容，但我希望它根据用户浏览器窗口大小来更改大小。
这可以做到吗？我缺少一些选项吗？
Using Fancybox jQuery plugin.
I've been able to get it to display images fine. And I've been able to get it to display inline content such as a div with some paragraphs inside. With both of these when the content is displayed by fancybox you are able to change your browser window to difference sizes and the fancybox content box also re-sizes nicely.
Now my problem. Instead of just displaying images I need to display an image with 3-4 sentences of text right below the image.
For my attempt to do this I used the inline content method. My inline content was something like this:
<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>
When fancybox displays this content it is always a bit strange. For example, the text will cut off, and scroll bars appear.
It never does what I want, which is to treat the image and text as a unit, and dynamically resize both the image and text, as it does when you are only displaying and image, or only displaying html text.
I've seen examples where you can display inline content in fancybox with a pre-set width and height, but I want it to change size depending on users browser widow size.
Can this be done? Is there some option I'm missing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
fancyBox 在显示之前读取宽度/高度，并且不会预加载图像。由于图像可能稍后加载，因此它们可以展开父级并导致出现滚动条。
最简单的解决方案是设置内联图像的尺寸，例如
fancyBox reads width/height before displaying and it does not preload images. As images may load later, they can expand parent and cause scrollbars to appear.
The simplest solution would be to set dimensions for image inline, like
<img src=".." width="200" height="100" />