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;
}

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

2 个答案: