如何更改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关于它,因为你不会被动画,但是你想把它显示/隐藏条件.