Loading inline content using FancyBox

Question

Well, I'm simply writing this post to hopefully help others that might come across the same issue.

The examples on the vendor website are a little vague and I had assumed the following scenario.

---

You have a link with a hrefn to some content's #id.

<a href="#content-div" class="fancybox">Open Example</a>

And you have a div to hold that content.

<div id="content-div" style="display: none">Some content here</div>

Then you simply run Fancybox through a 1-liner.

$(".fancybox").fancybox();

Naturally, you'd think that Fancybox will copy the content and change display: none to display: block and everything will be ok.

But this doesn't happen.
It still loads the content but the content is hidden and you have a blank Fancybox. *cry*

Answer 1

The solution is very simple, but took me about 2 hours and half the hair on my head to find it.

Simply wrap your content with a (redundant) div that has display: none and Bob is your uncle.

<div style="display: none">
    <div id="content-div">Some content here</div>
</div>

Voila