1

画面上に開いているSqueezeBoxがあり、ボックス内のリンクをクリックしたときに別のURLで再度開きたいと思います。アニメーションがスムーズで1回だけ実行されるように、新しい（異なる）サイズで新しいURLを開くためのさまざまなアプローチを試みています。残念ながら、標準的なアプローチ（openメソッド）は2回アニメーション化するようです（または「グリッチ」する無意味なアニメーションを実行します）。

別の方法として私が試していますが、これはオプションを設定する方法を提供していないようです。ソースでsetContentわかることから、オプションがすでに設定されていると、何も実行されません。SqueezeBox.initialize

    // (Attempt 1)
    // This animation is a bit glitchy, have tried resetting resizeFx
    // and sizeLoading to reduce bounce. Ideally want it to morph from
    // current size to size{} without shrinking to sizeLoading{} first.
    if ( false ) {
        SqueezeBox.open(
            url,
            {
                size: { x: 500, y: 500 },
                sizeLoading: { x: 500, y: 500 },
                resizeFx: {
                    duration: 0
                }
            }
        );
    }

    // (Attempt 2)
    // Empty SqueezeBox then reset its contents
    $( 'sbox-content' ).empty();
    // Unfortunately here there appears no way to reset the size with
    // the ajax method,
    // and the call to initialize is ignored.
    SqueezeBox.initialize(
        {
            size: { x: 100, y: 400 },
            /* Set the loading size to the current size? */
            sizeLoading: { x: 700, y: 700 }
        }
    );
    // Load the new content in via ajax
    SqueezeBox.setContent( 'ajax', url );
    // So, I would need to call resize() here, causing a second animation

ここに、別のモーダルライトボックスプラグインに切り替えることをお勧めしますが、SBから離れることは実際にはオプションではなく、両方を同時に実行することには熱心ではありません。

4

1 に答える 1

0

あはは、これが解決策です - SqueezeBox 呼び出しを避けてください! 代わりに、標準の MooTools AJAX 呼び出しを使用して手動でコンテンツをロードします。これは通常の待機スピナーをオンにしませんが、修正できると思います。

// Let's load page in AJAX manually; reopening with open() or
// setContents() appears to cause double or glitchy animations.
var myRequest = new Request.HTML(
    {
        url: url,
        method: 'get',
        evalScripts: true,
        update: $( 'sbox-content' )
    }
).send();

// @todo If no size change is needed don't run this
// to avoid glitchy animation
SqueezeBox.resize(
    { x: 500, y: 500 },
    false
);

を使用していることに注意してくださいevalScripts: true。これにより、ローダブル スニペット内のすべての JavaScript が、 を使用したかのように実行されSqueezeBox.open()ます。

于 2013-01-30T11:11:10.330 に答える