jquery - Fancybox 2 にカスタムの "Loading..." div を使用しますか?

Question

これを検索しましたが、 http://fancyapps.com/fancybox/のドキュメントに解決策や言及が見つかりませんでした:

divFancybox がコンテンツ (ajax リクエスト) を待っている間、ローダー GIF の代わりに独自のものを使用することは可能ですか?

Answer 1

現在これに設定されている CSS スタイルをオーバーライドできます。

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

独自の画像、サイズ、背景色などを追加します。ただし、実際にコンテンツをオーバーライドして、追加の要素などを追加するには、fancybox ライブラリを修正する必要があります。

アップデート

あなたのコメントが質問をやや明確にすることを考慮して、ライブラリ自体に触れずにファンシーボックスライブラリをオーバーライドできます。以下はオーバーライドの例です。

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

以下は元のshowLoading()方法です

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');
    },

ここで最も重要な行は el =$('<div id="fancybox-loading"><div></div></div>').click(F.cancel).appendTo('body');変更できますが、hideLoading()現在このように見える対応するメソッドがあることを覚えておいてください。

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

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

ローディングの代わりに新しいコンテンツに応じてオーバーライドで修正したいもの<div>

上記を念頭に置いたオーバーライドの完全な例は、次のようになります。ライブラリ自体の後、他のカスタム JS の前にこれを含めます。H, W, D, F簡潔にするために、全体で使用されている変数など、fancybox ライブラリの他の場所からの参照の一部をコピーしたことに注意してください。

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

それが十分に明確であることを願っています。これはhttp://jsfiddle.net/aBCL5/で動作するフィドルです。最初のいくつかの画像のみを使用し、一部を変更して読み込みに時間がかかるようにしました。お困りのことがありましたらお知らせください。
R.