如何在fancybox插件上添加图像下面的文本

Question

我使用的是fancybox插件- http://fancyapps.com/fancybox/

我找不到在哪里添加类"data-fancybox-title"，假设显示的文本是在图像下的标题当灯箱打开。

我看了文档，但还是没看懂。

Answer 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'
        }
    }
});

检查小提琴

Answer 2

首先，它不是一个类而是一个属性你可以把它添加到你的<a>标签中，比如

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

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

<<p>看到strong> JSFIDDLE

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

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>