如何在Fancybox插件中添加图像下方的文本？

Question

我正在使用fancybox插件 - http://fancyapps.com/fancybox/ 我找不到添加"data-fancybox-title"类的位置，该类应该在打开灯箱时显示图像下方的标题文本。

我已经阅读了文档，但仍然无法弄清楚。

- Lir An

Answer 1

你的HTML代码应该类似于这样...

你需要为锚点标签指定"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'
        }
    }
});

检查 Fiddle

- Sushanth --

Answer 2

首先，它不是一个类，而是一个属性，您可以在<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才能正确验证。

- JFK

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

- silkfire

---

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