Question

I’m using supersized plugin http://buildinternet.com/project/supersized/ to obtain a fullscreen gallery.

It works fine itself, but I need to hide and show it only from a fancybox button and from an esc button. I’m using fancybox 2 and I want to implements fullscreen too, so I used supersized.

The question is: how can I hide supersized without compromising its behavior?

The answer is not simple as you think, because if you try to set ‘display: none’ to div#supersized, and other relative divs, when you display it the auto ‘fit’ of the images doesn’t work…

If you set ‘visibility: hidden’ it seems to work, but when I want to see the first image for the first time, the box which should have to display the image is completely white.

You can see my test site for example: http://provaschiavello.altervista.org/Projects/STARFISH%20SQUARE%20|%20PIAZZA%20VITTORIO

Any suggestions?

Answer 1

Here is the solution (or the workaround):

Set this global variable: first = true;

Creates this two utility functions:

function fullScreen(n) {
    // Init supersized only at first time
    if (first) {
        jQuery(function($){
            $.supersized({
                // All the supersized 'options': 'value'
            });
        });
        first = false;
    }
    // Repeat this for each element of the page
    // which needs to be hided while supersized is running
    $('#myElem').fadeOut();

    // Show it
    $('#supersized-container').fadeIn();
    $('#supersized').fadeIn();
    api.goTo(n+1);
}

function closeFull() {
    $('#supersized-container').fadeOut();
    $('#supersized').fadeOut();

    // Same as above
    $('#myElem').fadeIn();
}

And then use them to switch between supersized and your normal page.

NB: The argument of fullScreen (n) is the index passed to the supersized gallery.

Enjoy. 🙂