Question

我写了以下代码：

html：

 <a class="fancybox" caption="This is 1st title" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-page1 alt=""/></a>


 <a class="fancybox" caption="This is 2nd title" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" data-page2 alt=""/></a>

JS：

$(".fancybox")
    .fancybox({
         beforeLoad: function () {
             alert(this);
              this.title = $(this.element).attr('caption');
    }
});

我希望在图像显示之前显示从数据属性中获取的文本（page1或page2）。

请帮助修改我的代码。

http://jsfiddle.net/9GwUu/25/

Answer 1

喜欢这个吗？

<a class="fancybox" caption="This is 1st title" 
href="http://fancyapps.com/fancybox/demo/1_b.jpg">
    <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-page="1" alt=""/> 
</a>

beforeLoad: function () {
    console.log(this.element.find('img').data('page')); 
    console.log(this.element.attr('caption'));
    // etc...
}

该元素已经是一个jQuery对象，因此无需将其传递给jQuery函数。另外，我建议您使用html5数据属性或有效的属性名称，即不使用＆＃34;标题＆＃34;。

http://jsfiddle.net/9GwUu/27/

Answer 2

想要实现这个目标吗？

http://jsfiddle.net/9GwUu/30/

alert($(this.element).attr('caption'));

Answer 3

好像你正在调用（警告）this对象。您需要使用title属性，如下所示： DEMO FIDDLE

如何将数据传递给fancybox函数？

3 个答案: