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

如何在我的fancybox调用中使用不同的href？

1 个答案: