0

少し窮地に立たされています - Facebook ページ アプリで colorbox を使用しようとしていますが、iframe が原因で問題が発生しています。

カラーボックスの使用法。正常に機能しますが、フレームの中央にロードされます。

$(document).ready(function () {
    $('a.popup').colorbox();        
});


<a class='popup' href='xxxxxx' title='title'><img src='xxxxxx'/></a>

FB API から scrollTop 値を取得し、それを HTML の文字列と一緒に Colorbox に送信できます。

$("a.popup").click(function () {
    FB.Canvas.getPageInfo(function (fbCanvasInfoObject) {
        var fbPosition = fbCanvasInfoObject.scrollTop;
        $.colorbox({html:"content", pxToTop:fbPosition});
    });
})

pxTotop 値を使用するように Colorbox を少し変更すると、モーダル ウィンドウがビューポートの上部から 150 ピクセルに設定されます。

top = settings.pxToTop + 150;

この 2 つを組み合わせる必要があり、最初の例の Colorbox 機能 (キャプションとして画像のタイトルが表示される標準機能) と、2 番目の例で生成されたオフセットを組み合わせる必要があります。

何か案は？

4

1 に答える 1

3

常に起こります - 質問をしてから、自分で答えを見つけてください。誰かが興味を持っている場合、解決策は以下のとおりです。

$(document).ready(function () {
    $("a.popup").live("click", function () {
        var caption = this.title;
        var image = this.href;
        FB.Canvas.getPageInfo(function (fbCanvasInfoObject) {
            var fbPosition = fbCanvasInfoObject.scrollTop;
            $.colorbox({ href:image, title: caption, fbScrollTop: fbPosition });
        });
        return false;
    })
});

カラーボックス スクリプトを変更しました (~ln518):

var top = settings.fbScrollTop + 150;

並べ替えました。魅力のように機能します。

于 2012-07-05T04:42:10.213 に答える