Skip to content
bcmoney edited this page May 21, 2011 · 11 revisions

We should cover some more info on how the API works.

OPENING FacyBox

	jQuery.ajax(
		   url: encodeURI(link),
	           success: function(data){
			jQuery.facybox(data);      //open data from AJAX link*
		},
		error: function() {
			window.location = link;     //fallback in case FacyBox couldn't open**
		}
	});

_(*NOTE on AJAX external .vs. internal links... you will need a proxy to pull data from external sites, due to the same-origin policy of browsers. With upcoming HTML5 techniques, that may become less of an issue, just a heads up)

(**NOTE on fallback... we could try to popup a whole new window with window.open, but most users like that even less than redirecting the current tab... hmm, the lesser of two evils)

It was my experience that a document with a full DOM (that is, html, head, body, etc) caused some problems when working from a large document to begin with, I couldn't use the AJAX technique to load the content. In that case, you may want to use an iFrame to hold the content, for example in the code above switch just the call to facebox as follows:

jQuery.facybox('<iframe src="'+link+'" width="400" height="300" scrolling="no"></iframe>');

But if you do this, just be careful that you can't easily control FacyBox within an iFrame (especially when the content is not on your domain); users MUST click on the top right or you'll have to use HTML5 cross-domain messaging or some dirty tricks to bypass the browser security restrictions.

CLOSING FacyBox

jQuery(document).trigger('close.facybox')

Though you give some great examples how to control FacyBox programmatically when opening a new one, you didn't show another important step which is to close said box programmatically except in the comments in the JS file. Its useful to close it for example if its a notification (may want to auto-close after a few seconds), or, maybe from a link or button within the FacyBox instead of the X, the user might want to know they have more ways out than just finding the sometimes tricky X in the top right (im thinking of first-hand experience when using a mobile device and a site forgot to do device-detection and uses their full-fledged AJAX popup assault on you)

So, that's the hint... you can either use the code provided above or programmatically simulate a click to the "Close" icon as follows: jQuery(".close").click();

In any case, I'd suggest the first technique from the author themselves but both should work.

Clone this wiki locally