Fancybox加载动画无法触发。

Question

Fancybox加载动画无法触发。

3

有没有特别的原因使用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'
        });

这可能意味着当fancybox被包含在ajax函数内部时，它的工作不正常，但为什么我不知道。

- jacek_podwysocki

我更新了我的回答，请在您更新问题后进行评论。 - p1100i

你现在看到任何错误吗？也许尝试注释掉.click函数内的所有内容，只留下$.fancybox.showLoading();这一行。会发生什么？ - p1100i

但是，如果您查看Firebug控制台（https://getfirebug.com/），是否会看到任何错误消息（而不是将所有内容都注释掉）？可能是`data`不适用于fancybox，因此会出现错误。或者，如果您在本地运行此操作，则ajax调用将立即完成，因此您不能指望看到加载图像。我已经帮助您解决了核心问题，而这个网站不是为了辅导某人而存在的。 - p1100i

我明白，但是没有js错误，代码只是不显示加载图片。我会尝试重建ajax调用以适应fancybox。无论如何，我很感谢你的帮助 :) - jacek_podwysocki

3个回答

1

你可以这样做。

    <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>

- Sandeep Sherpur

0

问题似乎出在双重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;
});

- jacek_podwysocki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- p1100i · Accepted Answer

在fancybox.net上的apidock有些过时（适用于1.x.y版本）。

因此，如果您使用：

旧版1.x.y，请使用：$.fancybox.showActivity();
新版2.x.y，请使用：$.fancybox.showLoading();

您可以在fancyapss.com找到2.x.y的文档和其他内容。他们维护该网站“因为两个版本（1.x和2.x）具有不同的许可证方案”（感谢@JFK）。您可以报告它，也许你从他们那里得到了一个金星：）

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

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

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