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

Question

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

Fancybox預加載器不僅在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以設置自定義預加載器圖像？

Answer 1

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 ，因為您不會為其設置動畫，但您確實希望它有條件地隱藏/顯示。

Answer 2

有兩種選擇 -

1）升級到v2，因為它現在使用GIF動畫

2）使用你的showActivity和hideActivity方法，例如，在包含js文件之后 -

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

Answer 3

你不需要在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在哪里