如何更改Fancybox預加載器圖像？

我想用另一個預加載器替換默認的Fancybox1.3.4圖像預加載器（fancy_loading.png）。如何更改Fancybox預加載器圖像？

Fancybox preloader不僅在css中編碼，而且在javascript本身編碼。似乎有在javascript兩個地方，至少：

 _animate_loading = function() { 
     if (!loading.is(':visible')){ 
      clearInterval(loadingTimer); 
      return; 
     } 

     $('div', loading).css('top', (loadingFrame * -40) + 'px'); 

     loadingFrame = (loadingFrame + 1) % 12; 
    };

和

$.fancybox.showActivity = function() { 
    clearInterval(loadingTimer); 

    loading.show(); 
    loadingTimer = setInterval(_animate_loading, 66); 
}; 

$.fancybox.hideActivity = function() { 
    loading.hide(); 
};

所以自定義預加載器將需要修改的JavaScript了。如何更改fancybox-1.3.4 javascript以設置自定義預加載器圖像？

來源

2012-02-20 Lexx Luxx

CSS聲明是在這裏：

#fancybox-loading div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 40px; 
    height: 480px; 
    background-image: url('fancybox.png'); 
}

他們正在使用的背景圖像的精靈和改變背景位置動畫吧。如果你打算使用loading.gif圖片，那麼你不需要爲它製作動畫。

您需要更改background-image路徑，height和width迎合您的新形象。您可能想要將動畫的JS代碼註釋掉，以免發生衝突。

的loading div正在這裏聲明：

$('body').append(
    tmp = $('<div id="fancybox-tmp"></div>'), 
    loading = $('<div id="fancybox-loading"><div></div></div>'), 
    overlay = $('<div id="fancybox-overlay"></div>'), 
    wrap = $('<div id="fancybox-wrap"></div>') 
);

您可以在loading變量捎帶或者乾脆改變#fancybox-loading造型。然後您需要刪除對loadingTimer和loadingFrame的任何引用。註釋掉這整個函數：

/*_animate_loading = function() { 
    if (!loading.is(':visible')){ 
    clearInterval(loadingTimer); 
    return; 
    } 

    $('div', loading).css('top', (loadingFrame * -40) + 'px'); 

    loadingFrame = (loadingFrame + 1) % 12; 
};*/

修改以下功能：

$.fancybox.showActivity = function() { 
    //clearInterval(loadingTimer); 

    loading.show(); 
    //loadingTimer = setInterval(_animate_loading, 66); 
};

應該這樣做。您不希望loading上有任何setInterval，因爲您不會爲其設置動畫效果，但您希望它有條件地隱藏/顯示。

來源

2012-02-20 20:38:01

是的，我想設置新的預加載使用動畫loader.gif。上面的JavaScript是唯一必須在fancybox JS中取消註釋的地方嗎？在指定的聲明之前也有CSS：'＃fancybox-loading { } \t position：fixed; \t top：50％; \t left：50％; \t width：40px; \t height：40px; \t margin-top：-20px; \t margin-left：-20px; \t光標：指針; \t溢出：隱藏; \t z-index：1104; \t display：none; }'應該調整寬度和高度嗎？此外，'margin-top'＆'margin-left'：這些設置用於什麼？ – 2012-02-20 21:17:06

不適合我。似乎需要更多的JS文件的修改。 – 2012-02-20 23:01:59

看起來好像我太快拉動扳機。是的，還有一個容器'div'需要修改。我將在一些JS中看看還有哪些需要註釋/編輯。 – 2012-02-21 14:42:10

有兩種選擇 -

1）升級到v2，因爲它是現在使用gif動畫

2）更換showActivity和hideActivity方法與你的，例如，包括js文件後 -

$.fancybox.showActivity = function() { 
    /* Add your animated gif to page ... */ 
}

來源

2012-02-21 08:32:07 Janis

我preffer第二個選項，調整v1.3.4這是正確的mods：'$ .fancybox.showActivity = function（）{ \t \t F.hideActivity（）; $（'

'）.click（F.cancel）.appendTo（'body'）; }， $ .fancybox.hideActivity = function（）{ $（「＃fancybox-loading」）。remove（）; }，' – 2012-02-21 12:42:11

是的，類似的東西。替換「F.hideActivity（）;」與「$ .fancybox.hideActivity」和「F.cancel」與適當的東西 – Janis 2012-02-21 13:53:00

一注意：我也應該從'加載= $（'

'）'，'加載= $（ '

'），'？（如果在fancybox v2中使用css容器div） – 2012-02-22 10:31:46

你不需要改變了這麼多隻是在js文件註釋裏的句子：

$.fancybox.showActivity = function() { 
    //clearInterval(loadingTimer); 

    loading.show(); 
    //loadingTimer = setInterval(_animate_loading, 66); 
};

這就是所有，它會工作，但要記住在正確的文件的變化，因爲那裏是jquery.fancybox-1.3.4.js和jquery.fancybox-1.3.4.pack.js

來源

2012-11-17 18:16:33 andys

如何更改Fancybox預加載器圖像？

回答

相關問題