Use custom "Loading..." div for Fancybox 2?

Question

I search for this but did not find a solution or any mention in the docs at http://fancyapps.com/fancybox/:

Is it possible to use my own div instead of the loader GIF while Fancybox is waiting for the content (ajax request)?

Answer 1

You can override the CSS styles which are currently set to this

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('fancybox_loading.gif') center center no-repeat;
}

and add your own image, size, background-color etc. However to actually override the content in terms of adding in extra elements etc. you are going to have to amend the fancybox library to do that.

Update

In view of your comment making the question somewhat clearer, You can override the fancybox library without touching the library itself. Below is an example of an override:

var loadingExtension ={
    oldShowLoading: $.fancybox.showLoading,
    showLoading: function(){
        // You can still call the old loader here below if you want and then manipulate the DOM or you can make your own custom code.
        //this.oldShowLoading();
        // custom code

    } 
};
$.extend($.fancybox, loadingExtension);

Below is the original showLoading() method

showLoading: function () {
        var el, viewport;

        F.hideLoading();

        el = $('<div id="fancybox-loading"><div></div></div>').click(F.cancel).appendTo('body');

        // If user will press the escape-button, the request will be canceled
        D.bind('keydown.loading', function(e) {
            if ((e.which || e.keyCode) === 27) {
                e.preventDefault();

                F.cancel();
            }
        });

        if (!F.defaults.fixed) {
            viewport = F.getViewport();

            el.css({
                position : 'absolute',
                top  : (viewport.h * 0.5) + viewport.y,
                left : (viewport.w * 0.5) + viewport.x
            });
        }

        F.trigger('onLoading');
    },

The most crucial line here is el = $('<div id="fancybox-loading"><div></div></div>').click(F.cancel).appendTo('body'); Which you can change, but then remember there will be a corresponding hideLoading() method which currently looks like this.

hideLoading: function () {
D.unbind('.loading');

$('#fancybox-loading').remove();
},

Which you would also want to amend in the override depending on your new contents in-place of the loading <div>

An complete example of the override with the above in mind would be as below. You would include this after the library itself but before any other custom JS. Note that I have copied some of the references from elsewhere in the fancybox library such as the H, W, D, F variables as they are used throughout for brevity.

loadingExtension = {
    oldShowLoading: $.fancybox.showLoading,
    oldHideLoading: $.fancybox.hideLoading,
    showLoading: function () {
        H = $("html");
        W = $(window);
        D = $(document);
        F = $.fancybox;
        var el, viewport;

        F.hideLoading();
        el = $('<div id="fancybox-loading"><div>testing!</div></div>').click(F.cancel).appendTo('body');

        // If user will press the escape-button, the request will be canceled
        D.bind('keydown.loading', function (e) {
            if ((e.which || e.keyCode) === 27) {
                e.preventDefault();

                F.cancel();
            }
        });

        if (!F.defaults.fixed) {
            viewport = F.getViewport();

            el.css({
                position: 'absolute',
                top: (viewport.h * 0.5) + viewport.y,
                left: (viewport.w * 0.5) + viewport.x
            });
        }

        F.trigger('onLoading');
    },
    hideLoading: function () {
        $(document).unbind('.loading');
        $('#fancybox-loading').remove();
    }

};
$.extend($.fancybox, loadingExtension);

Hope that's clear enough. Here's a fiddle of it working http://jsfiddle.net/aBCL5/, I've only used the first few images and changed some to make the load take longer. Let me know if you have any troubles.
R.