Fancybox is a really nice jQuery library for creating lightboxes. There are a few simple examples and some documentation on their site but there seems to be no demonstrated method for loading a fancybox dynamically with javascript. All of their examples require you to embed a link to the lightbox content somewhere in the page source.

The following hack, mostly taken from the method described here, allows you to dynamically any web page into a fancybox straight from javascript.

I've documented the following example which should be fairly straight forward. Basically it embeds a hidden link, that's controlled by the callFancyBox function. Make sure you have the right things included and you can simply call

callFancyBox( <your iframed url > );


<!--- These are the scripts and styles needed for fancybox to work --->
<script type="text/javascript" src="" charset="utf-8"></script>
<script type="text/javascript" src="" charset="utf-8"></script>
<link href="" rel="stylesheet" type="text/css" media="all" />


<h3> Fancybox Test</h3>

A fancybox will load in 3 seconds

<!--- Currently fancybox only works on links in your page. This div hides a link, who's href we change dynamically --->
<div id="hidden_clicker" style="display:none">
<a id="hiddenclicker" href="" >Hidden Clicker</a>

<script type="text/javascript" >

// Register all links with-flash as fancybox's
$(document).ready(function() {
'padding': 0,
'zoomOpacity': true,
'zoomSpeedIn': 500,
'zoomSpeedOut': 500,
'overlayOpacity': 0.75,
'frameWidth': 530,
'frameHeight': 400,
'hideOnContentClick': false

// This function allows you to call the fancy box from javascript
// origional source:
function callBoxFancy(my_href) {
var j1 = document.getElementById("hiddenclicker");
j1.href = my_href;

// Call the Fancy Box 3 seconds after the page loads
$(document).ready(function() {
window.setTimeout("callFancyBox('');", 3000)