如何在fancybox插件的图像下方添加文本？答案

【问题标题】：how to add text below image on fancybox plugin?如何在fancybox插件的图像下方添加文本？
【发布时间】：2013-06-16 22:03:15
【问题描述】：

我正在使用 fancybox 插件 - http://fancyapps.com/fancybox/

我找不到在哪里添加“data-fancybox-title”类，该类假设在灯箱打开时显示标题中的文本。

我阅读了文档，但仍然没有弄明白。

【问题讨论】：

标签： jquery jquery-plugins fancybox fancybox-2

【解决方案1】：

你的 HTML 看起来像这样。

您需要为anchor tag 指定title 属性

<a rel="gallery" title="Lorem ipsum Title" class="fancybox"   
                  href="http://fancyapps.com/fancybox/demo/1_b.jpg">
     <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>

要显示在图片底部试试这个

$(".fancybox").fancybox({
    helpers : {
        title: {
            type: 'inside',
            position: 'bottom'
        }
    }
});

Check Fiddle

【讨论】：

【解决方案2】：

首先，它不是一个 class 而是一个 attribute 并且你将它添加到你的 <a> 标签中，比如

<a data-fancybox-title="Lorem ipsum" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">Open Image</a>

这样做的好处是当您悬停链接时浏览器的工具提示不会显示title。

见JSFIDDLE

请注意，data-* 属性需要 HTML5 DOCTYPE 才能正确验证。

【讨论】：

【解决方案3】：

您将其添加到链接的title 属性中。显然你还没有阅读文档。

<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg" title="Westfield Waterfalls - Middletown CT Lower (Graham_CS)">
    <img src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_m.jpg" alt="" />
</a>

【讨论】：

OP 显然已经阅读了文档，但他/她只是感到困惑，因为 data-* 属性，特别是 data-fancybox-* 属性对许多人来说仍然太新。