CODEWITHSUNDEEP
javascriptjqueryhtmlcssfancybox
Lexx Luxx
Lexx Luxx

Reputation: 274

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?

Upvotes: 3

Views: 9513

Answers (3)

andys
andys

Reputation: 708

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

Upvotes: 0

Nick Beranek
Nick Beranek

Reputation: 2751

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.

Upvotes: 6

Janis
Janis

Reputation: 8769

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

Upvotes: 2

Related Questions