HTML-Fancybox-在图片缩略图下方添加文本

Question

我正在此演示中的网站上使用HTML代码编写简单的图片库： http : //fancyapps.com/fancybox/demo/是否有一种简单的方法可以在每个缩略图下方添加与图片标题不同的文本（单击缩略图后显示）？

非常感谢你。

编辑：感谢您的帮助，但这不是我问的。 无论如何，我的朋友已经解决了。 图像链接和描述都必须在一个父元素中彼此相邻包含，如下所示：

<div>
    <a ... ><img src="image link" alt="First picture" /></a>
    <p>Description</p>
</div>

然后，将div的宽度设置为图像缩略图的宽度，从而使描述“下降”到缩略图下方。

Answer 1

您尝试使用内联选项吗？ 因为它与您想要的非常相似。

链接按钮

<a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>

内联HTML

<div id="inline1" style="width:400px;display: none;">
  <p>Your Main image could be here</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque.</p>
</div>

Answer 2

您可以将文本包装在<p>标记内，并添加一些CSS以修复布局

<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet">
    <img src="1_s.jpg" alt="">
    <p>some text</p>
</a>

CSS：

.fancybox {
    display: inline-block;
    vertical-align: top;
}
.fancybox img {
    display: block;
}