0

我正在使用以下代码设置元素的标题属性，并触发 Fancybox：

var caption = jQuery('.fancybox').siblings('p.wp-caption-text').html();

jQuery('.fancybox').attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox();

当页面上只有一个链接时，这很好.fancybox用，但问题当然是我想使用画廊。

上面将变量设置为页面上的第一个实例，因此所有标题都是相同的。

我可以这样做吗？

jQuery('.fancybox').attr({ title:'jQuery(this).siblings('p.wp-caption-text').html();', 'data-fancybox-group': 'gallery1'}).fancybox();

请原谅我缺乏编码技能，但我希望对于更熟悉 jQuery 的人来说这是一个简单的问题。

正在进行的页面：http: //professorleonidas.com/wordpress/formacao/

4

2 回答 2

2

你可以让它更简单：拥有这个 html ...

<a class="fancybox" data-fancybox-group="gallery1" href="image01.jpg">open image 01</a>
<p>I am the caption for the image 01</p>
<a class="fancybox" data-fancybox-group="gallery1" href="image02.jpg">open image 02</a>
<p>I am the caption for the image 02</p>

...使用这个脚本：

jQuery(".fancybox").fancybox({
 beforeShow: function(){
  this.title = $(this.element).next('p').html();
 }
});
于 2012-05-15T22:37:15.803 回答
0

分别适用于每一个：

var caption;
$('.fancybox').each(function(i, elem){
    // Grab the caption text
    caption = $(elem).siblings('p.wp-caption-text').html();

    // Set the attributes and initialize fancybox
    $(elem).attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox();
});

您的问题并不清楚您的 'data-fancybox-group' 属性的意义，但上面的代码将gallery1作为其值应用于所有与 class 匹配的元素fancybox。

干杯

于 2012-05-15T18:07:34.877 回答