1

$.postメソッドの後に毎回afterLoadイベントでfancybox2を呼び出します

$.post ... function(html){
$.fancybox({afterLoad:function(){this.content = html;}});
}

Fancyboxを閉じると正常に動作しますが、すでに開いているFancyboxからもう一度このリクエストを行うと、「コンテンツを読み込めません」というエラーが表示されます。

beforeLoad、beforeShow、その他のイベントについては真実ですが、運がありません。どうすればそれを機能させることができますか？

4

4 に答える 4

2

すでに開いている fancybox に新しいコンテンツをロードするには、次のようにします。このようにすると、fancybox ウィンドウが新しいコンテンツで更新される間、fancybox が閉じなくなります。

// is fancybox already popped up?
fancyboxIsOpen: false,

openFancyBox: function (urlToBeLoaded) {
    if (urlToBeLoaded === null) {
        this.closeFancyBox();
    } else {
        if (this.fancyboxIsOpen) {
            this.openInAlreadyOpenedFancyBox(urlToBeLoaded);
        } else {
            this.openFirstFancyBox(urlToBeLoaded);                
        }
    } 
}, 

openFirstFancyBox: function (urlToBeLoaded) {
    var that = this;
    $.fancybox.open({
        type: 'ajax',
        href: urlToBeLoaded,
        afterClose: function() {
            this.openFancyBox(null);
            return true;
        },
        afterShow : function() {
            that.fancyboxIsOpen = true;
            var ahref = jQuery(".fancybox");
            ahref.on("click", function(event){
                //stop the click action, we do not want to load the href in the window
                event.preventDefault();         
                var currentTarget = $(event.currentTarget);
                var urlToBeLoaded = that.getFancyBoxId(currentTarget);
            });     
        }
    });         
}, // end openFirstFancyBox




openInAlreadyOpenedFancyBox: function (urlToBeLoaded) {
    var that = this;

    $.fancybox.showLoading(); // show loading icon
    $.ajax({
        type: "GET",
        url: urlToBeLoaded,
        success : function(content, textStatus, jqXHR) {
            $.fancybox.hideLoading();                        
            jQuery(".fancybox-inner").html(content);
            $.fancybox.update();
        },
        error : function(xhr, status) {
            $.fancybox.hideLoading();
            return false;
        }
    });
},

closeFancyBox: function () {
    this.fancyboxIsOpen = false;
    $.fancybox.close();
},

getFancyBoxId: function (currentTarget) {
    var id = currentTarget.attr("href");  
    return id;        
},

重要なことはjQuery(".fancybox-inner").html(content);、現在の fancybox のコンテンツを新しいコンテンツに置き換え、オプションで$.fancybox.update();新しいコンテンツに従ってウィンドウのサイズを変更することです。

于 2013-04-02T14:04:06.597 に答える
2

このようなことをしたいだけではありませんか？

$.post ... function(html){
    $.fancybox( html );
}
于 2012-06-26T09:58:46.897 に答える