Question

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?

Answer 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.