Dynamically Calling Fancybox from Javascript

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>

Advertisements
9 comments
  1. Chris Kundinger said:

    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);

  2. Phil said:

    thanks this was helpful and something I could implement

  3. bobby said:

    Thank you.

  4. TeChn4K said:

    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’
    });
    });

  5. Juan said:

    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.

    • Juan, sorry I haven’t worked with swf much at all.

  6. Peter said:

    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();
    });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s