的fancybox加載動畫不會觸發

有原因的fancybox功能的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

UPDATE：

我不知道是怎麼回事，但如果我放在

$.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不正常工作，但是爲什麼，我不知道

來源

2012-11-10 jacek_podwysocki

更新我的回答，請它，如果你更新你的問題發表評論。 – p1100i

你現在是否看到任何類型的錯誤？也許嘗試註釋掉.click函數中的所有內容，只留下'$ .fancybox.showLoading（）;'行。怎麼了？ – p1100i

但是，如果您查看Firebugs控制檯（https://getfirebug.com/），是否看到任何錯誤消息（沒有評論所有內容）？這可能是因爲'data'不適合fancybox而且它出錯了。或者如果你運行這個本地ajax調用將立即完成，所以你不能期望看到加載圖像。我幫你解決了核心問題，而且這個網站不適合輔導某人。 – p1100i

fancybox.net上的apidock有點過時了（對於1.x.y）。

所以如果你使用：

1.xy你想去老：$.fancybox.showActivity();
你想要去的新2.xy：$.fancybox.showLoading();

你可以找到文檔2.xy fancyapss.com文檔和東西。他們保持網站「，因爲兩個版本（1.x和2.x）有不同的許可證方案」（thx到@JFK）。您可以舉報，MB，你從他們那裏得到一個金色的星星:)

=========問題更新 ==========

我不能後回答可以肯定沒有看到完整的HTML和JS，但你可以嘗試：

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

來源

2012-11-10 19:13:36 p1100i

這是一個很好的提示！但我仍然無法顯示加載圖標。我這次有bo js錯誤... –

fancybox是什麼版本號？ – p1100i

'fancybox.net上的apidock有點過時了... ...好吧，事實並非如此。 [fancybox.net]（http://fancybox.net/）適用於v1.3.4及以下版本，而[fancyapps.com]（http://fancyapps.com/fancybox/）適用於新版本2.x及以上。 Fancybox v1.3.x API選項，方法和回調與v2.x不兼容，反之亦然....使用您正在使用的版本的正確選項。 – JFK

的問題似乎是雙重的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; 
});

來源

2012-11-10 23:06:22

你可以做到這一點

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

來源

2017-07-22 04:30:19

的fancybox加載動畫不會觸發

回答

相關問題