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

我在这个演示中使用了一个HTML代码在我的网站上创建一个简单的图像库：有没有一种简单的方法可以在每个缩略图下面添加与图像标题不同的文本（单击缩略图后显示）

多谢各位

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

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

描述

---

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

您可以将文本包装在

标记内，并添加一些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>

---

您是否尝试过使用内联选项？因为它和你想要的很相似

链接按钮

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

你的主要形象可能在这里

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种特殊的临时设施

单个图像的代码如下所示：。我试图添加或标签，然后使用CSS将它们放置在下面，但这破坏了图库结构-每个缩略图开始显示在单独的一行上。谢谢，但这样文本可以作为图像的链接。我希望它要么是一个简单的描述，要么是其他地方的一个链接。几乎可以-只需将这个#inline1 div保持可见，并将其包装在隐藏div中…现在它就可以工作了

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