0

次のコードを使用して、要素のタイトル属性を設定し、Fancybox を起動しています。

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

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

ページにリンクが 1 つしかない場合、これは問題なく機能.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' 属性のポイントはあなたの質問からは明らかではありませんが、上記のコードはgallery1class で一致するすべての要素にその値として適用されますfancybox。

乾杯

于 2012-05-15T18:07:34.877 に答える