3

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

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

我阅读了文档，但我仍然没有弄清楚。

4

3 回答 3

1

你的 HTML 看起来像这样..

您需要title为anchor tag

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

检查小提琴

于 2013-06-16T22:14:16.563 回答
1

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

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

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

见JSFIDDLE

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

于 2013-06-17T07:07:26.140 回答
0

您将其添加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>
于 2013-06-16T22:13:10.437 回答