How to use the filemanager with colorbox

Colorbox is a wonderful lightbox plugin based on jQuery.

To provide a clean GUI, it is possible to embed the Filemanager within colorbox setting up an iframe.

Few lines of code will be enough to explain how it works.

The HTML part :

<input name="multi_url" type="text" id="multi_url" maxlength="255" value="" />
<a id="browse_server" href="filemanager/index.html?field_name=multi_url"><span>Browse server</span></a>

The HTML above will provide that kind of GUI and clicking the button (folder image) will open filemanager in colorbox. :

The only thing to do, is to specify, in the URL the field_name value which make reference to the field to populate when selecting a file from the Filemanager.

The Javascript part is really simple :

$(document).ready(function(){
  $("#browse_server").colorbox({iframe:true, innerWidth:"80%", innerHeight:"80%" });
});

and, thats's folk ....