Using Fancybox jQuery plugin to display inline content (image and text) that is dynamically resized when displayed

Question

Using Fancybox jQuery plugin.

I've been able to get it to display images fine. And I've been able to get it to display inline content such as a div with some paragraphs inside. With both of these when the content is displayed by fancybox you are able to change your browser window to difference sizes and the fancybox content box also re-sizes nicely.

Now my problem. Instead of just displaying images I need to display an image with 3-4 sentences of text right below the image.

For my attempt to do this I used the inline content method. My inline content was something like this:

<div style="display: none">
    <div id="content-div">
        <img src="images/product1.jpg" alt="" />
        <p>My several lines of text would go here.</p>
    </div>
</div>

When fancybox displays this content it is always a bit strange. For example, the text will cut off, and scroll bars appear. It never does what I want, which is to treat the image and text as a unit, and dynamically resize both the image and text, as it does when you are only displaying and image, or only displaying html text.

I've seen examples where you can display inline content in fancybox with a pre-set width and height, but I want it to change size depending on users browser widow size.

Can this be done? Is there some option I'm missing?

Janis Janis · Accepted Answer · 2012-02-10T08:01:32

fancyBox reads width/height before displaying and it does not preload images. As images may load later, they can expand parent and cause scrollbars to appear. The simplest solution would be to set dimensions for image inline, like <img src=".." width="200" height="100" />

Using Fancybox jQuery plugin to display inline content (image and text) that is dynamically resized when displayed

1 Answers