如何让fancybox href动态化？ [英] How do I make fancybox href dynamic?

问题描述

我有以下fancybox代码：

I have the following fancybox code:

$('.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。

the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.

我尝试了几件事，但没有一件有效！

I have tried several things, none of them have worked!

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

这看起来很简单，但任何时候插入'this'或类似的东西都无效。

This seems so simple but anytime I plug in 'this' or similar nothing works.

推荐答案

没有每个（）或点击（）只需添加 beforeLoad 像这样回调你的剧本

Without each() or click() simply add the beforeLoad callback to your script like this

$(".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 +

NOTE: this is for fancybox v2.0.6+

另一方面，更强大的优雅解决方案是使用（HTML5）数据 - * 属性设置 href （设置 id =images / 01.jpg看起来很奇怪）所以你可以这样做：

On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :

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

和你的回调

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

并使用 id 属性是什么意思。

and use the id attribute for what is meant for.

编辑：最好的方法是使用锚中的特殊 data-fancybox-href 属性，如：

EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :

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

并使用一个没有回调的简单脚本，如

and use a simple script without callback like

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

参见 JSFIDDLE

这篇关于如何让fancybox href动态化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！