FancyBox gallery launched in iframe from main site affects only iframe?

Question

I got a website with a basic structure of six main sites, each of those having a number of submenues. These subsites are loaded into the current main page via an iframe and javascript. I have a lot of pictures on these submenu sites and I thought I'd give the Fancybox a try.

I loaded the css and javascript file into the submenu site, defined the picture as stated:

<a class="fancybox-systa" data-fancybox-group="wat" href="pics/big/b1.jpg" title="Lorem ipsum dolor sit amet"><img src="pics/small/s1.jpg" alt="" /></a>

and included the launch script on the site also:

<script type="text/javascript">
            $(document.ready(function() {
            $('.fancybox-systa').fancybox({
                helpers: {
                    title : {
                        type : 'inside'
                    }}});   
        });
    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
    </style>

It works fine, but it only affects the iframe, I would like my gallery to affect the entire parent window, so that the entire windows fades out, not only the small iframe compartement.

I have tried to call the function like this:

$(parent.document.ready(function() {

and many other similar forms, but unfortunately, none of those did the trick.

I'd really appreciate any tips on this.

Best regards, Alex

Answer 1

Yes. FancyBox is available inside document that is loaded into IFRAME. The same occurs to frames. So you need to initialize it everywhere.