web-dev-qa-db-ja.com

fancybox hrefを動的にするにはどうすればよいですか？

私は次のファンシーボックスコードを持っています：

$('.fancybox').fancybox({
             'autoScale' : false,
             'href' : $('.fancybox').attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,

//some other callbacks etc

問題は、ページに20の異なるAタグIDがあり、fancybox href属性がクリックされた要素、つまりイベントをトリガーした要素のIDを取得することです。

私はいくつかのことを試しましたが、どれもうまくいきませんでした！

'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),

これはとても単純に思えますが、「これ」または同様のものをプラグインすると、何も機能しません。

javascriptjqueryfancyboxfancybox-2
7
absentx

each()またはclick()がない場合は、次のようにスクリプトにbeforeLoadコールバックを追加するだけです。

$(".fancybox").fancybox({
    autoScale: false,
    // href : $('.fancybox').attr('id'), // don't need this
    type: 'iframe',
    padding: 0,
    closeClick: false,
    // other options
    beforeLoad: function () {
        var url = $(this.element).attr("id");
        this.href = url
    }
}); // fancybox

[〜＃〜]注[〜＃〜]：これはfancybox v2.0.6 +用です

一方、よりエレガントなソリューションは、（HTML5）data-*属性を使用してhref（it id="images/01.jpg"を設定すると奇妙に見えるでしょう）そうしないと：

<a href="#" id="id01" data-href="images/01.jpg" ...

とあなたのコールバック

beforeLoad: function(){
 var url= $(this.element).data("href");
 this.href = url
}

目的にはid属性を使用します。

[〜＃〜] edit [〜＃〜]：アンカーで次のような特別なdata-fancybox-href属性を使用するのが最善です。

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery"  href="javascript:;">jsfiddle</a>

のようなコールバックのない単純なスクリプトを使用します

$(".fancybox").fancybox({
    // API options 
    autoScale: false,
    type: 'iframe',
    padding: 0,
    closeClick: false
});

見る JSFIDDLE

31
JFK

.fancyboxアイテムのコレクションを繰り返し処理し、IDを取得できます。

$('.fancybox').each(function(){
    $(this).fancybox({
             'autoScale' : false,
             'href' : $(this).attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
             //some other callbacks etc
    });
});
4
Mark Coleman

これを試して：

$(".fancybox").click(function(){
    var url = $(this).attr('id');
    $.fancybox({
         'autoScale' : false,
         'href' : url ,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
         //some other callbacks etc
    });
})
3
RAMe0

これを試して

$('.fancybox').each( function() {
    var elem = jQuery(this);
    elem.fancybox({
             'autoScale' : false,
             'href' : elem.attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
          });
    }
);
1
epascarello

これを試しましたか？

$('.fancybox').each(function(){
    $(this).fancybox({
         'autoScale' : false,
         'href' : this.id,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
          //some other callbacks etc
    });
});
1
Engineer