0

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
     });
});
Tim
  • 2,589
  • 6
  • 34
  • 39
  • It seems to be what you expect. Have you tried it? What isn't working? – koopajah Feb 13 '13 at 15:27
  • Changed the config to the script to this: $(document).ready(function() { $(".fancybox").fancybox({ type: 'iframe', autoSize: true, nextClick: false }); }); Doesn't actually do anything. – Tim Feb 13 '13 at 15:31
  • Here's the URL of the site: http://s361608839.websitehome.co.uk/101d/html_new/index.html Clicking 'Compare Movie Options' at the top opens the lightbox which is too wide. – Tim Feb 13 '13 at 15:33

2 Answers2

0

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.

Community
  • 1
  • 1
koopajah
  • 23,792
  • 9
  • 78
  • 104
  • Hey, thanks for your solution. Unfortunately it doesn't seem to work... I uploaded my page where you can see your suggested solution in the source code. Would you be able to have a look with it on the page? – Tim Feb 13 '13 at 15:48
  • @Tim there is a javascript error when loading the page that seems to cause an issue. If I recreate the fancybox element in chrome inspector it works. Try to correct the source first. – koopajah Feb 13 '13 at 15:54
  • Awesome it works. I tested it by going to http://s361608839.websitehome.co.uk/101d/html_new/ and clicking 'Compare Music Options' on the top nav. Once the lightbox appears, if you click the 'Compare Movie Options' link inside that lightbox which goes to the other iframe it doesn't resize to that. That make sense? Is there a way of making it work to that? Thanks – Tim Feb 13 '13 at 16:06
  • 1
    @Tim I tried to replace the beforeShow with onUpdate but it does not work perfectly. I'm not familiar with fancybox so you might want to ask another question or update this one to explain precisely what you want to do. – koopajah Feb 13 '13 at 16:15
0

Looking at your URL, the IFRAME has a fixed width of 520px on the first div element.

<div style="width: 520px; margin: 0 auto;">

Try removing or reducing that width to make it less wide - according to your needs.

Giannis
  • 486
  • 6
  • 8
  • 520px is the width he wants I think, but the iframe is larger than that – koopajah Feb 13 '13 at 15:50
  • @giannis just tried your suggested solution here, doesn't seem to work for me but I uploaded here on a different URL: http://s361608839.websitehome.co.uk/101d/html_new2/index.html for you to see the result – Tim Feb 13 '13 at 15:54
  • What's the expected width you wish to achieve? – Giannis Feb 13 '13 at 15:56