Frequently Asked Questions

Question: How can I open Shadowbox from inside a Flash movie?

Answer: Use ActionScript's getURL function to call some Shadowbox code. There are several ways you can do this. The easiest is to define a JavaScript callback function similar to the one below.

<script type="text/javascript">

var openShadowbox = function(content, player, title){
    Shadowbox.open({
        content:    content,
        player:     player,
        title:      title
    });
};

</script>

You can place this function in between <head> tags in your HTML document, or include it via <script> tags. Then, in your Flash movie you need to use getURL to call your custom callback function, like so:

getURL("javascript:openShadowbox('movie.swf', 'swf', 'Title');");

Question: How can I open Shadowbox from inside an iframe?

Answer: The basic concept here is that you have two windows: the normal window and the iframe. When an iframe is placed inside another window, that window becomes the parent window of that iframe. In order to run JavaScript in the parent window from inside an iframe, you must figure out how to make calls to objects that reside in the parent window.

Luckily for us, each window (including iframe windows) contains an object called parent that refers to the parent of that window. Thus, you can use the following code inside your iframe document to access the Shadowbox object that resides in the parent window:

var Shadowbox = window.parent.Shadowbox;
// do whatever you want with Shadowbox here

Once you have access to the Shadowbox object, you can use it as you normally would. Just remember that since the Shadowbox object still resides in the parent window, all actions will take place in the parent window. To use Shadowbox inside an iframe, you must of course include the Shadowbox code as usual at the top of the document inside the iframe.

Note: For a good example of using Shadowbox from inside an iframe, check out the source code for the form demo.

Question: Why does the Shadowbox window open up halfway down the page in Internet Explorer?

Answer: The answer to this problem may be that you are not using a strict or transitional DOCTYPE as explained on the support page. In short, placing either of the following code snippets at the top of your HTML page should help:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">