如何使 fancybox href 动态化？答案

【问题标题】：How do I make fancybox href dynamic?如何使 fancybox href 动态化？
【发布时间】：2012-07-22 00:35:35
【问题描述】：

我有以下花式框代码：

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

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

【问题讨论】：

使用id 属性和href 属性有什么区别？ ... 让 html 做得更好（不要过度使用 jQuery）你可以在你的 <a> 标签中拥有 20 个不同的 ID，但它们都可以共享相同的 class="fancybox"，这样你的上面的脚本就可以无缝运行，而且不会使事情变得过于复杂.
在我之前的评论之后，您只需删除href API 选项，fancybox 将从<a> 标记中的href 属性中获取它。
虽然我的 href 是非标准的，但客户端不希望页面上有 20 个不同的链接，所以我在其中使用带有“#”的 href，并且在代码中的某个时刻我需要 JS 发送它到我存储在 id 中的真实 href。接受建议！

标签： javascript jquery fancybox fancybox-2

【解决方案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

【讨论】：

啊完美...我在 beforeload 回调中尝试了一些东西，但我一定是有点偏离了。再次感谢这完美的工作，你帮助我完成了很多这个花哨的东西！
谢谢。我需要在我的 url 中附加一个 ajax 标志，这样我就可以提供一个 chromeless modal 模板，同时为爬虫、屏幕阅读器和 在新窗口中打开点击保持 url 的完整。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

试试这个

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

【讨论】：

【解决方案5】：

你试过了吗？

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

【讨论】：