Question

I have an open SqueezeBox on-screen, and would like to reopen it with a different URL in response to clicking a link inside the box. I'm trying a variety of approaches to open the new URL at the new (different) size so that the animation is smooth and runs only once. Unfortunately the standard approach (the open method) seems to animate twice (or runs pointless animations that 'glitch').

As an alternative I'm trying setContent, but this doesn't seem to offer a way to set options, and from what I can tell in the source, SqueezeBox.initialize doesn't do anything once options are already set.

    // (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

I see here a recommendation to switching to another modal lightbox plugin, but moving away from SB isn't really an option, and I'm not keen to run both at the same time.

Était-ce utile?

La solution

Aha, here's a solution - avoid SqueezeBox calls! Instead, I load the content in manually using standard a MooTools AJAX call. This doesn't turn on the usual wait spinner, but I expect that can be fixed.

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

Note that I'm using evalScripts: true, so that any JavaScript in the loadable snippet is run just as if I had used SqueezeBox.open().

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top