Question

I’m using Fancybox to load some content with AJAX.

Content:

<div class="container">
  <h2>An image</h2>
  <div class="span-16 colborder center clearfix">
    <img src="/system/images/apple.jpg">
  </div>

  <div class="span-7 last clearfix">
    something here
    <br>
     something here
  </div>
  <div class="span-24 last">
    FOOTER FOOTER FOOTER
  </div>
</div>

JS:

  $('a.edit-image').fancybox({
    'autoScale' : false,
    'scrolling' : 'no'
  });

The content loads, but the Fancybox only renders with a height to accommodate the text, leaving the image overflowing out the bottom. The image (which can be quite large) takes a moment to load and I think Fancybox doesn’t wait for it to determine the height it should render.

Placing the image elsewhere on the page (as a form of pre-loading) prevents the bug. Also, it only happens the first time the Fancybox is opened because it is cached every time thereafter.

Anybody know the least hacky way to get Fancybox to render at the correct height, or just have it’s height set to ‘auto’?

Thank you!

Answer 1

I added a trigger on the resize event of the .container div which adjusted the size of the fancybox-content div. That did the job.