0

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

非常感谢。

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

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

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

4

2 回答 2

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>
于 2013-11-08T10:10:12.103 回答
0

您可以将文本包装在<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;
}
于 2013-11-08T09:45:08.473 回答