call Fancybox in parent from Iframe with no manual open

1,596 views

Skip to first unread message

Igor Laszlo

unread,

Aug 31, 2013, 1:58:41 AM8/31/13

to fanc...@googlegroups.com

Hello,

I have an html page (parent page) which has an iFrame which has a Fancybox image gallery. When i open an image in the iFrame, Fancybox resizes the image to the iFrame size, but not to the parent page (not to screen) as i would like.

I guess i could get the answer here -> http://stackoverflow.com/questions/8853727/call-fancybox-in-parent-from-iframe/8855410#8855410 and the demo page shows really what i would like -> (http://www.picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html) but the problem is that i do not have the same script...

Instead of (open manually) :

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

I call the pictures like this :

$(document).ready(function() { 
    $(".fancybox-thumbs").fancybox({ 
        padding: 0, // etc


I tried to change my code like this (based on the answer & demo) :

$(document).ready(function() { 
    parent.$(".fancybox-thumbs").fancybox({ 
        padding: 0, // etc

...but it does not work. Is somebody can tell me how should i change my code that the thumbs who are in the iframe, open the images on the parent page, resized to the screen ?

Thanks in advance !

Igor Laszlo

unread,

Aug 31, 2013, 9:59:06 AM8/31/13

to fanc...@googlegroups.com

I found the answer, unfortunately never (!) from my own question on the forums... i share it with you, maybe it helps for someone :

1 First i had the .css and .js files linked to both parent html and iframe html.

2 My parent html

    <body>
    <div id="more">
    <div class="container">
            <div id="sensuality-div">
                <iframe id="sensuality-frame" src="http://www.igorlaszlo.com/sensuality.html" width="100%" height="100%" style="overflow:hidden;height:100%;width:100%;" scrolling="no" allowTransparency="true" frameborder="0" sandbox="allow-same-origin allow-forms allow-scripts" ></iframe>
            </div>
        </div>
    </div>
    </body>

3 My iframe html

    <body id="sensuality-body">

        <div class="view view-add">
             <img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" alt="Thierry Mercier 16" />
             <div class="mask">
                <a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" alt="Model : Thierry Mercier - 2009 June" title="34 Dance in the Dark">
                     <h4>Dance in the Dark</h4>
                 <p>Model : Thierry Mercier</p>
                 <info>Click for zoom</info>
                </a>
             </div>
        </div>

        <div class="view view-add">
             <img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" alt="Thierry Mercier 16" />
             <div class="mask">
                <a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" alt="Model : Thierry Mercier - 2009 June" title="34 Dance in the Dark">
                     <h4>Dance in the Dark</h4>
                 <p>Model : Thierry Mercier</p>
                 <info>Click for zoom</info>
                </a>
             </div>
        </div>

    </body>

4 My original code for calling fancybox (not manual opening) is in the followings (i have it on both parent and iframe pages):

    <script>

    $(document).ready(function() {
        $(".fancybox-thumbs").fancybox({
        padding: 0,

        openEffect : 'elastic',
        openSpeed : 150,

        closeEffect : 'elastic',
        closeSpeed : 150,

        closeClick : true,

        prevEffect : 'elastic',
        nextEffect : 'elastic',

        closeBtn : true,
        arrows    : true,
        nextClick : true,

        beforeShow: function () {
            this.title = $(this.element).attr('title');
            this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
        },

                afterShow: function() {
        },

                helpers : {
            title : { type: 'inside' }
        }
        });
        });
    </script>

5 THE HACK : I combined the code i found (http://www.dynamicdrive.com/forums/archive/index.php/t-56981.html) with mine and i ADDED AN ADDITIONAL SCRIPT to my iframe page:

    <script type="text/javascript">
    jQuery(function($) {
        if(top !== window){
            var $$ = parent.jQuery;
            $$('#sensuality-div').html($('#sensuality-body').html()).find('a').fancybox({
                padding: 0,

            openEffect : 'elastic',
            openSpeed : 150,

            closeEffect : 'elastic',
            closeSpeed : 150,

            closeClick : true,

            prevEffect : 'elastic',
            nextEffect : 'elastic',

            closeBtn : true,
            arrows    : true,
            nextClick : true,

            beforeShow: function () {
                this.title = $(this.element).attr('title');
                this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
            },

            afterShow: function() {
            },

            helpers : {
                title : { type: 'inside' }
            }
            });
            $("#sensuality-body a").click(function(e){
                $$('#' + this.class).click();
            });
        }
        else {
            $("#sensuality-body a").fancybox({
            padding: 0,

            openEffect : 'elastic',
            openSpeed : 150,

            closeEffect : 'elastic',
            closeSpeed : 150,

            closeClick : true,

            prevEffect : 'elastic',
            nextEffect : 'elastic',

            closeBtn : true,
            arrows    : true,
            nextClick : true,

            beforeShow: function () {
                this.title = $(this.element).attr('title');
                this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
            },

            afterShow: function() {
            },

            helpers : {
                title : { type: 'inside' }
            }
            });
        }
    });
    </script>

Maybe you can make it much easier, maybe i added a lot of unnecessary codes, what i know is that it works fine...

I saw that many people look for a solution for that kind of question, hope to help you !

Soon you will be able to see it on www.igorlaszlo.com

Reply all

Reply to author

Forward

0 new messages