2011

Triggering functions when closing a fancybox pop up

Posted By : Shaun McCran
Related Categories: JQuery, Javascript

The FancyBox JQuery plugin is a popular lightbox style plugin that allows you a variety of options to 'pop' different types of content up into a users view.

I needed to have the parent page change when the user had performed an action within the pop up. But how to do this?

FancyBox (http://fancybox.net/) has a 'onClosed' option to allow you to embed a function call whenever the user closes the lightbox.

The format of this is a little tricky, so here is an example:

view plain print about

1// pop up handler
2$.fancybox({
3    'autoDimensions':    false,
4    'speedIn'            : 600,
5    'speedOut'            : 200,
6    'overlayShow'        : true,
7    'width'            : 440,
8    'height'            : 340,
9    'type'            : 'iframe',
10    'scrolling'            : 'no',
11    'transitionIn'        : 'elastic',
12    'transitionOut'        : 'fade',
13    'enableEscapeButton'    : 'true',
14    'overlayOpacity'        : 0.5,
15    'title'            : '',
16    'href'             : 'yourpage.htm',
17    'onClosed'            : function() { alert('closed'); }

You can build any function you want in this call, it is normal JavaScript after all, if you just wanted to reload the page you could have a refresh function:

view plain print about