Question

As the title says really. I’m using Fancybox, the popular jQuery lightbox script on my site.

I’ve set a hyperlink which pops open the lightbox using an IFRAME of the requested page.

This works fine, however…

The lightbox is too big, I’d like it to auto size to the content. On the documentation at http://fancyapps.com/fancybox/#docs you can see in the table there’s an autosize parameter.

Is this it, can someone who knows jQuery please help show me how this appears in my configuration of the script?

Here’s my current configuration:-

$(document).ready(function() {
    $(".fancybox").fancybox({
 type: 'iframe',
 nextClick: false
     });
});

Answer 1

I have tried autoSize on your site and it does not seem to work. But this code seems to do the trick:

$(".fancybox").fancybox({
    type: 'iframe',
    beforeShow: function(){
        this.width = $('.fancybox-iframe').contents().find('div:first').width();
    },
    nextClick: false
});

I found it in this answer and adapted it to your layout to retrieve the width from the root div.

But it would be better to understand why autoSize does not have any effect on the iframe you load.