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

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 数据属性或有效的属性名称，即不是 "caption".

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

Answer 2

想实现这个目标吗？

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

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

Answer 3

您似乎在调用（提醒）this 对象。您需要像这样使用 title 属性：DEMO FIDDLE

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

How to pass data to fancybox function?

html

javascript

jquery

argument-passing

fancybox