如何更改Fancybox预加载器图像？ [英] How to change Fancybox preloader image?

问题描述

我想用另一个预加载器替换默认Fancybox1.3.4 image preloader（fancy_loading.png）。

I want replace default Fancybox1.3.4 image preloader (fancy_loading.png) with another preloader.

Fancybox预加载器不仅在css中编码， 。
似乎，在javascript中有两个地方，至少：

The Fancybox preloader coded not only in css, but also in javascript itself. Seems, there are two places in javascript, at least:

        _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来设置自定义预加载器映像？

So customizing the preloader will require modifying javascript too. How can I change fancybox-1.3.4 javascript to set custom preloader image?

推荐答案

CSS声明：

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

他们使用sprite作为背景图片，并将背景位置更改为动画。如果您要使用 loading.gif 图片，则不需要对其进行动画处理。

They are using a sprite for the background image and changing the background-position to animate it. If you're going to use a loading.gif image, then you won't need to animate it.

您需要更改 background-image 路径， height 和 width 以迎合你的新形象。

You need to change the background-image path, height, and width to cater to your new image. You may want to comment out their JS code for the animation so that it doesn't conflict.

载入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 的任何引用。注释掉整个函数：

You can either piggyback on the loading variable or simply change the styling on #fancybox-loading. You'll then need to remove any reference to loadingTimer and loadingFrame. Comment out this entire function:

/*_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);
};

你不想让加载有任何 setInterval ，因为你不会动画，但你做希望它有条件地隐藏/显示。

That should do it. You don't want loading to have any setInterval on it since you won't be animating it, but you do want it to hide/show conditionally.

这篇关于如何更改Fancybox预加载器图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！