Question

fancybox功能是否有任何特殊原因

$.fancybox.showActivity();

在我的脚本中抛出错误？是否需要调用函数的特定顺序？该功能用于在将内容加载到弹出窗口之前显示加载图像。这是我的代码：

$(".info_button").click(function () {

    var pictid_browse = $(this).parent().find('#pictid').val();
    $.fancybox.showActivity();
    $.ajax({
                url: "ajax.html",
                type: "POST",
                async:false,
                data: ({f:"get_info",pictid:pictid_browse}),
                success: function(data){
    $.fancybox({
                    'autoDimensions'    : false,
                'width'                 : 950,
                'height'                : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
                $.fancybox({content:data,'autoDimensions':true,'scrolling':'no',});


    }
    });

    return false;
    });

我得到的错误是：

Uncaught TypeError: Object function () {
        F.open.apply( this, arguments );
    } has no method 'showActivity'

或

TypeError: 'undefined' is not a function (evaluating '$.fancybox.showActivity()')

Fancybox版本：2.1.3

更新

我不知道发生了什么，但如果我放置

$.fancybox.showLoading();

以外的

$(".info_button").click(function () {

然后它会触发并显示动画。但是，一旦我点击了一个类'.info_button'的项目

，我就需要它

以下解决方案似乎也无法解决问题：

    $(".info_button").bind('click', function (e) {
  e.stopPropagation(); e.preventDefault();
}

研究表明，如果删除以下代码，则会触发加载：

 $.fancybox({
content:data,
                'autoDimensions'    : true,
            'width'                 : 'auto',
            'height'                : 'auto',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'scrolling':'no'
        });

这可能意味着当包含在ajax函数中时，fancybox不能正常工作，但为什么 - 我没有线索

Answer 1

fancybox.net上的apidock有点过时了（它是1.x.y）。

所以如果你使用：

您想要的旧1.x.y：$.fancybox.showActivity();
您想要的更新2.x.y：$.fancybox.showLoading();

您可以找到2.x.y fancyapss.com文档和内容的文档。他们保持网站“因为两个版本（1.x和2.x）具有不同的许可方案”（thx到@JFK）。你可以报告它，你从他们那里得到一颗金星：）

========= 问题更新后的答案 ==========

我无法确定没有看到完整的html和js，但你可以尝试：

$(".info_button").bind('click', function (e) {
  e.stopPropagation(); e.preventDefault();
}

Answer 2

你可以这样做

    <style>
     #fancybox-loading{z-index:999999999;}
    </style>



     <script>
                       $.fancybox({
                                'href'          :your_url,  
                                'width'         : 900,
                                'height'        : 600,
                                'scrolling' : 'auto',
                                'type'              : 'iframe',
                                'titleShow'     : false,
                                'onComplete' : function() {
                                    $.fancybox.showActivity();
                                    $('#fancybox-frame').load(function() {
                                        $.fancybox.hideActivity();
                                    });
                                }
                        })
</script>

Answer 3

问题似乎出现在双重fancybox调用中。下面的工作代码：

    $('.info_button').bind('click', function() {
    var pictid_browse = $(this).parent().find('#pictid').val();
    $.fancybox.showLoading();
    $.ajax({
        type:"POST",
        cache:false,
        url:"ajax.html",
        data:({f:"get_info",pictid:pictid_browse}),
        success: function(data) {
            $.fancybox({content:data,'autoDimensions':true,'scrolling':'no'});
        }
    });
    return false;
});

Fancybox加载动画不会触发

3 个答案: