Javascript 我如何使fancybox href动态？

How do I make fancybox href dynamic?

提问by absentx

I have the following fancybox code:

我有以下fancybox代码：

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

//some other callbacks etc

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.

问题是我在页面上有 20 个不同的 A 标记 ID，并且我希望fancybox href 属性采用被点击元素的 ID，即触发事件的那个。

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

我已经尝试了几件事，但都没有奏效！

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

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

这看起来很简单，但任何时候我插入“这个”或类似的东西都不起作用。

回答by JFK

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

没有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

NOTE: this is for fancybox v2.0.6+

注意：这是用于fancybox v2.0.6+

On the other hand, a more elegantsolution 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 :

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

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

and your callback

和你的回调

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

and use the idattribute for what is meant for.

并将该id属性用于其用途。

---

---

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

编辑：最好是data-fancybox-href在您的锚点中使用特殊属性，例如：

<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
});

See JSFIDDLE

看 JSFIDDLE

回答by Mark Coleman

You can iterate over your collection of .fancyboxitems and grab the id.

您可以遍历您的.fancybox项目集合并获取 id。

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

回答by RAMe0

Try this:

尝试这个：

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

回答by Engineer

Have you tried this?

你试过这个吗？

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

回答by epascarello

Try this

尝试这个

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