如何让fancybox href动态化？

Question

我有以下fancybox代码:

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

//some other callbacks etc

问题是我在页面上有20个不同的A标签id,我希望fancybox href属性获取被点击元素的id,即触发事件的id.

我尝试了几件事,但都没有奏效!

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

这看起来很简单,但任何时候我插入'this'或类似的东西都没有用.

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