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*