Dynamically resizing the Shadowbox.js modal window

Shadowbox.js is an excellent modal window component capable of handling everything from iFrames to Flash videos to image galleries. However, and odd as it seems, the out-of-the-box solution doesn’t have a resize() method with which to resize the modal window via JavaScript. The reason you might want to manually resize the modal window is in case the content inside changes, for example in the case of IFrames. Fortunately, implementing such a method is quite easy.

First, download Shadowbox. As of this version, the downloaded files are automatically minified, so in order to be able to properly add the needed code you will have to prettify the code, using a tool such as http://jsbeautifier.org/.

After you have prettified the code, scroll down right after the onWindowResize method, which should look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

k.onWindowResize = function () {
    if (!P) {
        return
    }
    I();
    var K = g.player,
        S = R(K.height, K.width);
    t(S.width, S.left);
    E(S.innerHeight, S.top);
    if (K.onWindowResize) {
        K.onWindowResize()
    }
};

The reason I am including the onWindowResize method is because, the code being packed, the variable names might change in subsequent versions of Shadowbox, so you will have to take a look at an existing function. Now, right below the onWindowResize method, add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

k.dynamicResize = function (w, h) {
    if (!P) {
        return
    }
    I();
    g.player.width = w;
    g.player.height = h;
    var K = g.player,
        S = R(K.height, K.width);
    t(S.width, S.left);
    E(S.innerHeight, S.top);
    if (K.onWindowResize) {
        K.onWindowResize()
    }
};

Notice that there are only three lines that differ between the two methods. After adding this method (and perhaps minifying the code again), you can easily resize the modal like this:

1

Shadowbox.skin.dynamicResize(600, 400);

Or, if you want to do it from inside the iframe loaded within the modal:

1

window.parent.Shadowbox.skin.dynamicResize(600, 400);

Note that this method does not resize the window beyond the viewport dimensions. It will still be scaled down if it exceeds the viewport’s width or height.

April 1, 2011 | Filed Under Development, JavaScript | 3 Comments