call Fancybox in parent from iframe

First, you should be using fancybox v2.x to seamlessly do that (patching fancybox v1.3.x doesn’t worth the effort)

Second, you need to have in both pages, the parent page and the iframed page, loaded jquery and fancybox css and js files in order to transcend fancybox properly,

so in both pages you should have at least something like:

<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/8853727/fancybox2.0.4/jquery.fancybox.css" />

and

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

then in your iframed (child) page your script is basically the same (but with the right fancybox options for v2.x … check the documentation here)

$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            // more options (v2.x) etc

but instead of this

        $.fancybox({

do this:

        parent.$.fancybox({

then fancybox will show in the parent page out of the boundaries of the iframed page

UPDATE: Demo page here

Leave a Comment