How to change Fancybox preloader image?

问题

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

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;
    };

and

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

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

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

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

回答1:

The CSS declaration is here:

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

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.

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.

The loading div is being declared here:

$('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>')
);

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

Modify the following function:

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

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

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.

回答2:

There are two options -

1) Upgrade to v2 as it is now using animated gif

2) Ŗeplace showActivity and hideActivity methods with yours, e.g., after including js file -

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

回答3:

You dont need to change so much just in js file comment some lines:

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

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

Thats all and it will work, but remember change in correct file because where are jquery.fancybox-1.3.4.js and jquery.fancybox-1.3.4.pack.js

来源：https://stackoverflow.com/questions/9367943/how-to-change-fancybox-preloader-image

标签

javascript

jquery

html

css

fancybox