如何在fancybox通话中使用不同的href？

Question

我有以下fancybox电话：

  $(document).ready(function() {
        $('.fancybox').fancybox({
            'closeClick'  : false,
            'scrolling'   : 'no',
             afterShow: function(){
            //do some stuff  
             }
        });
    });

对以下方面的影响：

<a href="example_url" class="fancybox fancybox.iframe"><img src="example"/></a>

我想做的就是将href添加到fancybox调用中，这样我就可以在HTML的href中简单地添加一个哈希标签。

  $(document).ready(function() {
        $('.fancybox').fancybox({
            'closeClick'  : false,
            'scrolling'   : 'no',
                'href'        : 'example_url',
             afterShow: function(){
            //do some stuff  
             }
        });
    });

但是我需要更进一步。 可以说我要考虑三个不同的项目：

<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-1
<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-2
<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-3

我知道我需要给每个人提供某种类型的唯一标识符。 此外，我意识到我可以为每个呼叫进行三个不同的fancybox调用，但是我认为这样做的更好方法是：

  $(document).ready(function() {
        $('.fancybox').fancybox({
                //do some processing here to find out what triggered the fancybox, then set a variable with the proper href based on that input. Could have a switch statement etc
            'closeClick'  : false,
            'scrolling'   : 'no',
                'href'        : //variable holding proper url
             afterShow: function(){
            //do some stuff  
             }
        });
    });

但是我很难让它真正实现我的设想！

Answer 1

编辑：我应该说我的示例正在使用Fancybox 2，它可能在早期版本中不起作用

您可以使链接带有data-href属性，您可以在fancybox调用中使用该属性，如下所示（小提琴： http : //jsfiddle.net/xEtZ8/ ）

<a class="fancybox" data-href="http://fiddle.jshell.net/YtwCt/show/" href="#">URL 1</a>

<a class="fancybox" data-href="http://doc.jsfiddle.net/use/echo.html" href="#">URL 2</a>

和JS

$(function() {
    $('.fancybox').fancybox({
        type: 'iframe',
        beforeLoad: function() {
            this.href = this.element.data('href');
        }
    });
});