Category Archives: jquery

Fancybox: Reload Parent Page When Closed

This caused me a bit of a headache. I knew you had to use the onClosed option in your Fancybox call, but wasn’t sure how to use it. For example, if you have a page full of images, and use Fancybox to add/edit those images, then you want that parent page to refresh when you close the Fancybox to show any changes you made.

In this example, I attach a Fancybox to any link with the class “editImage.” When it’s closed, the parent will refresh:

$("a.editImage").fancybox({
  'width': 800,
  'height': 450,
  'onClosed': function() {
    parent.location.reload(true);
  }
});

If you’re not sure what this means or how to use Fancybox, you should hop over here.

Update August 10, 2011:

Note that if you have something like this in your file:

$(".iframe").fancybox({
  'width': 800,
  'height': 400   
});

That it should go before anything else, otherwise if your fancy box link has both of these classes, the iframe class will cancel out anything you declare before it. So in this example, if my link was like <a class=”iframe editImage” href=”whatever”> then in my javascript, I’d want to declare the iframe before the editImage, like so:

$(".iframe").fancybox({
  'width': 800,
  'height': 400   
});

$("a.editImage").fancybox({
  'width': 800,
  'height': 450,
  'onClosed': function() {
    parent.location.reload(true);
  }
});

Sizing and Positioning Fancybox

You’ve probably seen Fancybox all over the place. In a way, it’s the living-successor of ThickBox and Lightbox.

I was recently on a project where I had to both size and place it. Sizing it is easy. Say you have a link tag with an id of opener, like this:

Google

To create and size the fancybox that will open when it’s clicked, you’d just add the following javascript to your page:


Note that pixels are assumed, you should not say something like “390 pixels” like you would in css, it won’t work then.

So, above we have defined a fancybox that is 390 pixels wide, and 400 pixels high. Next we need to position it.

(Note this is based on Fancybox 1.3 – I can’t say if it’ll work with other versions.)

Fancybox puts everything in a layer with an id of “fancybox-wrap” – so we can easily manipulate it with basic css, like so:

#fancybox-wrap {
  margin: -70px 0 0 290px;
}

You can do the same with padding, maybe even positioning.

Hope that helps someone!