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*
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