Call fancybox with jquery element

Question

I know there is a way to call fancybox manually with a string of html like so:

$.fancybox("<div>foo</div>")

However, i want to instead pass a jQuery object to the fancybox so i can retain things like .data() and click() events i have already added:

var $fooObj = $("div.foo").data("foo","bar");
$.fancybox($fooObj);

Is this possible somehow?

Answer 1

You just need to set it as the content property in the options you pass into $.fancybox(), like this:

$.fancybox({
    content: $fooObj 
});

You can test it out here.

Answer 2

function LaunchFancyBox(code)
{
    jQuery.fancybox({
        content: code 
    });     
}

And in the onclick/click:

<a href="#" onclick="LaunchFancyBox('<div>test</div>'); return false;">Launch it baby</a>!