Call Fancybox from Flash

So we searched high and low for a good answer to this one and finally cobbled together a good solution.

Fancybox is a really nice jQuery plugin that gives you some handsome options for the div overlay.  We are using it in a new project, but needed to call it from Flash, and there was really no documentation for how to do this.  Hopefully our solution will help someone else.

Here’s the really simple javascript function we added onto our page:

[javascript]<script type="text/javascript" >
function callFancy(my_href) {
var j1 = document.getElementById("hiddenclicker");
j1.href = my_href;
$(‘#hiddenclicker’).trigger(‘click’);
}
</script>
[/javascript]

Now somewhere on the page we had to add a “hidden” <a> tag that we could manipulate with javascript like this:

[html]<div id="hidden_clicker" style="display:none;">
<a class="overlay-flash" id="hiddenclicker" href="#" >Hidden Clicker</a>
</div>[/html]

The tag is wrapped in a div tag that has a display:none set so it doesn’t show in the browser.

Next part is the ActionScript. We embedded the SWF using SWFObject and can call the javascript function just like this:

[php]getURL("javascript:callFancy(‘/linktopage.html’);");[/php]

That’s it. Hope it helps someone out there. :)

UPDATE 8/18/09:  I neglected to point out that the A class assigned to our “hiddenclicker” div is a custom javascript implementation to launch a certain window.  Here is the code we added to an included .js file:

[javascript]

$(document).ready(function() {
$("a.overlay-flash").fancybox({
‘padding’                : 0,
‘zoomOpacity’            : true,
‘zoomSpeedIn’            : 500,
‘zoomSpeedOut’            : 500,
‘overlayOpacity’        : 0.75,
‘frameWidth’            : 530,
‘frameHeight’            : 400,
‘hideOnContentClick’    : false
});
});

[/javascript]

Sorry for the omission…