javascript - How to change Fancybox preloader image? - Stack Overflow

admin管理员组

文章数量:1289383

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?

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?

• javascript
• jquery
• html
• css
• fancybox

Share Improve this question Follow asked Feb 20, 2012 at 20:26 Lexx LuxxLexx Luxx 27411 gold badge77 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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

You dont need to change so much just in js file ment 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

本文标签： javascriptHow to change Fancybox preloader imageStack Overflow