Tips and tricks for using the Facebox jQuery Pop-up plugin

Tips and tricks for using the Facebox jQuery Pop-up plugin

I’ve been using this Facebox plugin for a while now in several SharePoint solutions that I’ve created, it’s not perfect but it grew on me, I find it easy to deploy and useful, and I like the modern look it gives to your web solution.


So here are a few tips and tricks for using this plugin:
1. Make your Facebox window draggable:
{code type=javascript}
$(document).ready(function() {
//Make facebox popup window draggable
$(document).bind(‘reveal.facebox’, function(){ $(“#facebox”).draggable( { cursor: “pointer” } ); });
});
{/code}

*For the draggable code to work you have to add a reference to jQuery UI.

2. Open a facebox pop-up window from within a facebox box window –
Create this function –
{code type=javascript}
//Open facebox from facebox – used in Day Pop up
function launchNextFaceboxPage(url) { $.facebox({ ajax:url }); }
{/code}
Call it when clicking your link –
{code type=Html}
My Link
{/code}
3. The preloader gif image did not load for me, I found this quick fix for it –
You need to change line 106 on the facebox.js file from –
{code type=javascript}
$(‘#facebox .body’).children().hide().end().
{/code}
to:
{code type=javascript}
$(‘#facebox .content’).children().hide().end().
{/code}