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

在哪里

如何更改Fancybox预加载器图像？

3 个答案: