如何使的fancybox的href动态？(How do I make fancybox href d

我有以下的fancybox代码：

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

//some other callbacks etc

问题是我在网页上有二十个不同的标签ID的，我想的fancybox href属性取单击元素的ID，即触发事件的一个。

我已经试过几件事情，他们都没有工作！

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

这看起来很简单，但只要我插上“这个”或类似的没有什么作品。

Answer 1:

如果没有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 （它看起来怪异的设置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什么是为属性。

---

编辑 ：最好是使用特殊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

Answer 2:

可以遍历您的收藏.fancybox项目，抢ID。

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

Answer 3:

试试这个：

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

Answer 4:

试试这个

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

Answer 5:

您是否尝试过这个？

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

文章来源: How do I make fancybox href dynamic?