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 > );
<html>
<head>
<!--- These are the scripts and styles needed for fancybox to work --->
<script type="text/javascript" src="http://qwisk.com/sbmedia/scripts/libraries/jquery-1.3.2-mod.js" charset="utf-8"></script>
<script type="text/javascript" src="http://qwisk.com/sbmedia/scripts/libraries/jquery.fancybox-1.2.6.js" charset="utf-8"></script>
<link href="http://qwisk.com/sbmedia/css/jquery.fancybox-1.2.6.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<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="http://asdf.com" >Hidden Clicker</a>
</div>
<script type="text/javascript" >
// Register all links with-flash as fancybox's
$(document).ready(function() {
$("a.overlay-flash").fancybox({
'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: http://outburst.jloop.com/2009/08/06/call-fancybox-from-flash/
function callBoxFancy(my_href) {
var j1 = document.getElementById("hiddenclicker");
j1.href = my_href;
$('#hiddenclicker').trigger('click');
}
// Call the Fancy Box 3 seconds after the page loads
$(document).ready(function() {
window.setTimeout("callFancyBox('http://google.com');", 3000)
});
</script>
</body>
</html>
Posted by Chris Kundinger on February 6, 2010 at 6:20 pm
Good post Dave! Hey, I was thinking… and I have an enhancement to your solution. I needed a similar solution but 2 additional things:
1. Dynamic Context. I wasn’t sure the context from which it was going to be called (iframe within a frame, or main document). From my testing it looks like Fancybox is dependent on the context that the trigger link is located in, which I guess makes sense (scope-wise). Additionally, I didn’t want to create the same hidden link in each context I needed this solution in.
2. I’m not sure what is all included in the preprocessing for the .fancybox() call but I wanted to push the processing to only be done if the link was clicked.
Therefore here are the things I added:
1. I passed in the context
2. Dynamically appended the hidden div to the first child in context, set the fancybox, and triggered it.
Then this lets you get rid of any HTML code and the $(document).ready() register call.
function callBoxFancy(my_href, href_context) {
var $hidden_link = $(‘#hidden-fancybox-clicker’, href_context);
if ($hidden_link.length == 0) {
// Append to first child in context
$link = $(“ hidden fancy link“);
$($(href_context).children()[0]).append($link);
$hidden_link = $($link.children()[0]);
}
// Link guaranteed to exist, set fancybox
$hidden_link.fancybox({
frameWidth: 350,
frameHeight: 290
…etc…
});
// Trigger link, triggering fancybox
$hidden_link.trigger(‘click’);
}
//This can then trigger a fancybox from any context:
callFancyBox(‘http://google.com’, any_context_in_the_world);
Posted by Phil on January 12, 2011 at 3:41 am
thanks this was helpful and something I could implement
Posted by bobby on February 9, 2011 at 12:45 pm
Thank you.
Posted by berke on April 28, 2011 at 9:27 am
Thanks it works perfectly. But if you replace tag to , you can solved some bugs.
Posted by berke on April 28, 2011 at 9:28 am
<a id="hiddenclicker" class="iframe" href="http://asdf.com"
Posted by TeChn4K on June 7, 2011 at 8:20 am
Hi,
there is more simpler :
$.fancybox();
But you must specify options ‘type’ and/or ‘href’
Example :
$(“.button”).live(“click”, function(){
$.fancybox({
‘type’ : ‘inline’,
‘href’ : ‘#hidden_div’
});
});
Posted by Juan on November 15, 2011 at 6:26 am
Sorry, this is just a another question.
Do you know how to call fancybox from within a swf file?
Fancybox site don´t shows any documentation about and searching the web I could’nt fiind any reference to this.
Thanks in advance.
Best regards.
Posted by godavemon on November 15, 2011 at 12:21 pm
Juan, sorry I haven’t worked with swf much at all.
Posted by Peter on February 25, 2012 at 9:09 am
This works too:
$(“div.what a.info”).click(function(event) {
var $dataID = $(this).attr(“id”);
$.ajax({
url: “../includes/orderform/func_show_popup_info.php”,
data: {“PUID” : $dataID},
cache: false,
success: function(data) {
$(“div.loadingImage”).hide(‘slow’);
$.fancybox(data);
}
});
// $.fancybox.close();
});
event.stopPropagation();
});