从功能打开fancybox

Question

我试图从我的函数中打开一个fancybox - 简而言之,我的HTML代码看起来像这样;

<a href="#modalMine" onclick="myfunction(this); return false;">
  click
</a>

我的部分功能看起来像这样;

function myfunction(me) {
    $(me).fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true,
    });
}

以上工作在IE浏览器,但不适用于FireFox或Chrome - 任何想法如何解决这个问题？我知道为什么要触发另一个链接,但我希望另一种解决方案是可能的.

Answer 1

如果你想在调用javascript函数时打开一个fancybox.也许在您的代码流中而不是单击的结果.这是你如何做到的:

function openFancybox() {
  $.fancybox({
     'autoScale': true,
     'transitionIn': 'elastic',
     'transitionOut': 'elastic',
     'speedIn': 500,
     'speedOut': 300,
     'autoDimensions': true,
     'centerOnScroll': true,
     'href' : '#contentdiv'
  });
}

这将使用"contentdiv"创建框并打开它.

Answer 2

由于您正在使用jQuery,因此请停止在HTML中绑定事件处理程序,并开始编写不引人注目的JavaScript.

$(document).ready(function ()
{
    function myfunction(me)
    {
        $(me).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true // remove the trailing comma!!
        }).click();
        // fire the click event after initializing fancybox on this element
        // this should open the fancybox
    }

    // use .one() so that the handler is executed at most once per element
    $('a[href=#modalMine]').one('click', function ()
    {
        myfunction(this);
        return false;
    });
});

但是,我没有特别看到在点击时设置fancybox的原因.你可以这样做:

$(document).ready(function ()
{
    function myfunction()
    {
        // note the use of "this" rather than a function argument
        $(this).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true
        });
    }

    $('a[href=#modalMine]').each(myfunction);
});

基本演示(无图像)→

Answer 3

你需要的是:

$.fancybox.open({ .... });

请参阅此处底部的"API方法"部分:

http://fancyapps.com/fancybox/

Answer 4

您根本不必添加自己的click事件处理程序.只需使用fancybox初始化元素:

$(function() {
    $('a[href="#modalMine"]').fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true  // as MattBall already said, remove the comma
    });
});

完成.Fancybox已绑定click打开该框的处理程序.看看HowTo部分.

稍后,如果要以编程方式打开该框,请click在该元素上引发事件:

$('a[href="#modalMine"]').click();

Answer 5

您不必触发点击事件，您可以使用fancybox 类型作为ajax 来完成。  

$.fancybox.open({
      href: "http://........",
      type: 'ajax'
});